fixes #3845: add .btn-link for transparent buttons styled as links

This commit is contained in:
Mark Otto 2012-07-17 23:32:52 -07:00
parent cb1a59caa0
commit aac3736eea
5 changed files with 64 additions and 8 deletions

View File

@ -3175,6 +3175,26 @@ input[type="submit"].btn.btn-mini {
*padding-bottom: 1px;
}
.btn-link {
color: #0088cc;
cursor: pointer;
background-color: transparent;
background-image: none;
border-color: transparent;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.btn-link:hover {
color: #005580;
text-decoration: underline;
background-color: transparent;
}
.btn-group {
position: relative;
*margin-left: .3em;

View File

@ -93,7 +93,7 @@ hr.soften {
padding: 40px 0;
color: #fff;
text-align: center;
text-shadow: 0 1px 5px rgba(0,0,0,.3), 0 0 30px rgba(0,0,0,.075);
text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
background: #020031; /* Old browsers */
background: -moz-linear-gradient(45deg, #020031 0%, #6d3353 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#6d3353)); /* Chrome,Safari4+ */
@ -146,7 +146,7 @@ hr.soften {
bottom: 0;
left: 0;
background: url(../img/bs-docs-masthead-pattern.png) repeat center center;
opacity: .5;
opacity: .3;
}
/* Masthead (docs home)

View File

@ -712,12 +712,14 @@ For example, <code>section</code> should be wrapped as inline.
</table>
</div>
<pre class="prettyprint linenums">
&lt;tr class="success"&gt;
&lt;td&gt;1&lt;/td&gt;
&lt;td&gt;TB - Monthly&lt;/td&gt;
&lt;td&gt;01/04/2012&lt;/td&gt;
&lt;td&gt;Approved&lt;/td&gt;
&lt;/tr&gt;
...
&lt;tr class="success"&gt;
&lt;td&gt;1&lt;/td&gt;
&lt;td&gt;TB - Monthly&lt;/td&gt;
&lt;td&gt;01/04/2012&lt;/td&gt;
&lt;td&gt;Approved&lt;/td&gt;
&lt;/tr&gt;
...
</pre>
@ -1423,6 +1425,11 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<td><code>btn btn-inverse</code></td>
<td>Alternate dark gray button, not tied to a semantic action or use</td>
</tr>
<tr>
<td><button type="button" class="btn btn-link">Link</button></td>
<td><code>btn btn-link</code></td>
<td>Deemphasize a button by making it look like a link while maintaining button behavior</td>
</tr>
</tbody>
</table>

View File

@ -1362,6 +1362,11 @@
<td><code>btn btn-inverse</code></td>
<td>{{_i}}Alternate dark gray button, not tied to a semantic action or use{{/i}}</td>
</tr>
<tr>
<td><button type="button" class="btn btn-link">{{_i}}Link{{/i}}</button></td>
<td><code>btn btn-link</code></td>
<td>{{_i}}Deemphasize a button by making it look like a link while maintaining button behavior{{/i}}</td>
</tr>
</tbody>
</table>

View File

@ -173,3 +173,27 @@ input[type="submit"].btn {
*padding-bottom: 1px;
}
}
// Link buttons
// --------------------------------------------------
// Make a button look and behave like a link
.btn-link {
background-color: transparent;
background-image: none;
border-color: transparent;
cursor: pointer;
color: @linkColor;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.btn-link:hover {
color: @linkColorHover;
text-decoration: underline;
background-color: transparent;
}