Home »
CSS
CSS - Create and Apply CSS for All Buttons on the Page
By IncludeHelp Last updated : July 11, 2023
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 Examples »