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

create css for all input buttons





Comments and Discussions

Ad: Are you a blogger? Join our Blogging forum.




Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates


© https://www.includehelp.com some rights reserved.