Get Ready Elementor Templates

Elementor Creative BUTTON Effect | WordPress Elementor Pro Tutorial

Subscribe To My YouTube Channel For More Upcoming Videos

Button Border CSS

selector{
    --size: 5px;
    --color: #ffffff;
}
selector a{
    position: relative;
}
selector a:before{
    content: '';
    position: absolute;
    top: var(--size);
    left: -10px;
    width: calc(100% + 20px);
    height: calc(100% - var(--size) * 2);
    background: var(--color);
    transition: 0.5s ease-in-out;
    transform: scaleY(1);
}
selector a:hover:before{
    transform: scaleY(0);
}
selector a:after{
    content: '';
    position: absolute;
    left: var(--size);
    top: -10px;
    height: calc(100% + 20px);
    width: calc(100% - var(--size) * 2);
    background: var(--color);
    transition: 0.5s ease-in-out;
    transform: scaleX(1);
}
selector a:hover:after{
    transform: scaleX(0);
}
selector span{
    position: relative;
    z-index: 3;
}	
Wanna join my secret winners’ gang?

I only share these secrets with the people in this group. Honestly, you can not find such tricks for FREE on the whole internet!

  • Money Making Blog Tricks
  • $100k by Freelancing Formula
  • Secret Resources
  • Rich Dad business tactics
  • And, of course about my upcoming videos and plans