andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update button-hover-fill-animation.md

Browse Source
This commit is contained in:
Angelos Chalaris
2021-04-02 21:34:43 +03:00
committed by GitHub
parent 6abebfe811
commit c6a536d8b6
1 changed files with 15 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
snippets/button-hover-fill-animation.md
View File

@ -1,36 +1,29 @@
--- ---
title: Button Hover Fill Animation title: Button fill animation
tags: animation,beginner tags: animation,beginner
--- ---
Creates a fill animation in a button on hover. Creates a fill animation on hover.
- ` transition: 0.3s ease-in-out;` gives the ease into the hover/active state. - Set a `color` and `background` and use an appropriate `transition` to animate changes to the element.
- Change the background color to work with the font color in both states. - Use the `:hover` pseudo-class to change the `background` and `color` of the element when the user hovers over it.
- Elongate the transition by increasing the seconds.
- Edit `padding: 20px;` to make the button feel larger or thinner.
```html ```html
<button class="animated-fill-button">Click</button> <button class="animated-fill-button">Submit</button>
``` ```
```css ```css
button.animated-fill-button { .animated-fill-button {
transition: 0.3s ease-in-out;
color: black;
border: black 2px solid;
background-color: white;
font-size: 14px;
text-transform: uppercase;
cursor: pointer;
padding: 20px; padding: 20px;
font-weight: bold; background: #fff;
color: #000;
border: 1px solid #000;
cursor: pointer;
transition: 0.3s all ease-in-out;
} }
button.animated-fill-button:hover,
button.animated-fill-button:focus, .animated-fill-button:hover {
button.animated-fill-button:active background: #000;
{ color: #fff;
background-color: black;
color: white;
} }
``` ```