Jump to: navigation, search

Hollow Buttons

A small selection of custom hollow buttons that we created for darker backgrounds, for example the blue jumbotron. The area five variants, which use shades of for the button border.

Highly customisable collection of buttons, change the existing variants or create more.

<div class="btn default hollow btn-lg">[[#|<span style="color:#2199e8;">Default Styled Link</span>]]</div>
<div class="btn secondary hollow btn-lg">[[#|<span style="color:#777;">Secondary Styled Link</span>]]</div>
<div class="btn success hollow btn-lg">[[#|<span style="color:#3adb76;">Success Styled Link</span>]]</div>
<div class="btn warning hollow btn-lg">[[#|<span style="color:#ffae00;">Warning Styled Link</span>]]</div>
<div class="btn red hollow btn-lg">[[#|<span style="color:#ec5840;">Alert Styled Link</span>]]</div>
<div class="btn white hollow btn-lg">[[#|<span style="color:#fff;">Learn more</span>]]</div>

Note how the link text color is generated inline with a span.

There is also a pure white button, which would be pointless demonstrating here as it would be invisible on a white background.

Add to Mediawiki:common.css

.btn.hollow{border:1px solid #2199e8;color:#2199e8}
.btn.hollow,.button.hollow:focus,.button.hollow:hover{background-color:transparent}
.btn.hollow:focus,.button.hollow:hover{border-color:#0c4d78;color:#0c4d78}
.btn.hollow.primary{border:1px solid #2199e8;color:#2199e8}
.btn.hollow.primary:focus,.button.hollow.primary:hover{border-color:#0c4d78;color:#0c4d78}
.btn.hollow.secondary{border:1px solid #777;color:#777}
.btn.hollow.secondary:focus,.button.hollow.secondary:hover{border-color:#3c3c3c;color:#3c3c3c}
.btn.hollow.success{border:1px solid #3adb76;color:#3adb76}
.btn.hollow.success:focus,.button.hollow.success:hover{border-color:#157539;color:#157539}
.btn.hollow.red{border:1px solid #ec5840;color:#ec5840}
.btn.hollow.red:focus,.button.hollow.alert:hover{border-color:#881f0e;color:#881f0e}
.btn.hollow.warning{border:1px solid #ffae00;color:#ffae00}
.btn.hollow.warning:focus,.button.hollow.warning:hover{border-color:#805700;color:#805700}
.btn.hollow.white{border:1px solid #ffffff;color:#ffffff}
.btn.hollow.white:focus,.button.hollow.white:hover{border-color:#805700;color:#805700}