5 Different Border Effects For Links And Buttons

border effects for links
Buttons and links are a vital element in creating a positive and productive user experience. The best way to implement them in your website's design is by using visual cues or indicators that help people determine whether or not a button or link is clickable.
Share on facebook
Share on linkedin
Share on pinterest
Share on reddit

Here I come with another CSS tutorial that works on both Elementor and non-Elementor based websites that will guarantee make your designs prettier but in a more subtle way, because what you’ll be reading about today is border effects for links and buttons and how can they improve your user experience.

This article will be based on the hover.css library which is a collection of CSS3 powered hover effects available on GitHub that can be applied to links, buttons, logos, SVG, featured images and so on. You can easily apply them to your own elements, modify them or just use for inspiration.

border effects for links

It is important to note that this library has more than 50 effects, all based on different categories:

  • 2D Transitions
  • Background Transitions
  • Icons
  • Border Transitions
  • Shadow and Glow Transitions
  • Speech Bubbles
  • Curls

 

This tutorial, however, will focus only on border transitions as those are the ones that my clients have considered to be better when applied to their websites. So, with that said, let’s get right to the effects, shall we?

Recommended reading: Cool CSS Effects You Can Make For The Buttons Of Your Elementor Website

 

Underline From Left

I’m starting with my favorite as this is the one that I used first from all the effects of the library, as it creates a beautiful border with the color of your choosing starting from – you guessed it – the left of the link or button.

It looks something like this:

Underline From Left

So, if you hover over the gray box, you will notice the blue border line at the bottom coming from the left. Pretty nice, huh? I have always promised you in articles where code is involved that you don’t have to worry because I will provide it and this one is no different. Here is the CSS code you need to copy and paste to get this effect:

 

.hvr-underline-from-left {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
overflow: hidden;
}
[class^="hvr-"] {
padding: 1em;
cursor: pointer;
background: #e1e1e1;
color: #000;
}
.hvr-underline-from-left::before {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
bottom: 0;
background: #2098D1;
height: 4px;
transition: right 0.3s ease-out;
}
.hvr-underline-from-left:hover::before, .hvr-underline-from-left:focus::before, .hvr-underline-from-left:active::before {
right: 0;
}

 

You will notice it is a little longer than other codes provided here, but don’t fret because all you need to do is copy and paste. If you want to change the colors, whether that is the color of the border line or the color of the button/link itself, all you need to is look for the hex codes in the lines that say “background:” and change it to the hex or rgba color code you prefer.

 

 

Underline from right

This one is pretty similar to the previous code snippet, with the difference that the border line will be coming from the right. Because it is coming from the right, and given the fact that most websites are read from left to right, I would leave this border effect needs to go back to a previous page. Have you seen buttons like this:

With the arrow to the right being placed before the text, it makes more sense to add this border animation here to sort of complement the button. The effect is something like this:

Underline From Right

This is the code you need to copy:

.hvr-underline-from-right {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
overflow: hidden;
}
[class^="hvr-"] {
padding: 1em;
cursor: pointer;
background: #e1e1e1;
color: #000;
}
.hvr-underline-from-right::before {
content: "";
position: absolute;
z-index: -1;
left: 100%;
right: 0;
bottom: 0;
background: #2098D1;
height: 4px;
transition: left 0.3s ease-out;
}
.hvr-underline-from-right:hover::before, .hvr-underline-from-right:focus::before, .hvr-underline-from-right:active::before {
left: 0;
}

 

Underline From Center

All of these border transitions work great for both buttons and just links, but, this one in particular is perfect – in my opinion – for buttons, because the border line goes from the center to both sides, making it a nice transition when the user hovers over the element. This is how it looks like:

 

Underline From Center

What changes in the code here is that the left and right CSS properties now have to be involved at the same time, and for that they have to be included in both the “:hover” and the “:hover::before” states. Here is the code:

 

