带进度条的重定向按钮

Question

我想知道如何结合按钮和进度条来实现接近 Whosebug 站点上的 next badge 按钮的效果。这是我试过的 Fiddle:

<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"/>
<div style="padding: 30px;">
    <div class="progress" style="width:170px; height:25px;">
    <a class="progress-bar progress-bar-warning"
         role="progressbar" 
         aria-valuenow="60" aria-valuemin="0" 
         aria-valuemax="100" style="width: 30%;">
        <span class="sr-only">30% Complete</span>
                Show
    </a>
</div>

位于左侧的文本和整个构造不充当按钮（仅文本）。换句话说，我如何将第一个转换为另一个？

=>

Answer 1

看看结果here。

HTML:

<div style="padding: 30px; width: 250px;">
    <a href="#here-comes-your-link">
    <div class="progress p-style">
        <div class="progress-bar pb-style" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:40%"></div>
            <span class="show">Fanatic</span>
        </div>
    </div>
    </a>
</div>

CSS:

.pb-style {
    background: #FFCC00;    
    box-shadow: none;
    -webkit-box-shadow: none;
}
.p-style {
    height: 25px;
    border: 1px solid #FFCC00;
    position: relative;
}
.progress span {
    position: absolute;
    display: block;
    font-size: 11px;
    color: #222;
    width: 100%;
    text-align: center;
    line-height: 25px;
 }

带进度条的重定向按钮

Redirect button with progressbar

css

twitter-bootstrap

button

twitter-bootstrap-3

progress-bar