Botões Coloridos Simples – Com Css Degradê e Box-shadow

Botões Coloridos Simples – Com Css Degradê e Box-shadow

Neste artigo veja como criar Botões Coloridos Simples – Com Css Degradê utilizando class para cada cor.

Vamos Adicionar o Html:

<a class="btn btn-azul">
  <i class="icon icon-pencil"></i>
  Cadastrar
</a>

<a class="btn btn-vermelho">
  <i class="icon icon-trash-o"></i>
  Deletar
</a>

<a class="btn btn-verde">
  <i class="icon icon-check"></i>
  Confirmar
</a>

<a class="btn btn-amarelo">
  <i class="icon icon-attention"></i>
  Alerta
</a>
<a class="btn btn-laranja">
  <i class="icon icon-users-1"></i>
  Usuários
</a>

<a class="btn">
  <i class="icon icon-cloud-upload"></i>
  <strong>Upload</strong>
</a>

<a class="btn btn-violeta">
  <i class="icon icon-cloud-download"></i>
  Download
</a>

Vamos adicionar o Css:

.btn {
  background-color: #f2f2f2;
  background-image: linear-gradient(to bottom, #f2f2f2, #f2f2f2);
  border: 1px solid #bfbfbf;
  box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #d9d9d9, inset 0 0 0 1px #f2f2f2, 0 2px 4px rgba(0, 0, 0, 0.2);
  color: #8c8c8c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  cursor: pointer;
  display: inline-block;
  font-family:'open_sansregular';
  font-size:1em;
  line-height: 22px;
  padding: 9px 16px 9px;
  margin: 16px 0 0 16px;
  transition: all 20ms ease-out;
  vertical-align: top;
}
.btn:hover, .btn:focus {
  background: #f2f2f2;
  border-color: #8c8c8c;
  box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #d9d9d9, inset 0 0 0 1px #f2f2f2;
}
.btn:active {
  background: #f2f2f2;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.4);
}
.btn i {
  color: #bfbfbf;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

/*Cores Puxe a Class*/
.btn-azul {
  background-color: #42b0e3;
  background-image: linear-gradient(to bottom, #42b0e3, #2ba9e3);
  border: 1px solid #107db0;
  box-shadow: inset 0 1px 0 #7cd4fc, inset 0 -1px 0 #2696c9, inset 0 0 0 1px #59b7e3, 0 2px 4px rgba(0, 0, 0, 0.2);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.btn-azul:hover, .btn-azul:focus {
  background: #2ba9e3;
  border-color: #004c6f;
  box-shadow: inset 0 1px 0 #7cd4fc, inset 0 -1px 0 #2696c9, inset 0 0 0 1px #59b7e3;
}
.btn-azul:active {
  background: #2ba9e3;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}
.btn-azul i {
  color: #107db0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-verde {
  background-color: #97cc76;
  background-image: linear-gradient(to bottom, #97cc76, #8bcc62);
  border: 1px solid #5f993a;
  box-shadow: inset 0 1px 0 #c6e6b3, inset 0 -1px 0 #79b356, inset 0 0 0 1px #a4cc8b, 0 2px 4px rgba(0, 0, 0, 0.2);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.btn-verde:hover, .btn-verde:focus {
  background: #8bcc62;
  border-color: #326612;
  box-shadow: inset 0 1px 0 #c6e6b3, inset 0 -1px 0 #79b356, inset 0 0 0 1px #a4cc8b;
}
.btn-verde:active {
  background: #8bcc62;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}
.btn-verde i {
  color: #5f993a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-violeta {
  background-color: #847bba;
  background-image: linear-gradient(to bottom, #847bba, #7568ba);
  border: 1px solid #493e87;
  box-shadow: inset 0 1px 0 #bab6d4, inset 0 -1px 0 #655aa1, inset 0 0 0 1px #948dba, 0 2px 4px rgba(0, 0, 0, 0.2);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.btn-violeta:hover, .btn-violeta:focus {
  background: #7568ba;
  border-color: #1f1654;
  box-shadow: inset 0 1px 0 #bab6d4, inset 0 -1px 0 #655aa1, inset 0 0 0 1px #948dba;
}
.btn-violeta:active {
  background: #7568ba;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}
.btn-violeta i {
  color: #493e87;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-laranja {
  background-color: #f58a38;
  background-image: linear-gradient(to bottom, #f58a38, #f57c20);
  border: 1px solid #c25706;
  box-shadow: inset 0 1px 0 #ffb984, inset 0 -1px 0 #db6f1d, inset 0 0 0 1px #f59851, 0 2px 4px rgba(0, 0, 0, 0.2);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.btn-laranja:hover, .btn-laranja:focus {
  background: #f57c20;
  border-color: #773300;
  box-shadow: inset 0 1px 0 #ffb984, inset 0 -1px 0 #db6f1d, inset 0 0 0 1px #f59851;
}
.btn-laranja:active {
  background: #f57c20;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}
.btn-laranja i {
  color: #c25706;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-vermelho {
  background-color: #ed6d64;
  background-image: linear-gradient(to bottom, #ed6d64, #ed574c);
  border: 1px solid #ba3329;
  box-shadow: inset 0 1px 0 #ffb0aa, inset 0 -1px 0 #d44d44, inset 0 0 0 1px #ed837b, 0 2px 4px rgba(0, 0, 0, 0.2);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.btn-vermelho:hover, .btn-vermelho:focus {
  background: #ed574c;
  border-color: #870c03;
  box-shadow: inset 0 1px 0 #ffb0aa, inset 0 -1px 0 #d44d44, inset 0 0 0 1px #ed837b;
}
.btn-vermelho:active {
  background: #ed574c;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}
.btn-vermelho i {
  color: #ba3329;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-amarelo {
  background-color: #fce374;
  color: #a68f27;
  background-image: linear-gradient(to bottom, #fce374, #fcdf5b);
  border: 1px solid #c9ae34;
  box-shadow: inset 0 1px 0 #fff6ce, inset 0 -1px 0 #e3c852, inset 0 0 0 1px #fce88d, 0 2px 4px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.btn-amarelo:hover, .btn-amarelo:focus {
  background: #fcdf5b;
  border-color: #967d09;
  box-shadow: inset 0 1px 0 #fff6ce, inset 0 -1px 0 #e3c852, inset 0 0 0 1px #fce88d;
}
.btn-amarelo:active {
  background: #fcdf5b;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}
.btn-amarelo i {
  color: #c9ae34;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn i {
  float: left;
  font-size: 14px;
  line-height: 20px;
  margin: -1px 8px 0 -4px;
  vertical-align: top;
}

Veja o Resultado!

Baixar Código Veja Funcionando