Buttons give a feel of automation to the websites.
A button pressed here can redirect you to another page, or may bring something new to current page.
CSS has a lot to style the buttons using its numerous properties.
The basic outlook of a button is a standard rectangular image with some instructive text written over it.
The color is mostly white for the image and black for the text. Let’s now take a look at different styling aspects of a button.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <style> .btn { -moz-box-shadow:inset 0px 1px 0px 0px #f7c5c0; -webkit-box-shadow:inset 0px 1px 0px 0px #f7c5c0; box-shadow:inset 0px 1px 0px 0px #f7c5c0; background-color:#fc8d83; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1px solid #d83526; display:inline-block; cursor:pointer; color:#ffffff; font-family:Arial; font-size:15px; font-weight:bold; padding:9px 24px; text-decoration:none; text-shadow:0px 1px 0px #b23e35; } .btn:hover { background-color:#e4685d; } .btn:active { position:relative; top:1px; } </style> </head> <body> <a href="#" class="btn">Click Me</a> </body> |
Colors
The color of the button can be changes using the background-color property.
Sizes
The size of the button may depend on its dimensions or its text. You can change the font size of the text or the padding property of the button to alter the button size.
Rounded
With the help of the border-radius property, we can make the corners rounded for the buttons.
Colored Borders
The border property can be used to change the border color of the button. We generally choose the border a shade darker than the background-color of the containing element or the web-page in general.
Hover
Changing of background and border colors, or even the text can be done using the hovering feature for the buttons. You can also add transition for a better effect.
Shadow
The box-shadow property can add shadows to the button.
Disabled
To show a disabled button, we mostly increase the opacity of the button or change its background color to something between white and light-grey.
Width
Depending on the box-sizing property value, the width can be inclusive or exclusive of the padding, border and margins.
Grouping
The buttons can be grouped together by removing the margins and adding float:left to all of them. You can add borders to separate different buttons in the group. You can also use display:block if you want to group the buttons vertically.
Apart from these, we can also have buttons on images and buttons with animated features.