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. El botón principal de CSS puro se utiliza para crear un botón de acción principal. El botón principal se crea utilizando la clase Pure CSS.
Clase de botones primarios de CSS puro:
- pure-button-primary: esta clase se utiliza para crear el botón de acción principal. su clase se usa junto con la clase de «botón puro».
Sintaxis:
-
Cree un botón principal usando la etiqueta <a>:
<a class="pure-button pure-button-primary" href="#"> Primary Button </a>
-
Cree un botón principal usando la etiqueta <button>:
<button class="pure-button pure-button-primary"> Primary 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 Primary Buttons</h3> <!-- Primary button using a tag --> <a class="pure-button pure-button-primary" href="#"> Primary Button 1 </a> <!-- Primary button using button tag --> <button class="pure-button pure-button-primary"> Primary Button 2 </button> </body> </html>
Producción:
Botones primarios de CSS puro
Referencia: https://purecss.io/buttons/#primary-buttons