ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

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
ADVERTISEMENT
ADVERTISEMENT




Comments and Discussions

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

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.