html - 如何制作类似 Twitter-Bootstrap 的按钮

Question

我基本上想创建一个按钮，就像这一侧的大“下载 Bootstrap”按钮:http://getbootstrap.com/

注意:我想自己使用 css 和 html 创建按钮，而不是使用 twitter-bootstrap 框架

我能够做得很好，但后来我注意到有一个错误:http://jsfiddle.net/vk5DV/

如果将鼠标悬停在按钮上时放大，您会发现按钮的一 Angular 有问题。我认为链接本身的样式是白色背景的，但我不知道为什么。

#googlink a {
    color: white;
    transition: all 0.2s linear 0s;
}
#googlink :hover {
    background-color: white !important;
    color: #99CC00;
}

为什么链接也有白色背景(而不仅仅是按钮 div)？

Answer 1

如果添加边框半径似乎没问题

例如

#googlink :hover {
    background-color: white !important;
    border-radius: 6px;
    color: #99CC00;
}

http://jsfiddle.net/f3kzb/show/

虽然如果你稍微简化一下，我认为它可以很好地与你已有的代码配合使用。还指定为与任何链接一起使用的类。

http://jsfiddle.net/fe25t/

html

<div id="green">

<a href="http://google.com/" class="special-link">Google</a>

</div>

CSS

body {
    margin: 0;
    padding: 0;
}
#green {
    background-color: #99CC00;
}
a {
    text-decoration: none;
    color: black;
}
.special-link {

    border-radius: 10px;
    margin: 40px;
    display: inline-flex;
    height: auto;
    width: auto;
    font-size: 65px;
    background-color: #99CC00;
    border: 2px solid white;
    color: white;
    transition: all 0.2s linear 0s;
}

.special-link:hover {
    background-color: white !important;
    color: #99CC00;
}