En el siguiente tutorial veremos cómo hacer un Botón de flecha con efecto hover, con estructura sencilla en html, que tenga una animación con css. Y ademas el resultado es rápido y lucidor.
Resulta que buscando otra cosa, como siempre sucede, me topé con un pequeño ejercicio en bypeople.com, cuando lo vi me gustó porque me pareció elegante pero cuando revisé el código preferí hacerle algunos cambios. El ejercicio original está hecho con una etiqueta button la cual no me gusta para hacer ejercicios porque no facilita el proceso de hacer el enlace y ya tiene mucho css que sobreescribir.
Lo primero por establecer es el html:
<a href="#" class="ver-mas">
<div>
<span></span>
</div>
<p>Ver más</p>
</a>
Para este ejemplo decidí establecerle solamente una clase y seleccionar todas las etiquetas internas del css a partir de ella. Esta es la mejor manera para cualquiera que esté iniciando en html para hacer selecciones sencillas.
Una vez hecho lo anterior y entrando en materia, establecemos las estructuras de dimensiones y posición con el css (margin, display, text-decoration, position…):
.ver-mas {
margin: auto;
text-decoration: none;
display: inline-block;
width: 200px;
height: 50px;
text-align: center;
position: relative;
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}
.ver-mas div {
position: absolute;
background-color: #333;
height: 100%;
width: 50px;
border-radius: 25px;
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}
.ver-mas
margin: auto; está en el primer renglón de la clase .ver-mas, es para establecer el posicionamiento a través de flexbox (cosa que explicaré en otro tutorial que también encontrarán en los archivos fuente descargables al final ) . Esto va a hacer que el botón esté totalmente centrado.
display:inline-block; Por defecto la etiqueta <a> tiene un display:inline; que no permite darle dimensiones con css y por eso se lo cambiamos por display:inline-block;
text-decoration: none; quitarle el típico subrayado que tiene el <a> que visualmente no lo necesitamos ahora.
Estableciendo de seguido las dimensiones que queremos darle y la posición centrada del texto. (Eso es muy básico y no ahondaré en el tema).
position: relative; va a permitir que el ancho y el alto establecidos contengan los objetos hijos y que a partir de él mismo establezcamos la posición de los demás objetos.
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); tiene mucho de interesante,establecemos que la transición se genere en todas (all) las propiedades de la clase, el tiempo que se le establece es realmente corto lo hace que se desarrolle velozmente y junto con el cubic-bezier hacen un efecto muy hermoso.
.ver-mas div
Posteriormente la división dentro del ancla, será el circulo que eventualmente se va a estirar para formar el fondo del botón en ::hover pero en un inicio será cuadrado, estableciéndole un alto de 100% (entiéndace el 100% del alto de su padre) y un ancho de 50px que es equivalente al alto del padre. Para poder verlo hay que darle un color de fondo y se escogió #333.
La flecha
Si pudiéramos ver solamente las líneas de las etiquetas sería esta la forma del dibujo:
y ahora nos toca comprender cómo hacer la flecha.
La flecha la haremos con una sola etiqueta, que va a ser el <span></span> dentro de la división:
.ver-mas div span {
display: block;
position: absolute;
top: calc(50% - 1px);
left: 8px;
height: 2px;
width: 0px;
background-color: #fff;
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}
.ver-mas div span::before {
display: block;
content: "";
height: 2px;
width: 10px;
background-color: #fff;
position:absolute;
top: -3px;
left: 13px;
transform: rotate(45deg);
}
.ver-mas div span::after {
display: block;
content: "";
height: 2px;
width: 10px;
background-color: #fff;
position:absolute;
top: 3px;
left: 13px;
transform: rotate(-45deg);
}
.ver-mas div span
En primera instancia le declaré un display: block; porque al igual que la etiqueta ancla tiene un display: inline; que no va a permitir dar dimensiones, entonces el block nos permite jugar más amablemente.
En las dimensiones tenemos que hay un alto de 2px y un ancho de 0, el ancho cambiará en el hover para agrandarlo y hacerlo visible. El position: absolute; nos va a permitir acomodarlo con left y top.
Función calc()
Si bien existen unas cuantas funciones en el CSS, una que me gusta mucho utilizar es calc() (cálculo), esta permite hacer cálculos con aritmética o con ecuaciones, si bien solamente se pueden utilizar los operadores: + suma, - resta, * multiplicación y / división, es más que suficiente para tener horas de diversión para posicionar objetos o hacer juegos con sus tamaños.
Pero en nuestro caso lo que haremos es calcular la posición que necesitamos darle en la vertical a la flecha, top: calc(50% - 1px); lo que le dijimos en esto es un simple pon la caja a la mitad de su padre, pero como el punto de origen de cualquier objeto es la esquina superior izquierda tenemos que restarle la mitad de su altura para que se posicione en el centro, por eso le restamos sólo 1px porque tiene 2px.
Finalmente se le agrega el color de fondo con el background-color: #fff; que nos va a permitir verlo en contraste con el fondo gris obscuro del círculo.
::before & ::after
Los selectores ::before y ::after permiten agregar contenido antes(before) y después(after) de la etiqueta. Por ejemplo:
.ver-mas div span::before {
display: block;
content: "";
height: 2px;
width: 10px;
background-color: #fff;
position:absolute;
top: -3px;
left: 13px;
transform: rotate(45deg);
}
.ver-mas div span::after {
display: block;
content: "";
height: 2px;
width: 10px;
background-color: #fff;
position:absolute;
top: 3px;
left: 13px;
transform: rotate(-45deg);
}
Ahora bien, para que un antes o después puedan existir de manera adecuada tienen que poseer un contenido content: ""; y si nosotros usamos una palabra, esta va a ser puesta antes o después de la caja, pero para este ejercicio no le ponemos nada y le damos un display: block; para poder darle dimensiones, más bien, vamos a utilizar el ::before y ::after para dibujar…
A las dos les vamos a dar un alto de 2px como hicimos con el <span> pero a estas si les daremos ancho de 10px y para que se puedan ver en el fondo gris obscuro les vamos a dar un color de contraste background-color: #fff; a las dos. El left: 13px; en ambos casos va a posicionar el objeto pasando el <span> que tenemos invisible por el momento.
Hasta acá veníamos dándoles las mismas características pero el top de los dos serán diferentes y en la rotación van a tener valores opuestos porque tienen que formar la punta de la flecha por eso al span::before le daremos un transform: rotate(45deg);
(para que haga una diagonal hacia abajo \) y un top: -3px; (para que suba) mientras que al span::after un transform: rotate(-45deg); (para que haga una diagonal hacia arriba /) y un top: 3px; (para que baje) todo esto va a formar un símbolo similar a “>”…
En este punto tenemos esto:
:hover
Antes de empezar con el :hover de todos los objetos que se van a mover hay que arreglar el <p> porque hasta el momento está sin nada y básicamente es darle estilo lo cual sería cambiarle la tipo, el color, la posición y darle transición… Pero de todas esas cosas en lo único a lo que voy a enfocar es a la posición.
.ver-mas:hover div {
width: 100%;
}
.ver-mas:hover div span {
left:25%;
width: 20px;
}
.ver-mas p {
font-family: 'Mukta', sans-serif;
position: absolute;
top: calc(50% - 28px);
left: calc(50% - 13.5px);
z-index: 1;
color: #333;
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}
.ver-mas:hover p {
color: #fff;
}
Para empezar la posición es absoluta como en casi todo lo demás, pero en este caso lo quiero centrar entonces con las “herramientas de desarrollador” voy a averiguar el tamaño exacto del alto mi <p> que resulta ser 56.2px el que redondearé a 56px y lo divido a la mitad obteniendo 28px, esa es la razón por la que el top: calc(50% - 28px); le resto 28, porque quiero que quede centrado verticalmente. Lo mismo sucede con el left: calc(50% - 13.5px); el ancho es 27px y eso hace que se centre mi <p> en los width: 200px; height: 50px; de todo el botón que sería los mismo que decir en la clase .ver-mas.
El movimiento
.ver-mas:hover div: Algo importante de aclarar es que el :hover se establece en la clase .ver-mas para que el ingreso a todo el objeto sea el gatillo de objetos interiores.
Para empezar a animar cambiamos el ancho de .ver-mas:hover div y lo haremos con width: 100%;, tomando en cuenta que tenemos ya las transiciones en todos los demás objetos está listo…
.ver-mas:hover div span: igual sucede con la línea horizontal de la flecha con width: 20px; cambia su tamaño desde 0 a 20px y con un left:25%; se mueve toda la flecha a un cuarto del tamaño del botón. La <p> lo único que hace es cambiar de color.
Para terminar, vuelvo a algo que es muy importante de recalcar: el :hover lo genera siempre la clase .ver-mas y eso lo que genera es que el <a> sea el gatillo de todos los movimientos.
Y al final obtenemos esto:
Estos son los archivos fuente: html, css
Espero les guste y se haya comprendido bien… Sus comentarios siempre son bienvenidos y las preguntas a la mayor velocidad respondidas… Enjoy!
