Prepare repository for merge

This commit is contained in:
Angelos Chalaris
2023-05-01 22:51:44 +03:00
parent 334b4dd6f8
commit e49fc829dd
100 changed files with 0 additions and 593 deletions

View File

@ -0,0 +1,32 @@
---
title: Button fill animation
type: snippet
tags: [animation]
cover: beach-pineapple
dateModified: 2021-04-02T21:34:43+03:00
---
Creates a fill animation on hover.
- Set a `color` and `background` and use an appropriate `transition` to animate changes to the element.
- Use the `:hover` pseudo-class to change the `background` and `color` of the element when the user hovers over it.
```html
<button class="animated-fill-button">Submit</button>
```
```css
.animated-fill-button {
padding: 20px;
background: #fff;
color: #000;
border: 1px solid #000;
cursor: pointer;
transition: 0.3s all ease-in-out;
}
.animated-fill-button:hover {
background: #000;
color: #fff;
}
```