Primer enlace silenciado CSS

Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientado a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.

En este artículo, aprenderemos sobre Primer CSS Muted Links . Se utiliza para eliminar el subrayado al pasar el mouse.

Primer CSS Clase de enlaces silenciados utilizada:

Enlace silenciado: esta clase se usa para eliminar el subrayado al pasar el mouse por encima.

Sintaxis:

<a class="Link--muted" href="#">
     ...
</a>

Ejemplo 1: En este ejemplo, usaremos Link-muted. Tenga en cuenta el color del enlace antes de desplazarse también.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Primer CSS Links Muted</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@16.3.0/dist/primer.css">   
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>Primer CSS Links Muted</h3>
    <p style="color:red">
        Please notice Link Color also when not hovering
    </p>
  
  
    <h2>To go to GeeksforGeeks 
       <a href="https://www.geeksforgeeks.org" 
       class="Link--muted">Click Me</a> 
    </h2>
</body>
  
</html>

Producción:

Ejemplo 2: En este ejemplo, usaremos una clase sin subrayar con otras clases de enlace. Esto también eliminará el subrayado de los enlaces.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Primer CSS Links Muted</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@16.3.0/dist/primer.css">   
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>Primer CSS Links Muted</h3>
    <p style="color:red">Using 
      <i>no-underline</i> 
      with other Link classes
    </p>
  
  
    <h2>I am 
      <a href="#" class="Link--primary no-underline">
        Link Primary
      </a> 
    </h2>
  
    <h2>I am 
      <a href="#" class="Link--secondary no-underline">
        Link Secondary
      </a> 
    </h2>
</body>
  
</html>

Producción:

Referencias: https://primer.style/css/components/links#muted-link

Publicación traducida automáticamente

Artículo escrito por akshitsaxenaa09 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

HTML

Deja una respuesta Cancelar la respuesta