Buttons are clickable elements that can perform different actions.
Buttons can be styled with a variety of CSS properties.
These include color, border, size, hover style, and more.
A styled <button> element.
<style>
.my-button {
background: indigo;
border: 0;
color: white;
padding: 15px;
border-radius: 20px;
transition: 0.4s ease;
}
.my-button:hover {
background: black;
cursor: pointer;
}
</style>
<button class="my-button"
onclick="alert('Hi there!')">
Styled Button
</button>
The background-color property sets the background color of the button.
The color property sets the text color of the button.
Three colored buttons.
<style>
.btn-style {
border: none;
color: white;
width: 120px;
padding: 20px;
font-size: 16px;
}
</style>
<button class="btn-style"
onclick="alert('Indianred')"
style="background-color: indianred;">
indianred
</button>
<button class="btn-style"
onclick="alert('Indigo')"
style="background-color: indigo">
indigo
</button>
<button class="btn-style"
onclick="alert('Darkgreen')"
style="background-color: darkgreen">
darkgreen
</button>
For details on background-color, see our CSS background-color Property Reference.
Different properties affect the size of a button.
The width and height properties directly assign button sizes.
The padding property also affects the button size.
Finally, the font-size property also affects the size.
Three different ways to create buttons from large to small.
<style>
.btn-sizes {
border: none;
color: white;
background-color: steelblue !important;
}
</style>
<button class="btn-sizes"
style="width:180px; height: 80px">
width/height
</button>
<button class="btn-sizes"
style="width:150px; height: 60px">
width/height
</button>
<button class="btn-sizes"
style="width:120px; height: 40px">
width/height
</button>
<br />
<br />
<button class="btn-sizes"
style="padding:50px;">
padding
</button>
<button class="btn-sizes"
style="padding:30px;">
padding
</button>
<button class="btn-sizes"
style="padding:10px;">
padding
</button>
<br />
<br />
<button class="btn-sizes"
style="font-size: 36px;">
font-size
</button>
<button class="btn-sizes"
style="font-size: 26px;">
font-size
</button>
<button class="btn-sizes"
style="font-size: 16px;">
font-size
</button>
For details on height, see our CSS height Property Reference.
For details on width, see our CSS width Property Reference.
For details on padding, see our CSS padding Property Reference.
For details on font-size, see our CSS font-size Property Reference.
The border-radius property adds rounded corners to a button.
A pixel value creates rounded corners.
A % value creates oval corners depending on the button's aspect ratio.
Three buttons with different border radius values.
<style>
.btn-round {
border: none;
padding: 20px;
width: 100px;
color: white;
background-color: steelblue;
}
</style>
<button class="btn-round"
style="border-radius: 5px">
5px
</button>
<button class="btn-round"
style="border-radius: 25px">
25px
</button>
<button class="btn-round"
style="border-radius: 50%">
50%
</button>
For details on border-radius, see our CSS border-radius Property Reference.
The border property adds a styled border to a button.
The value accepts a border width, a border style, and a border color.
Three buttons with different borders.
<style>
.btn-borders {
background-color: transparent;
padding: 20px;
font-size: 16px;
}
</style>
<button class="btn-borders"
style="border: 2px dotted black;">
2px dotted black
</button>
<button class="btn-borders"
style="border: 3px dashed orange;">
4px dashed orange
</button>
<button class="btn-borders"
style="border: 6px solid lightblue;">
6px solid lightblue
</button>
For details on border, see our CSS border Property Reference.
The :hover pseudo-class changes the style when hovering over a button.
Together with the transition property a smooth style effect can be created during hover.
Hover over these buttons to see the style changes.
<style>
.btn-hoverable {
padding: 15px 30px;
border: 1px solid gray;
background-color: #fff;
font-size: 16px;
transition: 0.3s ease;
}
.btn-indigo:hover {
background-color: #302ea3;
color: white;
}
.btn-gray:hover {
background-color: #313744;
color: white;
}
.btn-maroon:hover {
background-color: #7f1d1d;
color: white;
}
</style>
<button class="btn-hoverable btn-indigo">indigo</button>
<button class="btn-hoverable btn-gray">gray</button>
<button class="btn-hoverable btn-maroon">maroon</button>
The box-shadow property adds a shadow to a button.
It accepts 4 values: x-offset, y-offset, blur, and color values.
A button with a shadow. Hovering the button creates a larger shadow.
<style>
.btn-shadow {
background-color: steelblue;
border: none;
color: white;
padding: 15px 30px;
font-size: 16px;
transition: 0.25s ease;
box-shadow: 3px 3px 5px #aaa;
}
.btn-shadow:hover {
box-shadow: 5px 5px 10px #aaa;
cursor: pointer;
}
</style>
<button class="btn-shadow">Shadow Button</button>
For details on box-shadow, see our CSS box-shadow Property Reference.
Buttons can be disabled with the HTML disabled attribute.
The :disabled pseudo-class helps with styling disabled buttons.
The opacity property can give a disabled appearance.
The cursor: not-allowed can be used to prevent the button from being clicked.
A normal and a disabled button.
<style>
.btn-normal {
padding: 15px 30px;
background-color: #302ea3;
border: none;
color: white;
font-size: 16px;
}
.btn-normal:disabled {
opacity: 0.6;
cursor: not-allowed;
}
</style>
<button class="btn-normal">Normal Button</button>
<button class="btn-normal" disabled>Disabled Button</button>
By default, the width of the button is equal to the width of its content.
The width property can be used to adjust the button's width.
A width value expressed as % creates widely stretched buttons.
Three buttons with a width expressed as %.
<style>
.btn-width {
background-color: #302ea3;
border: none;
text-align: center;
color: #fff;
margin: 5px 0;
padding: 15px 30px;
font-size: 16px;
cursor: pointer;
}
</style>
<button class="btn-width" style="width: 25%">25%</button>
<br>
<button class="btn-width" style="width: 50%">50%</button>
<br>
<button class="btn-width" style="width: 100%">100%</button>
Some interesting button animations can be created with pure CSS.
Below are some different animation styles.
An arrow is added when hovering the button.
<style>
.btn-animated {
border-radius: 4px;
background-color: #302ea3;
vertical-align: middle;
border: none;
color: white;
padding: 15px 30px;
font-size: 16px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
}
.btn-animated span {
display: inline-block;
position: relative;
transition: 0.5s;
}
.btn-animated span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.btn-animated:hover span {
padding-right: 25px;
}
.btn-animated:hover span:after {
opacity: 1;
right: 0;
}
</style>
<button class="btn-animated">
<span>Hover </span>
</button>
Click the button below for a pressed animation effect.
<style>
.btn-pressed {
padding: 15px 25px;
font-size: 20px;
cursor: pointer;
text-align: center;
color: white;
background-color: #302ea3;
border-radius: 10px;
box-shadow: 0 9px #999;
}
.btn-pressed:hover {
background-color: #7f1d1d;
}
.btn-pressed:active {
background-color: #7f1d1d;
box-shadow: 0 4px #666;
transform: translateY(4px);
}
</style>
<button class="btn-pressed">
Click Me
</button>
The opacity (transparency) changes by 30% when hovering the button.
<style>
.btn-fade {
background-color: #7f1d1d;
border: none;
color: white;
padding: 15px 30px;
font-size: 16px;
opacity: 0.7;
}
.btn-fade:hover {
opacity: 1;
cursor: pointer;
}
</style>
<button class="btn-fade">
Hover me
</button>
Click the button for a ripple effect moving over its surface.
<style>
.btn-ripple {
padding: 15px 30px;
background-color: #302ea3;
border: none;
overflow: hidden;
color: white;
font-size: 16px;
position: relative;
transition: 0.4s ease;
}
.btn-ripple:after {
content: "";
background: lightgrey;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px !important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.btn-ripple:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
</style>
<button class="btn-ripple">
Click Me
</button>
