In this Advance CSS tutorial, we will be learning how to style the HTML <button> element.
HTML Buttons
In HTML, we have a dedicated <button> element to create buttons on a web page. A button is generally used to represent a clickable event, it is often used with the <form> element to submit button. Here in this article, we have provided many HTML and CSS snippets to create different buttons.
Basic Buttons
It's very easy to style a basic button.
<!DOCTYPE html> <html> <head> <style> #button { background-color: lightblue; color: black; padding: 15px 32px; text-align: center; font-size: 16px; margin: 4px 2px; cursor: pointer; } </style> </head> <body> <button id ='button'>Button </button> </body> </html>
Button Color
To set a button color, we can use the
background-color
property because the
color
property will change the button text's color.
Example
Create a red color button
<!DOCTYPE html> <html> <head> <style> #button { background-color: red; color: black; padding: 15px 32px; text-align: center; font-size: 16px; margin: 4px 2px; cursor: pointer; } </style> </head> <body> <button id ='button'>Button </button> </body> </html>
Button Size
The size of the button can be changed using the
font-size.
Because the button size alters with the size of its text.
Example
<!DOCTYPE html> <html> <head> <style> #button { background-color: red; color: black; padding: 15px 32px; text-align: center; font-size: 24px; margin: 4px 2px; cursor: pointer; } </style> </head> <body> <button id ='button'> Big Button </button> </body> </html>
Round or Circle button
By manipulating the
border-radius
property of a
button
we can create a circular button. Set the
border-radius
property to
50%,
it will create a circular or rounded button.
Example
<!DOCTYPE html> <html> <head> <style> #button { background-color: red; color: black; padding: 15px 15px; text-align: center; font-size: 12px; border-radius: 50%; margin: 4px 2px; cursor: pointer; } </style> </head> <body> <button id ='button'> Circular Button </button> </body> </html>
Colored Borders Button
Using the
border
property, we can define a button with a color border.
Example
<!DOCTYPE html> <html> <head> <style> #button { background-color: red; padding: 15px 32px; background-color: white; color: black; border: 2px solid red; font-size: 15px; margin: 4px 2px; cursor: pointer; } </style> </head> <body> <button id ='button'> Red Button </button> </body> </html>
Hoverable Color changing button
To create a hoverable color changing button, we can use the
:hover
pseudo-class and
transition
property. The
:hover
pseudo-class invoke a different styling for the button when the user hovers over it and the
transition
property makes the changing styling smooth.
Example
<!DOCTYPE html> <html> <head> <style> #button { padding: 15px 32px; background-color: white; color: black; border: 2px solid red; font-size: 15px; margin: 4px 2px; cursor: pointer; transition-duration: 1s; } #button:hover{ background-color: red; color: white; } </style> </head> <body> <button id ='button'> Red Button </button> </body> </html>
Button Shadow
A shadow on a button gives it a 3D look, and using the
box-shadow
property, we can create a shadow for a box.
Example
Create a shadow when the user hovers over the button.
<!DOCTYPE html> <html> <head> <style> #button { padding: 15px 32px; color: black; border: 2px solid red; font-size: 15px; margin: 4px 2px; cursor: pointer; transition-duration: 1s; } #button:hover{ background-color: red; color: white; box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); } </style> </head> <body> <button id ='button'> Red Button </button> </body> </html>
Create a Disabled button
To create a disable button set decreases the button opacity and set the cursor property to not-allowed
Example
<!DOCTYPE html> <html> <head> <style> #button { padding: 15px 32px; color: white; background-color: red; border: 2px solid red; font-size: 15px; margin: 4px 2px; opacity: 0.3; cursor: not-allowed; } </style> </head> <body> <button id ='button'> Disabled Button </button> </body> </html>
Set the button width
The width of the button can be changed using
width
property
Example
<!DOCTYPE html> <html> <head> <style> #button { padding: 15px 32px; width: 100%; color: white; background-color: red; border: 2px solid red; font-size: 15px; margin: 4px 2px; cursor: pointer; } </style> </head> <body> <button id ='button'> Full length Button </button> </body> </html>
Group Buttons horizontally
To group button together in a single line set the
display:inline-block
,
float:left
and there should be no margin.
Example
<!DOCTYPE html> <html> <head> <style> .buttons button{ padding: 15px 32px; color: white; background-color: red; border: 2px solid lightblue; display: inline-block; font-size: 15px; cursor: pointer; float: left; } </style> </head> <body> <div class="buttons"> <button > Button1 </button> <button > Button2 </button> <button > Button3 </button> <button > Button4 </button> </div> </body> </html>
Group Button vertically
To group button vertically, set the
display:block.
Example
<!DOCTYPE html> <html> <head> <style> .buttons button{ padding: 15px 32px; color: white; background-color: red; border: 2px solid lightblue; display: block; font-size: 15px; cursor: pointer; } .buttons button:hover{ background-color: lightblue; border-color: red; } </style> </head> <body> <div class="buttons"> <button > Button1 </button> <button > Button2 </button> <button > Button3 </button> <button > Button4 </button> </div> </body> </html>
Summary
-
The
background-color
property set the color of the button -
The
color
property sets the text color of the button. -
The
font-size
increases the size of button text and, ultimately the button itself. -
The
width
property can increase and decrease the width of the button. -
To group buttons horizontally, set the
diplay:inline-block.
-
To group, the buttons vertically ser the
display:
block.
People are also reading: