Subrayado Animado - Oxygenados La comunidad
Oxygenados La comunidad hispana
Recoda White Full Logo
Patrocinador
Menu
post oxygen builder
img-4
CSS Entrada
Subrayado Animado
Listado Tips CSS

Un pequeño tip para lograr un efecto de subrayado animado con css y Oxygen al pasar el cursor del mouse por encima de un botón o por encima de cualquier elemento. 

Ejemplos

Pasa el puntero del ratón por encima de los diferentes elementos.

Texto Simple
Desde la Izquierda
Desde el centro
Desde la Derecha
Botones
Desde la Izquierda
Desde el centro
Desde la Derecha

En realidad, todo este efecto se reduce a añadir una pseudo clase «combinada», que se active cuando se produzca un hover sobre el elemento, es decir, rizando el rizo, una pseudo clase que activa otra pseudo clase; en este caso será el hover que activará el before. 

Paso 1 - Se crea un elemento.

Se crea el elemento, el que sea o que se necesite, no es necesario que sea un botón, cualquier elemento puede servir, ya que todos los elementos de una página reciben el evento hover. Lo único que hay que tener en cuenta es que hay darle una posición relativa. (LayoutPositionRelative)

Paso 2  - Definir :before.

Nos vamos a la pseudo clase :before  

Subrayado Animado

Se establecen las propiedades de la siguiente manera:

  • Content: No ponemos nada.
  • Width: 100%, Height: según te interese 1px, 2px.... 
  • Background Color: El que desees.
  • Efects --> Transition: 0.3s, Transform: Scale X: 0
  • Layout --> Position: Absolute, Lef: 0 , Bottom: 0px
Paso 3  - Definir la segunda pseudo clase.

Con el elemento seleccionado añadimos un nuevo estado.(Ver Imágenes)

img-8

Se le da el nombre   :hover::before

img-9

En Efects -> Transform -> Scale -> >Scale X : 1

img-10

Con todo esto lo que tenemos es el efecto del subrayado que se expande desde el centro hacia los extremos en las dos direcciones, para conseguir el desplazamiento desde un extremo hacia el otro extremo, el cuadro de CSS del elemento, con el pseudoelemento :before seleccionado, añadimos:
Para el movimiento desde izquierdatransform-origin: top left;
Para el movimiento desde la derecha: transform-origin: top right;

Aquí abajo el ejemplo del desplazamiento desde la izquierda.

img-11

Como siempre esperamos tus comentarios y por supuesto si tienes alguna duda o necesitas ayuda puedes contactar por nuestro grupo de Telegram o dejando un comentario.

Nos vemos en la próxima. 👌

0 0 votos
Puntuación
Suscribir
Notificar de
guest
2 Comentarios
Viejos
Nuevos Más votados
Comentarios en línea
Ver todos los comentarios
Doris
Doris
1 año hace

Gracias por la contribucion. Es interesante notar que en el pseudoelemento tenemos que poner width: 100%

El diseño web responsivo está muerto

El diseño fluido se refiere a un enfoque de diseño web en el que las dimensiones de los elementos son flexibles, escalando proporcionalmente al tamaño de la pantalla del usuario.
En lugar de medidas fijas de píxeles, utiliza unidades relativas como porcentajes o ems para garantizar que el diseño se ajuste sin problemas, independientemente del dispositivo.

Leer más
Mas Iconos con Vainilla Font

Mostramos como añadir más iconos sin la necesidad de añadir más sets de SVGs, usando la fuente denominada "vanilla" y con la particularidad de que vamos a poder usarlos de manera global en todo nuestro sitio o solo en aquellas páginas o entradas en las que sea necesario.
La diferencia entre usarlos de manera global en todo el sitio o solo en aquellas páginas está en que en la primera manera cargaremos los kb de la fuente, en este caso 79Kb de manera innecesaria en aquellas páginas o entradas donde no requiramos el uso de estos iconos.

Leer más
Subrayado Animado

Un pequeño tip para lograr un efecto de subrayado animado con css y Oxygen

Leer más