committed by
Quincy Larson
parent
1aafeb9859
commit
4381e9107e
@ -104,6 +104,35 @@ button {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
background-color: #ff6d00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:active {
|
||||||
|
background-color: #ff6d00;
|
||||||
|
transform: translateY(4px);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
#### More Information:
|
#### More Information:
|
||||||
* https://www.w3schools.com/css/css3_buttons.asp
|
* https://www.w3schools.com/css/css3_buttons.asp
|
||||||
* https://www.w3schools.com/howto/howto_css_animate_buttons.asp
|
* https://www.w3schools.com/howto/howto_css_animate_buttons.asp
|
||||||
|
Reference in New Issue
Block a user