Pure-CSS3-Animated-Border

KO | EN

gitlite — search

#javascript #python #react #typescript #llm #go #machine-learning #nodejs #java #windows #vue #security #openai #open-source

Pure-CSS3-Animated-Border

(★ 78)

Pure CSS3 animated border for all html element.

Pure-CSS3-Animated-Border Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# pure-css-animated-border

A pure css3 animated border which supports all moden browser.

## CDN Link
```
https://cdn.jsdelivr.net/gh/code-fx/Pure-CSS3-Animated-Border@V1.0/css/animated-border/animated-border.min.css
```

## NPM
```
npm i pure-css3-animated-border
```

## Demo Link

See the [online demo](https://code-fx.github.io/Pure-CSS3-Animated-Border/).

<a target='_blank' rel='nofollow' href='https://app.codesponsor.io/link/LVbzkQ4E34baRc6UroXqDynU/code-fx/Pure-CSS3-Animated-Border'>
Sponsered By Codesponsor
</a>

## 1,2 Line Animated Boder Examples

```

<a href="ui-box top-leftToRight">
 Animated Hyperlink Border
</a>

<div class="ui-box bottom-rightToLeft">
 Animated Div Border
</a>

<button class="ui-box left-bottomToTop">
 Animated Button Border
</button>

Animated Paragraph Border

```

```
Modify border style, color, width and easing
<style>
 //top border
 .top-leftToRight:before{
 border-top: 1px solid Tomato;
 transition-timing-function: linear;
 }

//bottom border
  .bottom-rightToLeft:after{
    border-bottom: 1px solid DodgerBlue;
    transition-timing-function: ease-in;
  }

//left border
  .left-bottomToTop:before{
    border-left: 1px solid smokeWhite;
    transition-timing-function: ease-out;
  }

//right border
 .right-topToBottom:after{
 border-right: 1px solid MediumSeaGreen;
 transition-timing-function: ease-in-out;
 }
</style>
```

## 4 Line Animated Boder Example
```
<a href="ui-box top-leftStart">
 
 Animated Hyperlink
 
</a>
```

```
Modify border style, color, width and easing
<style>
 //top border
 .top-leftStart:before{
 border-top: 1px solid Tomato;
 transition-timing-function: linear;
 }

//bottom border
  .top-leftStart:after{
    border-bottom: 1px solid DodgerBlue;
    transition-timing-function: ease-in;
  }

//left border
  .top-leftStart .ui-border-element:before{
    border-left: 1px solid smokeWhite;
    transition-timing-function: ease-out;
  }

//right border
 .top-leftStart .ui-border-element:after{
 border-right: 1px solid MediumSeaGreen;
 transition-timing-function: ease-in-out;
 }
</style>
```

## Animated Border Class Name

| Class Name | Use Span |
| ---------------- |-------------|
| .ui-box .topBottom-leftRightCorner | ``` Your Content... ``` |
| .ui-box .topBottom-rightLeftCorner | ``` Your Content... ``` |
| .ui-box .forwardBorderTrain | ``` Your Content... ``` |
| .ui-box .backwardBorderTrain | ``` Your Content... ``` |
| .ui-box .border-inOutSpread | ``` Your Content... ``` |
| .ui-box .slideOpposite | ``` Your Content... ``` |
| .ui-box .top-leftToRight | |
| .ui-box .right-topToBottom | |
| .ui-box .bottom-rightToLeft | |
| .ui-box .left-bottomToTop | |
| .ui-box .top-rightToLeft | |
| .ui-box .right-bottomToTop | |
| .ui-box .bottom-leftToRight | |
| .ui-box .left-topToBottom | |
| .ui-box .top-inOutSpread | |
| .ui-box .right-inOutSpread | |
| .ui-box .bottom-inOutSpread | |
| .ui-box .left-inOutSpread | |
| .ui-box .top-slideOpposite | |
| .ui-box .right-slideOpposite | |
| .ui-box .bottom-slideOpposite | |
| .ui-box .left-slideOpposite | |
| .ui-box .top-leftStart | ``` Your Content... ``` |
| .ui-box .top-rightStart | ``` Your Content... ``` |
| .ui-box .bottom-rightStart | ``` Your Content... ``` |
| .ui-box .bottom-leftStart | ``` Your Content... ``` |
| .ui-box .top-leftStart-backward | ``` Your Content... ``` |
| .ui-box .top-rightStart-backward | ``` Your Content... ``` |
| .ui-box .bottom-rightStart-backward | ``` Your Content... ``` |
| .ui-box .bottom-leftStart-backward | ``` Your Content... ``` |
| .ui-box .top-leftStart-burst | ``` Your Content... ``` |
| .ui-box .top-rightStart-burst | ``` Your Content... ``` |
| .ui-box .bottom-rightStart-burst | ``` Your Content... ``` |
| .ui-box .bottom-leftStart-burst | ``` Your Content... ``` |
| .ui-box .top-leftStart-burst-backward | ``` Your Content... ``` |
| .ui-box .top-rightStart-burst-backward | ``` Your Content... ``` |
| .ui-box .bottom-rightStart-burst-backward | ``` Your Content... ``` |
| .ui-box .bottom-leftStart-burst-backward | ``` Your Content... ``` |
| .ui-box .top-stay | ``` Your Content... ``` |
| .ui-box .right-stay | ``` Your Content... ``` |
| .ui-box .bottom-stay | ``` Your Content... ``` |
| .ui-box .left-stay | ``` Your Content... ``` |

## Donate Link

[Donate Now](https://www.paypal.me/codefx).

Pure-CSS3-Animated-Border

Pure-CSS3-Animated-Border Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Pure-CSS3-Animated-Border

Pure-CSS3-Animated-Border Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README