Tachyon es un conjunto de herramientas que se utiliza para crear un sitio web receptivo. En este artículo, aprenderemos cómo insertar un enlace en el que se puede hacer clic con el kit de herramientas Tachyons. Los enlaces se utilizan para especificar la relación entre el documento actual y un recurso externo.
Clases de enlaces de elementos de taquiones:
- link underline blue hover-orange: esta clase se utiliza para proporcionar un enlace azul subrayado que se vuelve naranja al pasar el mouse.
- link underline-hover red: esta clase se usa para agregar un subrayado al pasar el mouse y enfocar.
- dim: esta clase se usa para atenuar un enlace al pasar el mouse.
Agregue color de fondo en la clase de desplazamiento:
- link black hover-bg-light-blue: esta clase se usa para agregar cualquier color de fondo del módulo skins-pseudo.
Animar colores de fondo al pasar el mouse:
- link black bg-animate hover-bg-light-blue: esta clase se usa para agregar cualquier color de fondo del módulo skins-pseudo.
Clases utilizadas para proporcionar enlaces de colores:
- link dim black: esta clase se utiliza para proporcionar un efecto de «oscuro negro» al enlace.
- enlace tenue casi negro: esta clase se utiliza para proporcionar un efecto de «tenue casi negro» al enlace.
- link dim dark-gray: Esta clase se utiliza para proporcionar un efecto de «dim dark-grey» al enlace.
- link dim mid-gray: esta clase se utiliza para proporcionar un efecto de «dim mid-gray» al enlace.
- link dim gray: esta clase se utiliza para proporcionar un efecto de «tenue gray» al enlace.
- link dim black-90: esta clase se utiliza para proporcionar un efecto de «dim black-90» al enlace.
- link dim black-80: esta clase se utiliza para proporcionar un efecto de «dim black-80» al enlace.
- link dim black-70: esta clase se utiliza para proporcionar un efecto de «dim black-70» al enlace.
- link dim black-60: esta clase se utiliza para proporcionar un efecto de «dim black-60» al enlace.
- link dim black-50: esta clase se utiliza para proporcionar un efecto de «dim black-50» al enlace.
- enlace tenue azul marino: esta clase se utiliza para proporcionar un efecto de «tenue azul marino» al enlace .
- link dim dark-blue: esta clase se utiliza para proporcionar un efecto de «tenue dark-blue» al enlace.
- link dim blue: esta clase se utiliza para proporcionar un efecto de «azul tenue» al enlace.
- link dim dark-red: esta clase se utiliza para proporcionar un efecto de «dim dark-red» al enlace.
Sintaxis:
<a href="#" class="link dim blue">...</a>
Ejemplo 1: en el siguiente código, hemos utilizado la clase «enlace subrayado azul flotante-naranja».
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://unpkg.com/tachyons/css/tachyons.min.css">
<style>
body {
background-color: lightgrey;
}
div {
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green;text-align:center;">
GeeksforGeeks
</h2>
<h3 style="text-align:center;">
A computer science portal for geeks</h3>
<div>
<a href="#" class="link underline blue hover-orange">
link text</a>
</div>
</body>
</html>
Producción:
Ejemplo 2: En el siguiente ejemplo, insertaremos varios enlaces de diferentes colores.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://unpkg.com/tachyons/css/tachyons.min.css">
<style>
body {
background-color: lightgrey;
}
div {
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green; text-align:center;">
GeeksforGeeks
</h2>
<h3 style="text-align:center;">
A computer science portal for geeks
</h3>
<div>
<a href="#" class="link dim black">black link</a><br>
<a href="#" class="link dim dark-gray">dark-gray link</a><br>
<a href="#" class="link dim mid-gray">mid-gray link</a><br>
<a href="#" class="link dim gray">gray link</a><br>
<a href="#" class="link dim black-90">black-90 link</a><br>
<a href="#" class="link dim black-80">black-80 link</a><br>
<a href="#" class="link dim black-70">black-70 link</a><br>
<a href="#" class="link dim black-60">black-60 link</a><br>
<a href="#" class="link dim black-50">black-50 link</a><br>
<a href="#" class="link dim navy">navy link</a><br>
<a href="#" class="link dim dark-blue">dark-blue link</a><br>
<a href="#" class="link dim blue">blue link</a><br>
<a href="#" class="link dim dark-red">dark-red link</a><br>
</div>
</body>
</html>
Producción:
Referencia: https://tachyons.io/docs/elements/links/