css - 带进度条的重定向按钮

Question

我想知道如何结合按钮和进度条来实现接近 stackoverflow 网站上的 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;
 }