Los enlaces son una de las partes más importantes de cualquier componente que se utilice en la creación de sitios web. Casi todos los componentes tenían algún tipo de enlace. Un ejemplo común es un menú/barra de navegación. Todo lo que vemos es un botón como el de inicio, acerca de, etc., pero debajo del capó todos son enlaces. A veces llega una situación en la que no desea envolver el enlace dentro de un botón. Entonces, en ese caso, el enlace del banner puede ser realmente útil. Tiene una apariencia y una animación realmente simplistas que facilitan el diseño y la implementación, y también se ve muy bien porque es un diseño simple y limpio.
Enfoque: el enfoque es dar un borde alrededor del enlace y luego alargar todo el enlace al pasar el mouse. Ahora, hay muchas formas de implementar lo mismo, pero manipularemos el espaciado entre letras para lograr nuestro objetivo.
Código HTML:En esta sección, hemos creado un enlace simple que no nos lleva a ninguna parte. Debe agregar su enlace deseado en el atributo href de la etiqueta.
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Animated Link</title> </head> <body> <a href="#">GeeksforGeeks</a> </body> </html>
Código CSS: Para CSS, siga los pasos que se indican a continuación.
- Paso 1: aplique algunos enlaces de estilo básicos, tamaño de fuente, familia de fuentes, etc.
- Paso 2: aplique el borde superior e inferior de cualquier color y ancho.
- Paso 3: use el selector flotante y aumente el espacio entre letras.
Nota: El espacio entre letras debe aumentarse al menos 2 o 3 veces el valor original del espacio entre letras.
CSS
a{
position: absolute;
top: 50%;
left:50%;
padding: 15px 0;
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: #262626;
border-top: 2px solid #262626;
border-bottom: 2px solid #262626;
letter-spacing: 2px;
transition: .5s;
}
a:hover{
letter-spacing: 10px;
}
Código completo: es la combinación de las dos secciones de código anteriores.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Animated Link</title>
<style>
a{
position: absolute;
top: 50%;
left:50%;
padding: 15px 0;
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: #262626;
border-top: 2px solid #262626;
border-bottom: 2px solid #262626;
letter-spacing: 2px;
transition: .5s;
}
a:hover{
letter-spacing: 10px;
}
</style>
</head>
<body>
<a href="#">GeeksforGeeks</a>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sirohimukul1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA