如何让这个锚链接看起来像一个按钮

Question

我怎样才能让它看起来像一个按钮？我已经尝试过webkit，但它似乎并没有起作用我必须做错事。我附上了一张它看起来像什么的图像以及我想要它看起来像什么。使用HTML5 CSS3和bootstrap。感谢您的帮助！

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

在页面上我放了锚     

它运作正常，但它看起来并不像它应该的那样。

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;
}

Answer 2

无需使用

-webkit-border-radius: 40px;
-moz-border-radius: 40px;
-ms-border-radius: 40px;
-o-border-radius: 40px;

只需使用：

 border:#00bfff 1px solid;
border-radius: 25px;

这是更优化的代码

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:#00bfff 1px solid;
border-radius: 25px;

}

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

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