Elementor tutorial tor Button border animation CSS tips

In this Elementor tutorial video, we designed a high converting button hover effect for your website. We made this using the Elementor free version. As this is a button border animation CSS video, we did use very little CSS. So, watch the whole button hover effects CSS video, without skipping.

Here’s the CSS code that we used for the styling in the button border animation CSS video. You can copy and paste it to your project to try it out.

  .btn a {
    position: relative;
  }

  .btn a:before, .btn a:after{
      content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #00876c;
      z-index: -1;
    transition: .3s;
  }

  .btn.btn--style2 a:before, .btn.btn--style2 a:after{
      background-color: #2980B9
  }

  .btn.btn--style3 a:before, .btn.btn--style3 a:after{
      background-color: #d35400
  }

  .btn a:before {  
    left: 0;
    top: 0;  
  }

  .btn a:after {
    right: 0;
    bottom: 0;
  }

  .btn a:hover:before {
    left: -5px;
    top: -5px;
  }
  
  .btn a:hover:after {
    right: -5px;
    bottom: -5px;
  }

Help us to inspire and produce awesome free WordPress tutorial videos like this. To do so, please subscribe to this YouTube Channel for exclusive content.

We also recommend you to check out this article Essential Plugins to make your WordPress website efficient