Question

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

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

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

祝你好运

Answer 1

你不能让Bootstrap为你生成这个按钮，但你可以自己在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;
}

引导程序中的自定义按钮

3 个答案: