CSS Styling Buttons
CSS Styling Buttons
With CSS, different HTML buttons can be styled in many ways.
The most common CSS properties for styling buttons are:
background-color- defines the background color of a buttoncolor- defines the text color of a buttonborder- defines the border of a buttonpadding- defines the space between the text and the border of a buttonborder-radius- adds rounded corners to a buttonbox-shadow- adds shadows to a buttontext-align- centers the text of a buttonfont-size- defines the font size of the text on a buttontext-decoration- removes the underline for <a> elements used as buttonscursor- changes the mouse cursor when hovering over the button
Buttons are typically created with the HTML<button> element, the<input type="button"> element, or an<a> element styled as a button.
CSS Basic Button Styling
Example
A basic button styling for different HTML elements:
background-color: red;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
CSS Button Colors
The CSSbackground-color property is used to define the background color of a button.
The CSScolor property is used to define the text color of a button.
Example
Buttons with different colors:
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */
CSS Button Sizes
The CSSfont-size property is used to define the font size for the text on a button:
Example
Buttons with different font size:
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
The CSSpadding property is used to define the space between the text and the border of a button:
Example
Buttons with different padding:
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}
CSS Rounded Buttons
The CSSborder-radius property is used to add rounded corners to a button:
Example
Buttons with different rounded corners:
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
CSS Button Borders
The CSSborder property is used to define the border of a button:
Example
Buttons with different borders:
.button2 {border: 2px dotted #008CBA;}
.button3 {border: 2px dashed #f44336;}
.button4 {border: 1px solid #e7e7e7;}
.button5 {border: 1px solid #555555;}
CSS Hoverable Buttons
The CSS:hover pseudo-class is used to change the style of a button when you mouse over it.
Tip: Use the CSStransition-duration property to determine the speed of the "hover" effect:
Example
Buttons with different hover effects:
.button2:hover {background-color: #008CBA;color: white;}
.button3:hover {background-color: #f44336;color: white;}
.button4:hover {background-color: #e7e7e7;color: black}
.button5:hover {background-color: #555555;color: white;}
CSS Buttons With Shadow
The CSSbox-shadow property is used to add a shadow to a button:
Example
Buttons with shadows:
.button2:hover {box-shadow:0 8px 16px 0 rgba(0,0,0,0.6)}
CSS Disabled Button
The CSSopacity property can be used to add transparency to a button (creates a "disabled" look).
Tip: You can also add thecursor property with a value of "not-allowed", which will display a "no parking sign" when you mouse over the button:
CSS Button Width
By default, the size of a button is determined by its text content.
The CSSwidth property can be used to define a specific width for a button.
Tip: Use pixels to set a fixed width, or percent for a responsive width (e.g. 50% of its parent element).
Example
Buttons with different widths:
.button2 {width: 50%;}
.button3 {width: 100%;}
CSS Horizontal Button Group
To create a group of buttons, wrap the buttons in a <div> element, and adddisplay: flex; to the <div> element. Also addflex-wrap: wrap;, to let the buttons wrap on a new line on small screens:
Example
display: flex;
flex-wrap: wrap;
}
.button {
background-color: #04AA6D;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
}
.btn-group .button:hover {
background-color: dodgerblue;
}
CSS Bordered Button Group
Use theborder property to create a bordered button group:
Example
display: flex;
flex-wrap: wrap;
}
.button {
background-color: #04AA6D;
border: 1px solid green;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
}
.btn-group .button:hover {
background-color: dodgerblue;
}
.btn-group .button:not(:last-child) {
border-right: none; /* Prevent double borders */
}
CSS Vertical Button Group
To create a vertical button group, wrap the buttons in a <div> element, and adddisplay: flex; to the <div> element. Also addflex-direction: column;, to let the buttons be displayed in a vertical way:
Button on Image
