Botones activos de CSS puro

Los botones son uno de los elementos de interfaz de usuario más comunes. Se utiliza para que los usuarios interactúen con un sistema y tomen medidas al hacer selecciones. Los botones activos de CSS puro se utilizan para crear un botón activo que funciona cuando el usuario hace clic en el botón. El botón se puede crear usando las etiquetas <a> y <button>

Clase de botones activos de CSS puro:

  • pure-button-active: esta clase se utiliza para crear un botón activo. Esta clase se usa junto con la clase de «botón puro».

Sintaxis:

  • Cree un botón activo usando la etiqueta <a>:

    <a class="pure-button pure-button-active" href="#">
        Active Button
    </a>  
  • Cree un botón activo usando la etiqueta <button>:

    <button class="pure-button pure-button-active">
        Active Button
    </button>

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
"https://unpkg.com/purecss@2.0.6/build/pure-min.css"
        integrity=
"sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5"
        crossorigin="anonymous">
</head>
  
<body style="text-align: center">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
  
    <h3>Pure CSS Active Buttons</h3>
       
    <!-- Active button using button tag -->
    <button class="pure-button pure-button-active">
        Active Button 1
    </button>
  
    <!-- Active button using a tag -->
    <a class="pure-button pure-button-active" href="">
        Active Button 2
    </a>
</body>
  
</html>

Producción:

Pure CSS Active Buttons

Botones activos de CSS puro

Referencia: https://purecss.io/buttons/#active-buttons

Publicación traducida automáticamente

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *