Butoane css-only fara imagini

[mr.franta]

Salut,daca va plac butoanele acum avem unele care le imita pe cele create in photoshop dar ele sunt create in css folosind culori fara nici macar o imagine adaugata.

CLick pentru demonstratie live  sau vezi imaginea de mai jos

HTML

<script src="https://kit.fontawesome.com/5143535c26.js" crossorigin="anonymous"></script>
<div class="button" id="green"><span><i class="fas fa-download"></i>Download green</span></div>
<div class="button" id="blue"><span><i class="fas fa-download"></i>Download blue</span></div>

<div class="button" id="red"><span><i class="fas fa-download"></i>Download red</span></div>

<div class="button" id="orange"><span><i class="fas fa-download"></i>Download orange</span></div>
<br />
<br />

<div class="button" id="neon"><span><i class="fas fa-download"></i>Download neon</span></div>


<div class="button" id="pink"><span><i class="fas fa-download"></i>Download pink</span></div>

<div class="button" id="purple"><span><i class="fas fa-download"></i>Download purple</span></div>
<div class="button" id="yellow"><span><i class="fas fa-download"></i>Download yellow</span></div>

CSS

body{
  background: #777;
}
.button{
  display: inline-block;
  min-width: 160px;
  font-size: 12px;
  font-family: tahoma;
  text-align: center;
  line-height: 40px;
  padding: 2px;
  color: #fff;
 background: #242424;
  border-radius: 20px;
  border: 1px solid #000;
}

.button span{
  background: #232526;  
background: -webkit-linear-gradient(to right, #414345, #232526);  
background: linear-gradient(to right, #414345, #232526); 
  display: inline-block;
  width: 99%;
  line-height: 40px;
  border-radius: 18px;
  box-shadow: 0px 1px 1px #555 inset;
  border: 1px solid #141414;
 
}



.button span i{
  font-size: 16px;
  display: inline-block;
  position: relative;
  right: 10px;
}

#neon{
 background: #00c3ff;  
background: -webkit-linear-gradient(to right, #ffff1c, #00c3ff); 
background: linear-gradient(to right, #ffff1c, #00c3ff); 

}

#neon:hover{
  background: #242424;
}

.button span:before{
  content: "";
  display: inline-block;
  background: rgba(255,255,255,0.3);
  width: 94%;
  height: 18px;
  border-radius: 10px;
  position: relative;
  left: 4px;
  top: 4px;
  margin-bottom: -24px;
  float: left;
}


#blue:hover{
  background: #242424;
}
#blue:hover span{
 background: #1f82de;
   box-shadow: 0px 1px 1px #609ee6 inset;
}



#blue span{
 height: 38px;
 position: relative;
  bottom: 0px;
  background: #246ff0;
box-shadow: 0px 1px 1px #86b6e3 inset;
}

.button:hover span:before{
 background: rgba(255,255,255,0.5);
}


#green span{
  background: #5e8f39;
  box-shadow: 0px 1px 1px #a1d46e inset;
}

#green:hover span{
  background: #76ad3e;
}

#red span{
  background: #942d23;
   box-shadow: 0px 1px 1px #e35952 inset;
}

#red:hover span{
  background: #e8311e;
}


#orange span{
  background: #b06831;
   box-shadow: 0px 1px 1px #e8ae82 inset;
}

#orange:hover span{
  background: #eb7821;
  box-shadow: 0px 1px 1px #f7b879 inset;
}

#pink span{
  background: #a62b95;
  box-shadow: 0px 1px 1px #c468b8 inset;
}

#pink:hover span{
  background: #cf32ba;
}

#purple span{
  background: #5b2b82;
  box-shadow: 0px 1px 1px #a46dd1 inset;
}

#purple:hover span{
  background: #8327cf;
}

#yellow span{
  background: #a19c20;
  box-shadow: 0px 1px 1px #ebe771 inset;

}

#yellow:hover span{
  background: #bfb90d;
  
}