html - 我怎样才能让这个 anchor 链接看起来像一个按钮

Question

我怎样才能让它看起来像一个按钮？我已经尝试过 webkit，但它似乎没有用，我一定是做错了什么。我附上了一张图片，说明它的外观以及我为使它看起来像而绑的东西。使用 HTML5 CSS3 和 Bootstrap 。感谢您的帮助!

<div class="btn-one">
<a href="#h3" class="button">Scroll Down to Learn More</a>
</div>

我在页面下方放置了 anchor

它工作正常，但看起来不正常。

CSS

a.button {
text-decoration: none;
color: #00bfff;
font-size: 18px;
text-transform: uppercase;
letter-spacing: .5px;
display: inline-block;
padding: 10px 30px;
margin: 20px;
font-weight: 400;
border-color: #00bfff;
border-width: 1px;
-webkit-border-radius: 50%;
-webkit-border-color:#00bfff;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}

.btn-one {
padding: 2%;
font-weight: 400;
}

Answer 1

看起来问题是缺少为您的元素定义边框样式。如果您使用定义边界的速记版本(为简单起见)，您会看到它出现。我在下面对一些 CSS 进行了采样并更改了边框半径，因为在 50% 时它看起来像一个椭圆形而不是您想要的效果。

a.button {
    text-decoration: none;
    color: #00bfff;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: .5px;
    display: inline-block;
    padding: 10px 30px;
    margin: 20px;
    font-weight: 400;
    border: 1px solid #00bfff;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
}

.btn-one {
    padding: 2%;
    font-weight: 400;
}