.hvr-underline-from-center {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
overflow: hidden;
}
[class^="hvr-"] {
padding: 1em;
cursor: pointer;
background: #e1e1e1;
color: #000;
}
.hvr-underline-from-center::before {
content: "";
position: absolute;
z-index: -1;
left: 51%;
right: 51%;
bottom: 0;
background: #2098D1;
height: 4px;
transition-property: left, right;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
.hvr-underline-from-center:hover::before, .hvr-underline-from-center:focus::before, .hvr-underline-from-center:active::before {
left: 0;
right: 0;
}

Ripple In

The next two effects I’m going to include in this tutorial are also perfect for buttons specifically, because they make the buttons look more like the user is clicking or close to on something, which is one of the UX best practices when it comes to buttons. The Ripple In looks something like this:

 

Ripple In

This is the CSS you need for that:

@-webkit-keyframes hvr-ripple-in {
  100% {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
  }
}
@keyframes hvr-ripple-in {
  100% {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
  }
}
.hvr-ripple-in {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
}
.hvr-ripple-in:before {
  content: '';
  position: absolute;
  border: #e1e1e1 solid 4px;
  top: -12px;
  right: -12px;
  bottom: -12px;
  left: -12px;
  opacity: 0;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}
.hvr-ripple-in:hover:before, .hvr-ripple-in:focus:before, .hvr-ripple-in:active:before {
  -webkit-animation-name: hvr-ripple-in;
  animation-name: hvr-ripple-in;
}

Outline In

The difference with “Outline In” effect in regards to the “Ripple In” is that in the former the border stays fixed on the button or link. It looks like this:

 

Outline In
And this is the code you need for it:
.hvr-outline-in {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
}
.hvr-outline-in:before {
pointer-events: none;
content: '';
position: absolute;
border: #e1e1e1 solid 4px;
top: -16px;
right: -16px;
bottom: -16px;
left: -16px;
opacity: 0;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: top, right, bottom, left;
transition-property: top, right, bottom, left;
}
.hvr-outline-in:hover:before, .hvr-outline-in:focus:before, .hvr-outline-in:active:before {
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
opacity: 1;
}

How to use these effects in Elementor?

There is one thing to note when it comes to using these effects in Elementor and that’s the fact that when you add the button widget, it creates a container around the button. So what you have to do there is add the CSS class to the Elementor button in the advanced tab:

And then still in the same tab, you would go to positioning and change the width of the container to inline (auto). You will have a button similar to the ones I created above but with Elementor’s own widget.

The other way you can use these effects in Elementor is by inserting the HTML widget, and creating this element:

“<a class=”underline-from-left” href=”link-here”>button text</a>”

It’s a bit more simpler and it has less margin for error than with the Elementor button method, but I’ll leave it up to you to see which way is more comfortable or manageable.

Final words

These are the five that I like the most from the +50 effects available on that collection and I hope you liked them as well. They should be easy to implement with the CSS and the methods provided, but if you happen to encounter any issue, please let me know in the comments!

Good luck!!

Join the templace newsletter

Every week, you will be receiving the greatest tips, design inspiration and all the goodies related to Elementor.

PREVIOUS AND NEXT POSTS

Do you want powerful hosting?

Kinsta’s hosting solution will give you an incredible loading time, bar none. With their amazing server infrastructure, attentive customer support and just great user experience all-around, hosting your website with Kinsta will be a delight.

  • home
  • Contact
  • Agency Plans

Want to learn about Elementor, web hosting, page speed optimization or web design? Click the button below to view all the articles!

Are you looking to redesign your website? build one from scratch? Or you just simply want to optimize it? Whatever your answer is to any of those questions, I can help you! Click the button below and fill up the form to contact me

Are you an agency owner overworked with web design clients? No need to worry about that anymore! Take a look at my agency plans for website design & development.
backgroundLayer 1

Home

The right clients, at the right price, anytime you want.

About

It takes 3 things for a program to create life-changing results.

Team

We have the skills you need to build a multi-million dollar business.

Contact

Helping coaches & thought-leaders all over the world.

You could use this for a mission statement or something else about your business that could really help people know more.

Navigation Menu

Newsletter (this is pretty important here!!)

Sign up to our newsletter

This guide is included in all template purchases, but you can get it here if that's what you only want