如何使Twitter的引导状按钮

我基本上要喜欢上了这一侧的大“下载引导”按钮，创建一个按钮：http://getbootstrap.com/如何使Twitter的引导状按钮

注：我只想用CSS &创建按钮自己HTML而不是与Twitter的引导框架

我能够做到这一点非常好，但后来我发现，有一个错误：http://jsfiddle.net/vk5DV/

如果放大而悬停在按钮上方，您会注意到在按钮的角落有错误。我认为链接本身是白色背景，但我不知道为什么。

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

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

来源

2014-06-28 Dominik Schmidt

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

只有当您需要在其中嵌套多个元素，然后定位div来一次定位所有元素（只是一个示例）时，您才想使用div。

来源

2014-06-28 16:14:43 andypopa

如果添加了边界半径它似乎确定

如

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

来源

2014-06-28 16:14:39 melc

你去了..检查了这个..悬停边框必须是圆的，以便它不会重叠正常的边框。这个添加功能位于主按钮边框的下方，因此不会在角落弹出。

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

http://jsfiddle.net/47vDq/

来源

2014-06-28 16:17:19

如何使Twitter的引导状按钮

回答

相关问题