Question

我基本上想在这一侧创建一个像“下载引导程序”按钮的按钮：http://getbootstrap.com/

注意：我想用css＆amp;和我自己创建按钮。 html而不是twitter-bootstrap框架

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

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

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

为什么链接也会获得白色背景（而不仅仅是按钮div）？

Answer 1

如果添加了border-radius，似乎没问题

例如

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

Answer 2

不要使用div，只需设置链接样式（a）。目前你正在设置链接和div的样式，这是不必要的 - 这会产生冲突，并且在语义上是无用的。

如果您需要在其中嵌套多个元素，然后将div定位到一次定位所有元素（仅举例），您可能只想使用div。

Answer 3

你去..检查出来..悬停边框必须是圆形的，这样它才不会与正常边框重叠。此添加位于主按钮边框的引擎盖下，因此不会在角落处弹出。

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

http://jsfiddle.net/47vDq/

如何使Twitter-Bootstrap像按钮

3 个答案: