Question

我非常感谢一些帮助。我正在尝试为我的网站创建一个介绍，其中包括＆＃34;入门＆＃34;按钮。介绍页面只有文本和此按钮。但是，当我尝试调整边距或定位以使它们到达我想要的位置时，有时按钮不起作用。此外，我正在使用bootstrap希望使我的网站适合移动设备。但我也在努力解决这个问题。这是我的HTML：

    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <div class="container">

        <div class="row">

            <div class="col-md-10 col-md-offset-1">

                <div class="intro">

                    <h2>Did you know...<br>
                    There is an easy and elegant way to conserve?<br><br>
                    WATER you waiting for?</h2>

                    <a href="home.html" class="myButton">Get Started!</a>
                </div>

            </div>
        </div>
    </div>


</body>

这是我的css：

    /*CSS for intro page*/

body {
    background-image: url(images/realcrop.jpg);
    background-repeat: none;
    background-size: cover;
    }

    .container {
        text-align: center;
                    margin-top: 8%;
    }

    .intro {
        width: 100%;

    }

    .intro h2 {

        font: 3em "Calibri", Arial, Helvetica, Geneva, sans-serif;
        color: #ffffff;
    }



.myButton {
    -moz-box-shadow: 0px 10px 14px -7px #276873;
    -webkit-box-shadow: 0px 10px 14px -7px #276873;
    box-shadow: 0px 10px 14px -7px #276873;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
    background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
    background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
    background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);
    background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
    background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
    background-color:#599bb3;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
    position: absolute;
    cursor:pointer;
    color:#ffffff;
    font-family:arial;
    font-size:20px;
    font-weight:bold;
    padding:13px 32px;
    margin-left: -12%;
    text-decoration:none;
    text-shadow:0px 1px 0px #3d768a;
}
.myButton:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3));
    background:-moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
    background:-webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
    background:-o-linear-gradient(top, #408c99 5%, #599bb3 100%);
    background:-ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
    background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0);
    background-color:#408c99;
    text-decoration:none;
    color: #ffffff;
}
.myButton:active {
    position:absolute;
    top:1px;
}

Answer 1

而是给链接提供类按钮，在de里面创建一个实际的按钮。此外，如果你想要它是移动友好的，只需使用bootstrap本身的按钮css

Answer 2

对于<a href="home.html" class="myButton">Get Started!</a>，我宁愿创建一个按钮。第一个选项

<button type="button" onclick="window.open('home.html')">Get Started</button>

第二个选项

<form action="home.html">
    <input type="submit" value="Go to home">
</form>

第三个选项

<button type="button"><a href="home.html">Getting Started!</a></button>

祝你好运！

按钮不起作用

2 个答案: