CSS – Crear y aplicar CSS para todos los botones de la página

En este ejemplo vamos a aprender a crear CSS for todos los botones de entrada, y sin aplicar class for cada elemento.

CSS – Crear y aplicar botón de entrada CSS for todo en página

CSS

<style>
body
{
background-color: #efefef;
color: #000;
padding: 20px;
font: 100%;
font-family: 'Segoe UI', 'Open Sans', sans-serif, Arial;
}

body input[type=button]
{
font-family: 'Segoe UI', 'Open Sans', sans-serif, Arial;
background-color: #006969;
border: none;
color: #fff;
padding: 8px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
}
body input[type=button]:hover
{
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 10px 10px 0 rgba(0,0,0,0.19);
}
</style>

Código fuente HTML con CSS

<!--CSS - Create and Apply CSS for All Buttons on the Page.-->
<html>
<head>
<title>CSS - Create and Apply CSS for All Buttons on the Page.</title>
<style>
body
{
background-color: #efefef;
color: #000;
padding: 20px;
font: 100%;
font-family: 'Segoe UI', 'Open Sans', sans-serif, Arial;
}

body input[type=button]
{
font-family: 'Segoe UI', 'Open Sans', sans-serif, Arial;
background-color: #006969;
border: none;
color: #fff;
padding: 8px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
}
body input[type=button]:hover
{
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 10px 10px 0 rgba(0,0,0,0.19);
}
</style>
</head>
<body>
<h1>CSS - Create and Apply CSS for All Buttons on the Page.</h1>
<input type="button" value="Button 1"/>
<input type="button" value="Button 2"/>
<input type="button" value="Button 3"/>
</body>
</html>

Resultado

CSS - Create and Apply CSS for All Buttons on the Page - 4
clic for DEMO y rarr;


Deja un comentario

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