Los botones son uno de los elementos de interfaz de usuario más comunes. Hicieron posible que los usuarios interactúen con un sistema y tomen medidas al hacer selecciones. A veces necesitábamos botones de diferentes tamaños, ahí viene, con la ayuda de la clase Pure CSS Button Size.
Clase Pure CSS Button Sizes: No hay una clase predefinida para el tamaño de los botones, tenemos que hacerlo usando CSS.
El porcentaje del tamaño del botón depende del padre:
- button-xsmall: esta clase se usa para crear botones extra pequeños (70%).
- button-small: Esta clase se usa para crear botones pequeños (85%).
- pure-button: esta clase se utiliza para crear botones normales.
- button-large: Esta clase se usa para crear botones grandes (110%).
- button-xlarge: Esta clase se usa para crear botones extra grandes (!25%).
Sintaxis:
<button class="button-xsmall pure-button"> ..... </button>
Ejemplo: El siguiente ejemplo ilustra los tamaños de botones CSS puros.
HTML
<!DOCTYPE html>
<html>
<head>
<!--Import Pure Css files-->
<link rel="stylesheet"
href=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css"
integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin="anonymous"/>
<style>
.button-xsmall {
font-size: 70%;
}
.button-small {
font-size: 85%;
}
.button-large {
font-size: 110%;
}
.button-xlarge {
font-size: 125%;
}
</style>
</head>
<body>
<center>
<h1>Geeksforgeeks</h1>
<strong>Pure CSS Button Sizes</strong>
<br><br>
<button class="button-xsmall pure-button
button-">Pure Button2</button>
<button class="button-small pure-button
button-">Pure Button2</button>
<button class="pure-button
button-">Pure Button2</button>
<button class="button-large pure-button
button-">Pure Button2</button>
<button class="button-xlarge pure-button
button-">Pure Button2</button>
</center>
</body>
</html>
Producción:
Tamaños de botones CSS puros
Enlace de referencia: https://purecss.io/buttons/
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA