Home »
CSS
CSS - Create and Apply CSS for All Buttons on the Page
In this example we will learn how to create CSS for all Input Buttons, and without applying class for every element.
CSS - Create and Apply CSS for All Input Button on the Page
CSS:
<style>
body {
background-color: #efefef;
color: #000;
padding: 20px;
font: 100%;
font-family: "Segoe UI", "Open Sans", sans-serif, Arial;
}
/*CSS for All Input Buttons*/
body input[type="button"] {
font-family: "Segoe UI", "Open Sans", sans-serif, Arial;
background-color: #006969; /* Green */
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>
HTML Source Code with 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;
}
/*CSS for All Input Buttons*/
body input[type="button"] {
font-family: "Segoe UI", "Open Sans", sans-serif, Arial;
background-color: #006969; /* Green */
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>
Result:
CSS Tutorial & Examples »
TOP Interview Coding Problems/Challenges
ADVERTISEMENT