You are here
Botones con efectos CSS 3 Sin categoría 

Botones con efectos CSS 3

 

Creamos una serie de botones con colores y efectos al pasar el ratón sobre ellos, únicamente con CSS 3.

En este artículo vamos a ver como crear botones con CSS3. Estos botones van a tener diferentes colores y tamaños, y todos ellos tendrán un pequeño efecto al pasar el ratón por encima.

Lo primero que vamos a ver seré el código html necesario para mostrar nuestro botón. 
Partimos de que cada botón tendrá una clase que vendrá dada por el tamaño que queremos mostrar y el color del botón.

Si vemos el código nos quedará más claro:

<a class=”button pequeno azul” href=”#”><span>Botón</span></a>

Una vez que tenemos esto en nuestro archivo html, tenemos que irnos al archivo css donde vamos a crear los estilos necesarios para mostrar nuestros botones.

Empezamos creando el estilo boton:

.button, .button span {
   display: inline-block;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
}
.button {
   white-space: nowrap;
   line-height:1em;
   position:relative;
   outline: none;
   overflow: visible; 
   cursor: pointer;
   border: 1px solid #999;
border: rgba(0, 0, 0, .2) 1px solid;
   border-bottom:rgba(0, 0, 0, .4) 1px solid;
   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
   -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
   box-shadow: 0 1px 2px rgba(0,0,0,.2);
   background: -moz-linear-gradient(
      center top,
      rgba(255, 255, 255, .1) 0%,
      rgba(0, 0, 0, .1) 100%
   );
   background: -webkit-gradient(
      linear,
      center bottom,
      center top,
      from(rgba(0, 0, 0, .1)),
      to(rgba(255, 255, 255, .1))
   );
   -moz-user-select: none;
   -webkit-user-select:none;
   -khtml-user-select: none;
   user-select: none;
   margin-bottom:10px;
}
.button.full, .button.full span {
   display: block;
}
.button:hover, .button.hover {
   background: -moz-linear-gradient(
      center top,
      rgba(255, 255, 255, .2) 0%,
      rgba(255, 255, 255, .1) 100%
   );
   background: -webkit-gradient(
      linear,
      center bottom,
      center top,
      from(rgba(255, 255, 255, .1)),
      to(rgba(255, 255, 255, .2))
   );
}
.button:active, .button.active {
   top:1px;
}
.button span {
   position: relative;
   color:#fff;
   text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);
   border-top: rgba(255, 255, 255, .2) 1px solid;
   padding:0.6em 1.3em;
   line-height:1em;
   text-align:center;
   white-space: nowrap;
}

Una vez que tenemos el estilo del botón vamos a crear diferentes estilos para los tamaños:

.button.pequeno span {
   font-size:12px;
}
.button.mediano span {
   font-size:16px;
}
.button.grande span {
   font-size:22px;
}

Con esto ya sólo nos queda los estilos para los colores, aquí podéis crear tantos estilos como colores queráis poder implementar en vuestros botones. 
Un ejemplo de estilos para 3 colores por ejemplo sería el siguiente:

.button.rojo {
   background-color: #e62727;
}
.button.naranja {
   background-color: #ff5c00;
}

.button.azul {
   background-color: #00ADEE;
}

Y terminamos nuestro CSS quitando el subrayado a nuestros enlaces para que no aparezcan los botones con ello.

A{
   color: #0000cc;
   text-decoration: none;
}

Para finalizar os dejo el código completo del archivo .html y del .css

Boton.html 

<!DOCTYPE html> 
<html> 

<head> 
   
   <title>Botones CSS 3</title> 
<link rel=”stylesheet” href=”botones-css3.css” type=”text/css”> 
   
   
      

</head> 

<body> 
   <a class=”button pequeno rojo” href=”#”><span>Botón</span></a>
<br>
<a class=”button mediano naranja” href=”#”><span>Botón</span></a>
<br>
<a class=”button grande azul” href=”#”><span>Botón</span></a>

</body> 
</html>
   <a class=”boton pequeno gris” href=”#”><span>Botón</span></a>

</body> 
</html>

boton-css3.css

.button, .button span {
   display: inline-block;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
}
.button {
   white-space: nowrap;
   line-height:1em;
   position:relative;
   outline: none;
   overflow: visible; 
   cursor: pointer;
   border: 1px solid #999;
border: rgba(0, 0, 0, .2) 1px solid;
   border-bottom:rgba(0, 0, 0, .4) 1px solid;
   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
   -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
   box-shadow: 0 1px 2px rgba(0,0,0,.2);
   background: -moz-linear-gradient(
      center top,
      rgba(255, 255, 255, .1) 0%,
      rgba(0, 0, 0, .1) 100%
   );
   background: -webkit-gradient(
      linear,
      center bottom,
      center top,
      from(rgba(0, 0, 0, .1)),
      to(rgba(255, 255, 255, .1))
   );
   -moz-user-select: none;
   -webkit-user-select:none;
   -khtml-user-select: none;
   user-select: none;
   margin-bottom:10px;
}
.button.full, .button.full span {
   display: block;
}
.button:hover, .button.hover {
   background: -moz-linear-gradient(
      center top,
      rgba(255, 255, 255, .2) 0%,
      rgba(255, 255, 255, .1) 100%
   );
   background: -webkit-gradient(
      linear,
      center bottom,
      center top,
      from(rgba(255, 255, 255, .1)),
      to(rgba(255, 255, 255, .2))
   );
}
.button:active, .button.active {
   top:1px;
}
.button span {
   position: relative;
   color:#fff;
   text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);
   border-top: rgba(255, 255, 255, .2) 1px solid;
   padding:0.6em 1.3em;
   line-height:1em;
   text-align:center;
   white-space: nowrap;
}

.button.pequeno span {
   font-size:12px;
}
.button.mediano span {
   font-size:16px;
}
.button.grande span {
   font-size:22px;
}

.button.rojo {
   background-color: #e62727;
}
.button.naranja {
   background-color: #ff5c00;
}

.button.azul {
   background-color: #00ADEE;
}

A{
   color: #0000cc;
   text-decoration: none;
}

 


 

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Related posts

Comments

Leave a Comment


*