引导中的自定义按钮

Question

我在创建twitter靴带3中的自定义按钮时遇到问题。

我需要做这样的按钮（在右下角有三角形）。 http://i.imgur.com/Xkvfh32.jpg

我知道解决该问题的一种方法是使用此按钮的背景并添加文本。但有没有一个自定义按钮生成器来做按钮？

问候

Answer 1

你不能让引导产生这个按钮你，但你可以在你的CSS自己定义。

这里只是一个很酷的使用解决方案CSS：

<a href="#">Button!</a> 


a{ 
    background:#b6174d; 
    color: white; 
    font-weight: bold; 
    padding: 10px 15px; 
    text-decoration: none; 
    font-family: Arial; 
    position:relative 
} 

a:after{ 
    content: ""; 
    position: absolute; 
    bottom: 0px; 
    right: 0px; 
    border-width: 0px 0px 13px 13px; 
    border-style: solid; 
    border-color: #fff transparent; 
    display: block; 
    width: 0; 
} 

a:hover{ 
    background: #e83370; 
} 

或检查小提琴：http://jsfiddle.net/9tPcZ/1/

Answer 2

FIDDLE

<div style="background: gray; height: 100px; width: 200px; position: relative;"> 
    <div style="height: 1px; width: 1px; border-top: solid gray 20px; border-right: solid white 20px; position: absolute; bottom: -1px; right: 0;"></div> 
</div> 

或使用本Jquery Plugin

Answer 3

创建使用CSS：伪类后

演示：http://jsfiddle.net/surjithctly/cqT4m/

HTML

<a class="button" href="#"> 
    My big Button 
</a> 

CSS

.button { 
    background:#FF0000; 
    padding:10px 30px; 
    display:block; 
    float:left; 
    position:relative; 
    color:#FFF; 
    text-decoration:none; 
} 

.button:after { 
    content:""; 
    width: 0px; 
    height: 0px; 
    border-style: solid; 
    border-width: 0 0 12px 12px; 
    border-color: transparent transparent #FFF transparent; 
    position:absolute; 
    right:0; 
    bottom:0; 
}