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

Update button border animation

Browse Source
This commit is contained in:
Angelos Chalaris
2020-04-20 12:33:33 +03:00
parent 197e1e2de1
commit 0f8fe28934
1 changed files with 17 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
snippets/button-border-animation.md
View File

@ -6,12 +6,12 @@ tags: animation,intermediate
Creates a border animation on hover.
```html
<div class="button-border"><button class="button">Submit</button></div>
<button class="animated-border-button">Submit</button>
```
```css
.button {
background-color: #c47135;
.animated-border-button {
background-color: #141414;
border: none;
color: #ffffff;
outline: none;
@ -19,35 +19,30 @@ Creates a border animation on hover.
position: relative;
}
.button:before,
.button:after {
.animated-border-button:before,
.animated-border-button:after {
border: 0 solid transparent;
transition: all 0.25s;
transition: all 0.3s;
content: '';
height: 24px;
height: 0;
position: absolute;
width: 24px;
}
.button:before {
border-top: 2px solid #c47135;
left: 0px;
top: -5px;
.animated-border-button:before {
border-top: 2px solid #141414;
right: 0;
top: -4px;
}
.button:after {
border-bottom: 2px solid #c47135;
bottom: -5px;
right: 0px;
.animated-border-button:after {
border-bottom: 2px solid #141414;
bottom: -4px;
left: 0;
}
.button:hover {
background-color: #c47135;
}
.button:hover:before,
.button:hover:after {
height: 100%;
.animated-border-button:hover:before,
.animated-border-button:hover:after {
width: 100%;
}
```