YouTipCss3 Buttons
In this section, we will introduce how to create buttons using CSS.
* * *
## Basic Button Style
## Example
.button {
background-color: #4CAF50;/* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
[Try it »](#)
* * *
## Button Color
We can use the `background-color` property to set the button color:
## Example
.button1{background-color:#4CAF50;}.button2{background-color:#008CBA;}.button3{background-color:#f44336;}.button4{background-color:#e7e7e7; color:black;}.button5{background-color:#555555;}
[Try it »](#)
* * *
## Button Size
We can use the `font-size` property to set the button size:
## Example
.button1{font-size:10 px;}.button2{font-size:12 px;}.button3{font-size:16 px;}.button4{font-size:20 px;}.button5{font-size:24 px;}
[Try it »](#)
* * *
## Rounded Buttons
We can use the `border-radius` property to create rounded buttons:
## Example
.button1{border-radius:2 px;}.button2{border-radius:4 px;}.button3{border-radius:8 px;}.button4{border-radius:12 px;}.button5{border-radius:50%;}
[Try it »](#)
* * *
## Button Border Color
We can use the `border` property to set the button's border color:
## Example
.button1{background-color:white; color:black; border:2 px solid#4CAF50; } ...
[Try it »](#)
* * *
## Hover Buttons
We can use the `:hover` selector to change the style of a button when the mouse moves over it.
**Tip:** We can use the `transition-duration` property to determine the speed of the "hover" effect:
## Example
.button{ -webkit-transition-duration:0.4 s; transition-duration:0.4 s; }.button:hover{background-color:#4CAF50; color:white; } ...
[Try it »](#)
* * *
## Button Shadows
We can use the `box-shadow` property to add shadows to buttons:
## Example
.button1{box-shadow:0 8 px 16 px 0 rgba(0,0,0,0.2), 0 6 px 20 px 0 rgba(0,0,0,0.19); }.button2:hover{box-shadow:0 12 px 16 px 0 rgba(0,0,0,0.24), 0 17 px 50 px 0 rgba(0,0,0,0.19); }
[Try it »](#)
* * *
## Disabled Buttons
We can use the `opacity` property to add transparency to a button (creating a "disabled" look).
**Tip:** We can add the `cursor` property with a value of "not-allowed" to display a "no parking sign" (a circle with a line through it) when hovering:
## Example
.disabled{opacity:0.6; cursor:not-allowed; }
[Try it »](#)
* * *
## Button Width
By default, the size of a button is determined by its text content (as well as padding). We can use the `width` property to set the width of a button:
**Tip:** Use pixels (px) if you want a fixed width, or use percentages (%) for a responsive button width.
## Example
.button1{width:250 px;}.button2{width:50%;}.button3{width:100%;}
[Try it »](#)
* * *
## Button Groups
Remove margins and add `float:left` to create a button group:
## Example
.button{float:left; }
[Try it »](#)
* * *
## Bordered Button Group
We can use the `border` property to create a bordered button group:
## Example
.button{float:left; border:1 px solid green}
[Try it »](#)
## Example
.btn-group button{background-color:#04AA6D; border:1 px solid green; color:white; padding:10 px 24 px; cursor:pointer; float:left; }
[Try it »](#)
* * *
## Button Animation
> **More button styles can be created using the CSS Button Generator: [