Pure CSS es un marco CSS. Es un conjunto de herramientas gratuitas y de código abierto para crear sitios web y aplicaciones web receptivos. Yahoo desarrolló esto, que se utiliza para crear sitios web más rápidos, más elegantes y más receptivos. Se puede utilizar como alternativa a Bootstrap .
Los botones de personalización facilitan la personalización de los estilos de los botones, como el color, la forma, el tamaño y los iconos, al agrupar el CSS personalizado en una clase, lo que ayuda a implementarlo en un elemento que contiene el nombre de la clase.
Clase de botones de personalización de CSS puro:
- pure-button : La clase pure-button se usa para crear un botón puro con botones de tamaño normal y regular.
- button-xsmall : esta clase se usa para crear botones extra pequeños.
- button-small : esta clase se usa para crear pequeños botones.
- button-large : esta clase se usa para crear botones grandes.
- button-xlarge : esta clase se usa para crear botones extra grandes.
Sintaxis:
<button class="Customizing Buttons Class"> Content </button>
Ejemplo 1 : en este ejemplo, demostraremos la personalización de botones de colores de CSS puro.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css"
integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin="anonymous" />
<style>
.button-success {
background: rgb(27, 240, 76);
}
.button-error {
background: rgb(252, 16, 16);
}
.button-warning {
background: rgb(245, 128, 18);
}
.button-download {
background: rgb(66, 184, 221);
}
</style>
</head>
<body style="text-align: center">
<h2 style="color:green">GeeksforGeeks</h2>
<strong>Pure CSS Customizing Coloured Buttons </strong>
<br />
<button class="button-success pure-button">
Success Button
</button>
<button class="button-warning pure-button">
Warning Button
</button>
<button class="button-download pure-button">
Download Button
</button>
<button class="button-error pure-button">
Error Button
</button>
</body>
</html>
Salida :
Ejemplo 2 : En este ejemplo, demostraremos la personalización de botones de colores con CSS puro con esquinas redondeadas.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Pure CSS Customizing Buttons</title>
<link rel="stylesheet"
href=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css"
integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin="anonymous" />
<style>
.button-success,
.button-error,
.button-warning,
.button-download {
color: white;
border-radius: 15px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-success {
background: rgb(27, 240, 76);
}
.button-error {
background: rgb(252, 16, 16);
}
.button-warning {
background: rgb(245, 128, 18);
}
.button-download {
background: rgb(66, 184, 221);
}
</style>
</head>
<body style="text-align: center">
<h2 style="color:green">GeeksforGeeks</h2>
<strong>
Pure CSS Customizing Coloured Buttons with rounded corner
</strong>
<br />
<br />
<button class="button-success pure-button">
Success Button
</button>
<button class="button-warning pure-button">
Warning Button
</button>
<button class="button-download pure-button">
Download Button
</button>
<button class="button-error pure-button">
Error Button
</button>
</body>
</html>
Salida :
Ejemplo 3 : en este ejemplo, demostraremos botones de personalización de CSS puro con diferentes tamaños de botón.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Pure CSS Customizing Buttons</title>
<link rel="stylesheet"
href=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css"
integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin="anonymous" />
<style scoped="">
.button-xsmall {
font-size: 70%;
}
.button-small {
font-size: 85%;
}
.button-large {
font-size: 110%;
}
.button-xlarge {
font-size: 125%;
}
</style>
</head>
<body style="text-align: center">
<h2 style="color:green">GeeksforGeeks</h2>
<strong>
Pure CSS Customizing Buttons with different sizes
</strong>
<br />
<br />
<button class="button-xsmall pure-button">
Extra Small Button
</button>
<button class="button-small pure-button">
Small Button
</button>
<button class="pure-button">
Regular Button
</button>
<button class="button-large pure-button">
Large Button
</button>
<button class="button-xlarge pure-button">
Extra Large Button
</button>
</body>
</html>
Salida :
Ejemplo 4 : en este ejemplo, demostraremos la personalización pura de botones CSS con íconos de botones.
HTML
<!DOCTYPE html> <html> <head> <title>Pure CSS Customizing Buttons</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href= "https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity= "sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous" /> </head> <body style="text-align: center"> <h2 style="color:green">GeeksforGeeks</h2> <strong>Pure CSS Customizing Buttons with icons</strong> <br /> <button class="pure-button" href="#"> <i class="fa fa-github" aria-hidden="true"></i>github </button> <button class="pure-button" href="#"> <i class="fa fa-bluetooth" aria-hidden="true"></i>bluetooth </button> <button class="pure-button" href="#"> <i class="fa fa-home" aria-hidden="true"></i>home </button> </body> </html>
Salida :
Referencia : https://purecss.io/buttons/#customizing-buttons
Publicación traducida automáticamente
Artículo escrito por sahilsulakhe3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA