Botones con un efecto hover elegante

Son muy sencillos de implementar, pues sólo contienen HTML + CSS. Como el código cliente no es ningún secreto, para el que le guste se lo dejo fácil y lo comparto.

See the Pen Botones con un efecto hover elegante by Carlos Tejada (@TaloBV) on CodePen.

<!DOCTYPE html>

<style>

.boton-linea-ext a,
.boton-linea-ext2 a {
  text-decoration: none;
  color: #333;
}

.boton-linea-ext:hover a,
.boton-white-ext:hover a {
  color: rgba(135,238,190,1);
  background: -moz-linear-gradient(left, rgba(135,238,190,1) 0%, rgba(98,200,228,1) 56%, rgba(40,157,189,1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(135,238,190,1)), color-stop(56%, rgba(98,200,228,1)), color-stop(100%, rgba(40,157,189,1)));
  background: -webkit-linear-gradient(left, rgba(135,238,190,1) 0%, rgba(98,200,228,1) 56%, rgba(40,157,189,1) 100%);
  background: -o-linear-gradient(left, rgba(135,238,190,1) 0%, rgba(98,200,228,1) 56%, rgba(40,157,189,1) 100%);
  background: -ms-linear-gradient(left, rgba(135,238,190,1) 0%, rgba(98,200,228,1) 56%, rgba(40,157,189,1) 100%);
  background: linear-gradient(to right, rgba(135,238,190,1) 0%, rgba(98,200,228,1) 56%, rgba(40,157,189,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87eebe', endColorstr='#289dbd', GradientType=1 );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.boton-linea-ext,
.boton-linea-ext2 {
    padding: 4px 28px;
    border: none;
    background: transparent;
    color: #333;
    width: auto;
    float: left;
    position: relative;
    line-height: 45px;
    cursor: pointer;
    margin: 1em 2em 1em 2em;
}

.boton-linea-ext .linea1,
.boton-linea-ext .linea2,
.boton-linea-ext2 .linea1_1,
.boton-linea-ext2 .linea2_2,
.boton-white-ext .linea1,
.boton-white-ext .linea2,
.boton-white-ext2 .linea1_1,
.boton-white-ext2 .linea2_2 {
  top: 0;
  right: 0;
}

.boton-linea-ext .linea3,
.boton-linea-ext .linea4,
.boton-linea-ext2 .linea3_2,
.boton-linea-ext2 .linea4_2,
.boton-white-ext .linea3,
.boton-white-ext .linea4,
.boton-white-ext2 .linea3_2,
.boton-white-ext2 .linea4_2 {
  bottom: 0;
  left: 0;
}

.boton-linea-ext .linea1,
.boton-linea-ext .linea3,
.boton-linea-ext2 .linea1_2,
.boton-linea-ext2 .linea3_2,
.boton-white-ext .linea1,
.boton-white-ext .linea3,
.boton-white-ext2 .linea1_2,
.boton-white-ext2 .linea3_2 {
  height: 3px;
  width: 18px;
}

.boton-linea-ext .linea2,
.boton-linea-ext .linea4,
.boton-linea-ext2 .linea2_2,
.boton-linea-ext2 .linea4_2,
.boton-white-ext .linea2,
.boton-white-ext .linea4,
.boton-white-ext2 .linea2_2,
.boton-white-ext2 .linea4_2{
  height: 18px;
  width: 3px;
}

.boton-linea-ext span,
.boton-linea-ext2 span {
  position: absolute;
  background-color: #333;
  display: block;
  transition: all 300ms; 
}

.boton-linea-ext:hover,
.boton-linea-ext:active,
.boton-linea-ext2:hover,
.boton-linea-ext2:active {
  backgroundo-color: transparent;
  color: #333;
}

.boton-linea-ext:hover .linea1,
.boton-linea-ext:hover .linea3,
.boton-linea-ext:active .linea1,
.boton-linea-ext:active .linea3,
.boton-white-ext:hover .linea1,
.boton-white-ext:hover .linea3,
.boton-white-ext:active .linea1,
.boton-white-ext:active .linea3 {
  width: 100%;
  background: rgba(135,238,190,1);
background: -moz-linear-gradient(left, rgba(135,238,190,1) 0%, rgba(98,200,228,1) 56%, rgba(40,157,189,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(135,238,190,1)), color-stop(56%, rgba(98,200,228,1)), color-stop(100%, rgba(40,157,189,1)));
background: -webkit-linear-gradient(left, rgba(135,238,190,1) 0%, rgba(98,200,228,1) 56%, rgba(40,157,189,1) 100%);
background: -o-linear-gradient(left, rgba(135,238,190,1) 0%, rgba(98,200,228,1) 56%, rgba(40,157,189,1) 100%);
background: -ms-linear-gradient(left, rgba(135,238,190,1) 0%, rgba(98,200,228,1) 56%, rgba(40,157,189,1) 100%);
background: linear-gradient(to right, rgba(135,238,190,1) 0%, rgba(98,200,228,1) 56%, rgba(40,157,189,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87eebe', endColorstr='#289dbd', GradientType=1 );
}

.boton-linea-ext:hover .linea2,
.boton-linea-ext:active .linea2,
.boton-white-ext:hover .linea2,
.boton-white-ext:active .linea2{
  height:100%;
  background: #289dbd;
}

.boton-linea-ext:hover .linea4,
.boton-linea-ext:active .linea4,
.boton-white-ext:hover .linea4,
.boton-white-ext:active .linea4{
  height:100%;
  background: #87eebe;
}

</style>

<div class="boton-linea-ext">
    <span class="linea1"></span>
    <span class="linea2"></span>
    <span class="linea3"></span>
    <span class="linea4"></span>
    <a href="#">Talor</a>
  </div>

Botones con un efecto hover elegante

Publicar un comentario

0 Comentarios

Etiquetas