我怎样才能得到这个锚链接看起来像一个按钮

我怎么能得到这看起来像一个按钮？我已经尝试过webkit，但它似乎并没有工作，我一定在做错了什么。我附上了它看起来像什么和我绑到什么样子的图像。使用HTML5 CSS3和引导。感谢您的帮助！我怎样才能得到这个锚链接看起来像一个按钮

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

来源

2016-04-11 Classics07

无法看到附加的图像。如果你正在使用Bootstrap，一个起点可能是检查这个元素，并确保Bootstrap样式不会覆盖你正在定义的内容。 – Shakespeare

我加了。我的道歉 – Classics07

不用担心 - 我已经添加了答案。为了将来的参考，在代码示例中添加一个小的CodePen可能会很有用，这样任何人都可以轻松地跳入并查看问题。如果你这样做，你可能会得到更快的答案:) – Shakespeare

它看起来像问题是缺乏定义边框样式到你的元素。如果您使用定义边界的简化版本（为简单起见），您会看到它出现。我在下面抽取了一些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; 
}

来源

2016-04-11 15:42:09 Shakespeare

无需使用

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

来源

2016-04-11 16:40:41

我怎样才能得到这个锚链接看起来像一个按钮

回答

相关问题