CSS Web Buttons Text And Icon Properties

all reset ☀ Lights Netbax Online Editor Try it Yourself Run

HTML

<button type="button" class="button blue"><i class="fa fa-file- btn-icon-prepend"></i> Submit</button>
<button type="button" class="button gray"><i class="fa fa-warning btn-icon-prepend"></i> Warning </button>
<button type="button" class="button green"><i class="fa fa-upload btn-icon-prepend"></i> Upload </button><hr>
<button type="button" class="button red">Print <i class="fa fa-print btn-icon-append"></i></button>
<button type="button" class="button orange"><i class="fa fa-refresh btn-icon-prepend"></i> Reset </button>
<button type="button" class="button purple">Edit <i class="fa fa-file btn-icon-append"></i></button>
<hr>
<button type="button" class="button blueo"><i class="fa fa-file- btn-icon-prepend"></i> Submit</button>
<button type="button" class="button grayo"><i class="fa fa-warning btn-icon-prepend"></i> Warning </button>
<button type="button" class="button greeno"><i class="fa fa-upload btn-icon-prepend"></i> Upload </button><hr>
<button type="button" class="button redo">Print <i class="fa fa-print btn-icon-append"></i></button>
<button type="button" class="button orangeo"><i class="fa fa-refresh btn-icon-prepend"></i> Reset </button>
<button type="button" class="button purpleo">Edit <i class="fa fa-file btn-icon-append"></i></button>
<hr>
<button type="button" class="button white"><i class="fa fa-apple btn-icon-prepend " style="font-size:36px"></i><span class="d-inline-block text-left">
<small class="font-weight-light d-block">Available on the</small> App Store </span></button>

<button type="button" class="button white"><i class="fa fa-android btn-icon-prepend" style="font-size:36px"></i><span class="d-inline-block text-left">              <small 
class="font-weight-light d-block">Get it on the</small> Google Play </span></button>

CSS

.button {
 text-align: center;
border: 1px solid transparent;
padding: 14px 40px;
font-size: 17px;
border-radius: 4px;
cursor: pointer;}

.blue{
  color: #fff;
  background-color: #0090e7;
  border-color: #0090e7; }
  .blue:hover{
    color: #fff;
    background-color: #0078c1;
    border-color: #0070b4; }
  .blue:focus {
    color: #fff;
    background-color: #0078c1;
    border-color: #0070b4;
    box-shadow: 0 0 0 0.2rem rgba(38, 161, 235, 0.5); }

.gray {
  color: #212529;
  background-color: #e4eaec;
  border-color: #e4eaec; }
  .gray:hover {
    color: #212529;
    background-color: #ced9dc;
    border-color: #c6d3d7; }
  .gray:focus {
    color: #212529;
    background-color: #ced9dc;
    border-color: #c6d3d7;
    box-shadow: 0 0 0 0.2rem rgba(199, 204, 207, 0.5); }
  
.green {
  color: #fff;
  background-color: #00d25b;
  border-color: #00d25b; }
  .green:hover {
    color: #fff;
    background-color: #00ac4a;
    border-color: #009f45; }
  .green:focus {
    color: #fff;
    background-color: #00ac4a;
    border-color: #009f45;
    box-shadow: 0 0 0 0.2rem rgba(38, 217, 116, 0.5); }

.red {
  color: #fff;
  background-color: #fc424a;
  border-color: #fc424a; }
  .red:hover {
    color: #fff;
    background-color: #fb1c26;
    border-color: #fb101a; }
  .red:focus {
    color: #fff;
    background-color: #fb1c26;
    border-color: #fb101a;
    box-shadow: 0 0 0 0.2rem rgba(252, 94, 101, 0.5); }

.purple {
  color: #fff;
  background-color: #8f5fe8;
  border-color: #8f5fe8; }
  .purple:hover {
    color: #fff;
    background-color: #783ee3;
    border-color: #7032e2; }
  .purple:focus {
    color: #fff;
    background-color: #783ee3;
    border-color: #7032e2;
    box-shadow: 0 0 0 0.2rem rgba(160, 119, 235, 0.5); }
 
.orange {
  color: #212529;
  background-color: #ffab00;
  border-color: #ffab00; }
  .orange:hover {
    color: #212529;
    background-color: #d99100;
    border-color: #cc8900; }
  .orange:focus{
    color: #212529;
    background-color: #d99100;
    border-color: #cc8900;
    box-shadow: 0 0 0 0.2rem rgba(222, 151, 6, 0.5); }

.blueo{
  color: #0090e7;
  background-color: transparent;
  border-color: #0090e7; }
  .blueo:hover{
    color: #fff;
    background-color: #0090e7;
    border-color: #0090e7; }
  .blueo:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 144, 231, 0.5);}

.grayo {
  color: gray;
background-color: transparent;
  border-color: #e4eaec; }
  .grayo:hover {
    color: #212529;
    background-color: #ced9dc;
    border-color: #c6d3d7; }
  .grayo:focus {
    color: #212529;
    background-color: #ced9dc;
    border-color: #c6d3d7;
    box-shadow: 0 0 0 0.2rem rgba(199, 204, 207, 0.5); }
  
.greeno {
  color: #00d25b;
background-color: transparent;
  border-color: #00d25b; }
  .greeno:hover {
    color: #fff;
    background-color: #00ac4a;
    border-color: #009f45; }
  .greeno:focus {
    color: #fff;
    background-color: #00ac4a;
    border-color: #009f45;
    box-shadow: 0 0 0 0.2rem rgba(38, 217, 116, 0.5); }

.redo {
  color: #fc424a;
background-color: transparent;
  border-color: #fc424a; }
  .redo:hover {
    color: #fff;
    background-color: #fb1c26;
    border-color: #fb101a; }
  .redo:focus {
    color: #fff;
    background-color: #fb1c26;
    border-color: #fb101a;
    box-shadow: 0 0 0 0.2rem rgba(252, 94, 101, 0.5); }

.purpleo {
  color: #8f5fe8;
background-color: transparent;
  border-color: #8f5fe8; }
  .purpleo:hover {
    color: #fff;
    background-color: #783ee3;
    border-color: #7032e2; }
  .purpleo:focus {
    color: #fff;
    background-color: #783ee3;
    border-color: #7032e2;
    box-shadow: 0 0 0 0.2rem rgba(160, 119, 235, 0.5); }
 
.orangeo {
  color: #ffab00;
background-color: transparent;
  border-color: #ffab00; }
  .orangeo:hover {
    color: #212529;
    background-color: #d99100;
    border-color: #cc8900; }
  .orangeo:focus{
    color: #212529;
    background-color: #d99100;
    border-color: #cc8900;
    box-shadow: 0 0 0 0.2rem rgba(222, 151, 6, 0.5); }

.white {
  color: #fff;
  background-color: transparent;
  border-color: #000; 
color: #212529;}
  .white:hover {
    color: #212529;
    background-color: #ececec;
    border-color: #e6e6e6; }
  .white:focus {
    color: #212529;
    background-color: #ececec;
    border-color: #e6e6e6;
    box-shadow: 0 0 0 0.2rem rgba(222, 222, 223, 0.5); }

.d-inline-block {
  display: inline-block !important; }

.text-left {
  text-align: left !important; }

.font-weight-light {
  font-weight: 300 !important; }

.d-block {
  display: block !important; }

HTML reset copy

CSS reset copy

HTML

CSS