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:
Botones activos de CSS puro
Referencia: https://purecss.io/buttons/#active-buttons