As we know we are having buttons in our Form layout page or any other place where
mostly we use to submit data, reset data and etc. But through CSS we can also able to customize or
add styling to our <button> tag.
Let's see some few example here by which we can create a stylish button layout :-
Change button colors
We can change the color of the button simply by changing the background-color property of the button.
Let's understand this by the following program :-
<!DOCTYPE html>
<html>
<head>
<style>
.main{
background-color:#00ffff;
}
.name{
background-color:#e6b3ff;
}
</style>
</head>
<body>
<p> Button color </p>
<button type="button" class="main"> Submit Here </button>
<button type="button" class="name"> Click Here </button>
</body>
</html>
Output of the Program
Check the color of the button.
So this is how we can change the color of the button.
Change button size
We can also change the size of the button simply by changing the font-size property of the button.
Let's understand this by the following program :-
<!DOCTYPE html>
<html>
<head>
<style>
.main{
background-color:#00ffff;
font-size:15px;
}
.name{
background-color:#e6b3ff;
font-size:25px;
}
</style>
</head>
<body>
<p> Button size </p>
<button type="button" class="main"> Submit Here </button>
<button type="button" class="name"> Click Here </button>
</body>
</html>
Output of the Program
Button size
So this is how we can change the size of the button.
rounded button
We can also change the border shape of the button simply by changing the border-radius property of the button.
Let's understand this by the following program :-
<!DOCTYPE html>
<html>
<head>
<style>
.main{
background-color:#00ffff;
border-radius:5px;
}
.name{
background-color:#e6b3ff;
border-radius:50%;
}
</style>
</head>
<body>
<p> rounded button </p>
<button type="button" class="main"> Submit Here </button>
<button type="button" class="name"> Click Here </button>
</body>
</html>
Output of the Program
rounded button
So this is how our round button use to create.
CSS 3 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute