Cómo personalizar botones con CSS3

  • Save

Un botón, es básicamente un enlace, capaz de realizar acciones simples, como redirigir a una url, o realizar una acción compleja, como ejecutar una función de javascript.

Es tan común ver toda clase de botones en cualquier plantilla o tema, pues son escenciales para la apariencia de este.

Lo que vamos a ver hoy es cómo personalizar botones utilizando CSS3, te enseñaré algunos de las propiedades más importantes que debes tener en cuenta a la hora de crear uno.

Empezaremos con las propiedades básicas, que serían:

.socialbuttons{
background:#ecf000;
color:#ffffff;
}

> background. Color de fondo. Se suele representar a los colores con distintos valores. Nombre de colores en inglés, hexadecimales ó RGB.

> color. Color de texto. De la misma forma que el anterior, utilizaremos colores hexadecimales, puedes encontrar el color que deseas ingresando a este enlace.

El identificador que en este caso le pusimos a nuestro botón es «socialbuttons«, por lo que, el html tendría que ser de forma:

<a class="socialbuttons" href="#">AM A BUTTON<a>

Y el resultado se verá así:

  • Save

Ahora, pasamos a quitarle ese subrayado que por defecto viene en muchas plantillas y temas. Además de añadirle espacios. Uno entre el texto y el botón, y el otro entre el botón y cualquier elemento fuera de este.

