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.

Sponsered By Codesponsor

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>
<p class="ui-box right-topToBottom">
  Animated Paragraph Border
</p>

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">
  <span class='ui-border-element'>
    Animated Hyperlink
  </span>
</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

Donate Link

Donate Now.