3.9 KiB
title |
---|
CSS Buttons |
CSS Buttons
CSS Buttons are a great way to add functional design features to your page.
- You can style any clickable button (HTML
<button>
element)
<button>Click Me</button>
- The default button looks like the following:
Styling a Button
You can change several properties of a button in order to change its appearance.
-
To add shadows to the button use
box-shadow
property. -
To add transparency to a button for a disabled effect use the property
opacity
. -
To remove the margins and create a button group add
float:left/right
property. -
To create a button group but with the borders, use
float
property and add aborder property
. -
To create a vertical group of buttons use display:
block property
.
Button Color
To change the background color of a button, use the background-color property:
button {background-color: #6ba0f4;}
To add a colored border to a button, use the border property:
button {
background-color: #FFF;
color: #FFF;
border: 2px solid #6ba0f4;
}
Button Text Size
To change the text font size of a button, use the font-size property:
button {font-size: 20px;}
Button Padding
To change the padding of a button, use the padding property:
button {padding: 15px 30px;}
Button Width
To change the width of a button, regardless the text content, use the width property:
button {width: 250px;}
Rounded Buttons
To create rounded buttons, use the border-radius property:
button {border-radius: 50%;}
Hoverable Buttons
To change the style of a button when you move the mouse over it, use the :hover selector:
button:hover {
background-color: #0E2C5B;
color: #FFF;
}
To determine the speed of the hover effect, use the property transition-duration
.
button {
background-color: #f4511e;
transition-duration: 0.4s;
}
button:hover {
background-color: #0E2C5B;
color: #FFF;
}
Disabled Buttons
To disable a button, use the cursor property:
button {
cursor: not-allowed;
}
Button Click Animation
To animate a button on click use 'button:active':
.button {
display: inline-block;
padding: 15px 25px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #ffffff;
background-color: #ff7d1a;
border: none;
border-radius: 15px;
transition-duration: 0.4s;
}
.button:hover {
background-color: #ff6d00;
}
.button:active {
background-color: #ff6d00;
transform: translateY(4px);
}
Button Links
In many cases buttons will have to link to an url. As we can't add an href attribute to the HTML button element without some JavaScript workarounds we need to style our link like a button. This way we have a working element disguised as a button, yet we can still use this class to style buttons. For example:
.btn {
display: inline-block;
text-decoration: none;
min-height: 40px;
padding: 20px 10px;
background-color: lightblue;
}
// Prevent visited links from turning purple
.btn:visited {
color: black;
}
More Information:
- https://www.w3schools.com/css/css3_buttons.asp
- https://www.w3schools.com/howto/howto_css_animate_buttons.asp