Tutorial: Botones en CSS "trendy-buttons"

miércoles, agosto 28


Cotilleando por internet me encontré con una página Italiana llamada minimamente que mostraba unos botones bastante curiosos y de apariencia muy trabajados, lo mejor de todo, es que son muy sencillos de modificar, simplemente es echarle un poco de valor en caso de ser nuevos en el mundo del CSS

Lo que podemos hacer con el botón que veréis un poco más abajo es lo siguiente:

  • Las imágenes o palabras que aparecen en el fondo. 
  • El nombre del botón. 
  • La imagen que aparece el nombre del botón. 
  • El color del botón 
¿que tenéis ya ganas de saber como hacer todo esto? pues venga, os lo explico.


Vamos a coger este botón



y comenzaremos a modificarlo, para ello primero atenderemos al código CSS que es el siguiente

<Style>

/* general style (En caso de querer añadir varios botones con apariencia diferente, este estilo es general para todos, así evitamos escribir código de más) */

.radius {
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-webkit-background-clip: padding-box;
}

.gradient {
background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.1)));
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 100%);
background-image: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 100%);
background-image: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 100%);
background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 100%);
}

.shadow {
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.trendy_btn {
display: block;
margin: 20px;
padding: 18px;
text-align: center;
-o-transition: .4s;
-ms-transition: .4s;
-moz-transition: .4s;
-webkit-transition: .4s;
transition: .4s;
}

span.txt { 
display: block; 
position: relative; 
z-index: 2; 
}

/* Estilo especifico del botón corazones */

a.corazones { 
position: relative; 
overflow: hidden; 
width: 260px; 
font-size: 1.4em; 
font-weight: 700; 
background-color: #b52122; /*Color del fondo del botón*/
color: #fff; /*color del nombre del botón*/
text-shadow: 0 1px 0 rgba(0,0,0,0.7); }

a.corazones:hover { 
background-color: #d33031; /*Color del fondo al pasar por encima el ratón*/
}

a.corazones:active { 
top: 1px;
-o-transition: none;
-ms-transition: none;
-moz-transition: none;
-webkit-transition: none;
transition: none;

}

a.corazones:before { 
display: inline-block; 
position: absolute; 
z-index: 1; 
width: 320px; 
top: -50%; 
left: -5%; 
font-size: 1.375em; 
font-family: 'fontello'; 
content: '\2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665'; /* Repetición de palabras o imagenes que se ven en el fondo*/
color: #8c1f20; /* color del texto o imagen del fondo*/

text-shadow: none;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);

}

a.corazones span.txt:before { 
display: inline-block; 
margin: 0 10px 0 0; 
font-family: 'fontello'; 
content: '\2665'; /* imagen que aparece al lado del nombre del botón*/
color: #fff; } /* Color de la imagen de al lado del botón*/

</Style>




Tenemos 3 tipos de modificaciones que están resaltadas en azul, rosa o dorado .

En azul está el nombre del código del botón por decirlo de alguna forma y sin causar confusión. Imaginaros que queremos crear 3 botones diferentes, uno con corazones, otro con rombos y el tercero con nuestro nombre, cada uno tendrá un color diferente y un fondo diferente, pues entonces, para cada botón habrá que crear un estilo diferente y a cada estilo hay que ponerle un nombre. En este ejemplo yo le llamé corazones ya que si tuviera 20 botones diferentes, esa palabra me ayudaría a reconocer fácilmente el código de mi botón de corazones. 
En color rosa tenemos los colores. Los tres primeros colores corresponden con lo más básico del botón. Lo primero es el color del fondo del botón, el segundo, es el color del titulo del botón (en este ejemplo, es el color de la palabra amor) y el tercer color corresponde con el que aparece cuando pasamos por encima el ratón.
Los 2 últimos colores tienen que ver con las imágenes de corazones que aparecen en este ejemplo.
El primer color es el de los corazones del fondo, el segundo es el del corazón que está a la Izquierda de la palabra Amor
En color dorado tenemos los corazones del fondo y un poco más abajo el corazón que está a la Izquierda de la palabra amor. Sustituir esto es de lo más fácil, o bien cogiendo el código para otra imagen o bien poniendo otra palabra o letra.
Si optáis por poner otra imagen, recordad que tenéis que poner esta barrita \ y el código a continuación y luego repetir varias veces la barrita más el código tal como está puesto ahora. Ese código podéis verlo o bien en el "mapa de caracteres" de vuestro pc (preguntar a google sobre esto) o bien en google. Si optáis por ver el mapa de caracteres, en la ventanita de este progra (ya os digo, viene de serie en windows),  al pinchar en una letra o simbolo, en la parte inferior de todo veréis que saldrá algo así como U+a8b3: loquesea (por ejemplo) , pues eso que sale entre el U+ y  : es el código que necesitais para la sustitución.

Creo que de esta parte ya no falta nada, ahora vamos con el código HTML.



<div class="container">

<a class="trendy_btn corazones radius shadow" href="url" title="Love"><span class="txt">Amor</span></a>

</div>

En Verde tenemos url, aquí ponemos la dirección URL al que nos llevará el botón.
En Amarillo tenemos la palabra que aparece si apoyamos nuestro ratón en el botón, si no lo queremos entonces solo es borrar title="Love" y listo.
En Rosa tenemos el título de botón, si en vez de amor queremos que se llame Chocolate, pues cambiamos amor por chocolate y listo.
En Azul está el nombre del código del botón con referencia al CSS, que si os fijais, tanto esta palabra en azul, está coincidiendo con lo remarcado en azul en el código de arriba.

Supongamos que queréis 3 botones iguales:
Para esto copiar
<a class="trendy_btn corazones radius shadow" href="url" title="Love"><span class="txt">Amor</span></a>
y pegarlo tantas veces como nuevos botones queráis, luego modificar "Love" y "Amor" por lo que queráis que aparezca en el botón.

Supongamos que queréis 3 botones distintos:

1º En la parte del código de CSS copiar a partir de /* Estilo especifico del botón corazones */ hasta </Style> (</Style> no incluirlo en el copiado) , en todas las partes que dice "Corazones" y que está marcado en azul en el código CSS que os dejé arriba, sustituirlo por una palabra que pegue mas con la nueva apariencia.
A continuación tenéis que cambiar las opciones de este nuevo estilo según queráis vuestro botón.
2º En la parte del código HTML copiar la linea que dice
<a class="trendy_btn corazones radius shadow" href="url" title="Love"><span class="txt">Amor</span></a>
y en ella modificar la palabra "corazones" por la misma que pusisteis en el CSS, después sustituir Love y Amor por las palabras que deseeis.





0 comentarios:

Publicar un comentario