cFlex Guide // Button

cFlex License



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>

Button/Link with icon


open the link




Classic Button #grouped with icons





<i class="fas fa-search"></i>