Font Awesome Examples

by DefuZe

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
      <div class="col-md-2 text-center">
      <button class="btn btn-iconed prevBtn">
            <span class="spn">Далее</span>
             <i class="fa fa-chevron-left"></i>
         </button> 
         
          <button class="btn btn-iconed nextBtn">
            <span class="spn">Далее</span>
             <i class="fa fa-chevron-left"></i>
         </button> 
         <!-- button classes -->
         <button role="button" class="btn btn-outline-warning btn-lg btn-iconed btn-rounded">
            <i class="fa fa-arrow-left"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-warning my-3">
            <i class="fa fa-arrow-left fa-2x"></i>
         </div>
      </div>
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-danger btn-lg btn-iconed btn-rounded">
            <i class="fa fa-heart"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-danger my-3">
            <i class="fa fa-heart fa-2x"></i>
         </div>
      </div>     
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-info btn-lg btn-iconed btn-rounded">
            <i class="fa fa-long-arrow-left"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-info my-3">
            <i class="fa fa-long-arrow-left fa-2x"></i>
         </div>
      </div>      
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-success btn-lg btn-iconed btn-rounded">
            <i class="fa fa-arrow-circle-left"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-success my-3">
            <i class="fa fa-arrow-circle-left fa-2x"></i>
         </div>
      </div>      
     ...

CSS

.btn {
  background-color: #1447c0;
    color: #fff;
   padding: 10px 35px;  
    cursor: pointer;
    border: 0;
    border-radius: 4px;
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, .2);
	  transition: all 1s ease;
    overflow:hidden;
}

.btn-iconed {
  transition: 0.15s ease-in-out;
  padding-left: 1.3rem;
  padding-right: 1.5rem;
}
.btn-iconed [class~="fa"] {
  opacity: 0;
  -webkit-transform-origin: left right;
          transform-origin: left right;
  -webkit-transform: translateX(-10px) scale(1.25);
          transform: translateX(-10px) scale(1.25);
  transition: 0.15s ease-out;
}
.nextBtn [class="spn"] {
  position: relative;
  left: -9px;
  -webkit-transform-origin: left right;
          transform-origin: left right;
  -webkit-transform: translateX(-9px);
          transform: translateX(-9px);
  transition: 0.2s ease-in-out;
}
.btn-iconed:hover [class~="fa"]{
  opacity: 1;
  -webkit-transform: translateX(0px) scale(0.75);
          transform: translateX(0px) scale(0.75);
}
.nextBtn:hover [class="spn"] {
 left: 0px;
}
.prevBtn [class="spn"] {
  position: relative;
  left: -9px;
  -webkit-transform-origin: left right;
          transform-origin: left right;
  -webkit-transform: translateX(-9px);
          transform: translateX(-9px);
  transition: 0.2s ease-in-out;
}

.prevBtn:hover [class~="fa"] {
  opacity: 1;
  -webkit-transform: translateX(0px) scale(0.75);
          transform: translateX(0px) scale(0.75);
}
.prevBtn:hover [class="spn"] {
  left: 0px;
}