×

Html & Html5

The World's best Software Development Study Portal

CSS Buttons



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