.socialbuttons{
background:#ecf000;
color:#ffffff;
text-decoration:none; 
padding:10px;
margin:2px;
{

Donde:
> text-decoration. Decoración del texto. El valor que le asigné (none), borra el subrayado que por defecto tienen los enlaces de algunas plantillas, como les mencioné anteriormente.

> padding. Espacio entre el texto y el botón. Se le da un valor en píxeles.

> margin. Espacio entre el botón y otros elementos. También le daremos un valor en píxeles.

Resultado:

  • Save

Algunas propiedades fucionan dependiendo del valor de otras propiedades. También podemos afirmar que absolutamente todos los elementos tienen propiedades con un valor por defecto. Presta atención a lo siguiente:

.socialbuttons{
  background:#ecf000;
  color:#ffffff;
  text-decoration: none;
  margin:2px;
  padding:10px;
  display:inline-block;
  width:150px;
  }

Donde:

> display. Tipo de elemento. Existen realmente muchos valores, pero los que comunmente se usan son:

  • block. Hace que el elemento se vuelva un bloque, independiente de un párrafo, es decir, no puede mezclarse con un texto en una misma línea.
  • inline. A diferencia del anterior, hace posible mezclar el elemento con un texto en una misma línea pero, este no respeta algunas propiedades, tales como width o height contrario al valor block, que si lo hace.
  • inline-block. Supongo que no hay mucho que explicar, su mismo nombre lo dice. La mezcla de ambos valores.

> width. Ancho. Además de píxeles, se le puede dar como valor porcentajes.

Anteriormente les hablé que todos los elementos tienen propiedades por defecto. El ejemplo más claro son los enlaces, ya que si les quitamos cualquier rastro de css, queda un subrayado, propio del valor «underline» de la propiedad «text-decoration«.
También es el caso de el último resultado, que sin haberle asignado, tiene el valor «inline» de la propiedad «display», lo que causaba su apego al texto de un párrafo. A lo que le dimos el valor de «inline-block«, para hacer posible que el elemento fluya en la misma línea de un texto, y el valor de «block» para hacerlo respete propiedades como width.

El resultado sería:

  • Save

Con todo lo anterior, ya completamos las propiedades esenciales para que nuestro botón tenga una apariencia aceptable. Pero aun falta más…

.socialbuttons {
background:#ecf000;
color:#ffffff;
text-decoration: none;
margin:2px;
padding:10px;
display:inline-block;
width:200px; 
font-family:arial; 
font-weight:300;
font-size:25px;
border:2px solid #c0c300 ;
border-radius: 10px;
box-shadow: 0 5px 0 0 #c0c300;
}

En este último agregamos: 

> font-family. Fuente. Puedes ponerle una fuente de las que blogger tiene por defecto, o descargar una de Google Fonts.

> font-weight. Grosor del texto. Mientras más alto es el valor, más grueso será el texto.

> font-size. Tamaño del texto. Se presenta en píxeles.

> border. Borde del botón. Le agregaremos un valor en píxeles, al igual que un color.

> border-radius. Esquinas redondeadas. El valor que se le asigne, definirá cuán redondeadas serán las esquinas.

> border-shadow. Efecto de sombra. Se debe agregarle varios valores en píxeles. Cada valor, realiza una función: distancia, tamaño y densidad, seguido del color.

Con todo esto, el resultado el resultado se verá de esta forma:

  • Save

Ahora, le pondremos una apariencia distinta al pasar el cursor sobre él, además de un efecto de transición para hacerlo más atractivo. Para eso, en una linea distinta, usamos su identificador «socialbuttons» seguido de :hover.

.socialbuttons:hover {
  transition: 0.3s;
  background:#fff;
  color: #ecf000;
  border:2px solid #ecf000;
  }
  •  transition. Efecto de transición. El valor que se le asigna es de segundos, la cantidad de segundos que tardará en cambiar. Es de suma importancia que esta misma propiedad sea agregado al css base, para que el efecto al retirar el cursor, sea el mismo que al pasarlo.

De modo que al pasar el cursor, se verá de la siguiente manera:

  • Save

Bacán, ¿no?. Y si le agregas un efecto al hacer click sobre él, se vería aun mejor. De esta forma:

.socialbuttons:active {
  margin-top:5px;
  box-shadow: 0 0 0 0;
}

Agregando un margen superior y ocultando las sombras en su totalidad, dará un efecto como si se estuviera presionando un botón real al hacer clic sobre él.

See the Pen
active1
by Jonathan (@jonastonesr)
on CodePen.

Juntando todo, se vería así:

.socialbuttons{
  background:#ecf000;
  color:#ffffff;
  text-decoration: none;
  margin:2px;
  padding:10px;
  display:inline-block;
  width:200px; 
  font-family:arial; 
  font-weight:300;
  font-size:25px;
  border:2px solid #c0c300 ;
  border-radius: 10px;
  box-shadow: 0 5px 0 0 #c0c300;
}
.socialbuttons:hover {
transition: 0.3s;
background:#fff;
color: #ecf000;
border:2px solid #ecf000 ;
}

.socialbuttons:active {
margin-top:5px;
box-shadow: 0 0 0 0;
}

 

El CSS es un lenguaje bastante extenso, juega con los valores, descubre nuevas propiedades, crea nuevos estilos, veráss que puedes lograr resultados muchísimos más complejos.

Aquí te dejo otros ejemplos utilizando casi las mismas propiedades.

EJEMPLO #1

  • Save

El CSS:

.ej1{
  font-family:arial;
  background:#fff;
  color: #ff2f2f;
  width:200px;
  text-decoration: none;
  padding:10px;
  display:inline-block;
  font-weight:300;
  font-size:25px;
  border-radius:0;
  border:4px double #bf0000 ;
  transition:0.3s;
}
.ej1:hover {
  transition: 0.3s;
  background:#ff2f2f;
  color:#ffffff;
}
.ej1:active {
  border-radius: 20px;
  box-shadow: 0 0 10px 0 #ff2f2f;
}

El HTML

<a class="ej1" href="#" >AM A EXAMPLE</a>

EJEMPLO #2

  • Save

El CSS

.ej2{
  font-family:arial;
  background:#005dff;
  color: #fff;
  width:200px;
  text-decoration: none;
  padding:5px;
  display:inline-block;
  font-size:25px;
  border-radius:0 60px 60px 0;
  border:4px solid #013fad ;
}

.ej2:hover {
opacity:0.7;
color:#ffffff;
}

El HTML

<a class="ej2" href="#" >AM A EXAMPLE</a>

EJEMPLO #3

  • Save

El CSS

.ej3{
  font-family:arial;
  background:#0dd703;
  color: #3b3b3b;
  width:200px;
  text-decoration: none;
  padding:15px;
  display:inline-block;
  font-size:25px;
  box-shadow: 7px 7px 0 0 #079b00;
  border:2px solid #079b00;
}

El HTML

<a class="ej3" href="#" >AM A EXAMPLE</a>

Nos leemos.

Deja un comentario

Share via
Copy link