Botones que cambian de color e incorporan efectos al pasar el mouse por encima.[Código Hover para CSS]

Botones que cambian de color e incorporan efectos al pasar el mouse por encima.

#separar {
  padding: 3%;
  display: inline-block;
}

.titulo {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  text-decoration: underline;
  color: #333333;
}

.boton {
  color: #fff !important;
  font-size: 20px;
  font-weight: 500;
  padding: 0.5em 1.2em;
  background: #318aac;
  border: 2px solid;
  border-color: #318aac;
  position: relative;
}
.boton:before {
  content:"";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 0px;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  transition: all 1s ease;
}
.boton:hover:before {
width: 100%;
}

.boton2 {
  color: #fff !important;
  font-size: 20px;
  font-weight: 500;
  padding: 0.5em 1.2em;
  background: #318aac;
  border: 2px solid;
  border-color: #318aac;
  position: relative;
}
.boton2:before {
  content:"";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 0px;
  background: rgba(255, 255, 255, 0.1);
  transition: all 1s ease;
} 
.boton2:hover:before {
  height: 100%;
}

.boton3 {
  color: #318aac !important;
  font-size: 20px;
  font-weight: 500;
  padding: 0.5em 1.2em;
  background: rgba(0,0,0,0);
  border: 2px solid;
  border-color: #318aac;
  transition: all 1s ease;
  position: relative;
}
.boton3:hover {
  background: #318aac;
  color: #fff !important;
}

.boton4 {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 20px;
  font-weight: 500;
  padding: 0.5em 1.2em;
  background: #318aac;
  border: 2px solid;
  border-color: #318aac;
  position: relative;
}
.boton4:hover {
  color: rgba(255, 255, 255, 1) !important;
  box-shadow: 0 4px 16px rgba(49, 138, 172, 1);
  transition: all 0.2s ease;
}

.boton5 {
  color: #fff !important;
  font-size: 20px;
  font-weight: 500;
  padding: 0.5em 1.2em;
  background: #318aac;
  position: relative;
  border: 2px solid #318aac;
  outline: 1px solid;
  outline-color: rgba(49, 138, 172, 0.4);
  transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
}
.boton5:hover {
  box-shadow: inset 0 0 20px rgba(49, 138, 172, 0.5), 0 0 20px rgba(49, 138, 172, 0.4);
  outline-color: rgba(49, 138, 172, 0);
  outline-offset: 80px;
  text-shadow: 1px 1px 6px #fff;
  border-shadow: 
}

</style>
 
<section class=botones>
  <div id="separar">
    <h3 class=titulo>
 Overlay Horizontal:<h3>
<br/>
    <span class="boton">Probar Hover</span>
  </div>
<div id="separar">
    <h3 class=titulo>
 Overlay Vertical:<h3>
<br/>
    <span class="boton2">Probar Hover</span>
  </div>
<div id="separar">
    <h3 class=titulo>
 Relleno de Color:<h3>
<br/>
    <span class="boton3">Probar Hover</span>
  </div>
<div id="separar">
    <h3 class=titulo>
 Efecto Resplandor:<h3>
<br/>
    <span class="boton4">Probar Hover</span>
  </div>
<div id="separar">
    <h3 class=titulo>
 Efecto Resplandor 2:<h3>
<br/>
    <span class="boton5">Probar Hover</span>
  </div>
</section>

Botones que cambian de color e incorporan efectos al pasar el mouse por encima.[Código Hover para CSS]

Publicar un comentario

0 Comentarios

Etiquetas