Button
Only flat styled
A link is a link and a button is button.
…but if needed, there is a class to let a link shine like a button
Single Button
button, a.btn,
button:visited, a.btn:visited{
width:auto; padding:0.325rem 1.42rem;
background:#e0e0e0;
border:1px solid #a1a1a1;
}
a.btn,
a.btn:visited{
padding:0.3025rem 1.42rem;
}
button:hover, a.btn:hover,
button:focus, a.btn:focus{
background:#f5f5f5;
}
button:active, a.btn:active{
background:#ccc;
border:1px solid #ccc;
}
Classic Button
Link like a Button
Stylished Link
Classic Button #rounded
4px corner radius by adding the class="cf_rc4"
Link like a Button #rounded
Stylished Link
Grouped Button
a.group, a.groupRC{
padding:0.09rem 1.42rem;
}
.group:not(:first-of-type),
.groupRC:not(:first-of-type),
form input ~button.group,
form input ~button.groupRC{
border-left-width:0px;
}
form input ~button{
padding:0.09rem 1.42rem;
}
form input.groupRC{
border-top-left-radius:4px;
border-bottom-left-radius:4px;
}
form input ~button.groupRC{
border-top-right-radius:4px;
border-bottom-right-radius:4px;
}
form input ~button.groupRC{
border-top-left-radius:0;
border-bottom-left-radius:0;
}
Classic Button #grouped
Link like a Button #grouped
Classic Button #grouped #rounded
Link like a Button #grouped #rounded
Grouped with Icon inside
/** only ruled the icons to auto width */
/* Font Awesome */
[class^='fa fa-'],
[class^='fas fa-']{
width:auto;
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
<i class="fas fa-file-pdf"></i>
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
<i class="fas fa-external-link-square-alt"></i>
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
<i class="fas fa-cogs"></i>
<i class="fas fa-download"></i>
<i class="fas fa-bookmark"></i>
<i class="fas fa-share-square"></i>
<i class="fas fa-search"></i>