51 lines
900 B
Markdown
51 lines
900 B
Markdown
---
|
|
title: Button border animation
|
|
tags: animation,intermediate
|
|
---
|
|
|
|
Creates a border animation on hover.
|
|
|
|
- Use the `:before` and `:after` pseudo-elements as borders that animate on hover.
|
|
|
|
```html
|
|
<button class="animated-border-button">Submit</button>
|
|
```
|
|
|
|
```css
|
|
.animated-border-button {
|
|
background-color: #141414;
|
|
border: none;
|
|
color: #ffffff;
|
|
outline: none;
|
|
padding: 12px 40px 10px;
|
|
position: relative;
|
|
}
|
|
|
|
.animated-border-button:before,
|
|
.animated-border-button:after {
|
|
border: 0 solid transparent;
|
|
transition: all 0.3s;
|
|
content: '';
|
|
height: 0;
|
|
position: absolute;
|
|
width: 24px;
|
|
}
|
|
|
|
.animated-border-button:before {
|
|
border-top: 2px solid #141414;
|
|
right: 0;
|
|
top: -4px;
|
|
}
|
|
|
|
.animated-border-button:after {
|
|
border-bottom: 2px solid #141414;
|
|
bottom: -4px;
|
|
left: 0;
|
|
}
|
|
|
|
.animated-border-button:hover:before,
|
|
.animated-border-button:hover:after {
|
|
width: 100%;
|
|
}
|
|
```
|