Buttons are one of the most used elements in HTML. With the help of CSS, buttons can be styled in various ways. Multiple properties can be used on a button element. We can provide border, colour, padding, and so much more to the button using CSS.
background-color is used to change the colour of the button.
The default colour of the button is white.
font-size is used to change the size of the button.
E.g., .button_name { font-size: 25px;}
padding is used to define the length and breadth of the button.
E.g., .button_name { padding: 25px 40px ;}
We can use some border-radius attribute to give the shape to the button.
E.g., button_name { border-radius: 2px;}
button_name { border-radius: 50 %;}
By using border we can colour button border.
E.g., button_name { border: 2px solid Blue;}
Hover is used to styling the button in such a way so that when the mouse is over the button, then it will show effect.
Use the transition-duration attribute for the time of the hover effect.
E.g., button_name { transition-duration: 0.5s;}
button_name:hover {******}
These properties are showcased in the examples below:-
|
|
