In this article we are going to explore the Simple Button Hover effect - Border Hover effect.

You might have come across many different kinds of awesome button hover effects and Border Hover effects, But in this article, we are going to have a look on, How to create the four sides Border Hover effect. This effect is achieved by using before and after pseudo-elements.

By using before and after pseudo-elements, we are going to create the top, bottom, left and right borders. and we align these four borders accordingly by setting its position value to absolute.

What is the use of before and after pseudo-elements?

With the help of before and after pseudo-elements, we can insert the content, before and after any element without adding any elements to the Document Structure.

Check out the youtube video on Simple Button Hover effect - Border Hover effect

HTML Structure

Consider a div element with class:wrapper and inside that div element, consider the four div elements with class:btn and within the each btn div element, consider a p tag with text and two span elements with different classes(BorderTopBottom, BorderLeftRight).

<div class="wrapper">
  <div class="btn">
    <p>Button Effect</p>
    <span class="BorderTopBottom"></span>
    <span class="BorderLeftRight"></span>
  </div>
  <div class="btn">
    <p>Button Effect</p>
    <span class="BorderTopBottom"></span>
    <span class="BorderLeftRight"></span>
  </div>
  <div class="btn">
    <p>Button Effect</p>
    <span class="BorderTopBottom"></span>
    <span class="BorderLeftRight"></span>
  </div>
  <div class="btn">
    <p>Button Effect</p>
    <span class="BorderTopBottom"></span>
    <span class="BorderLeftRight"></span>
  </div>
</div>

CSS Structure

1. Let’s style the wrapper div in such a way that, it should always be at the center of the browser. by setting its position value to absolute, top and left values to 50% and by using translate method of transform property, place the wrapper div exactly in the center of the browser. Set its width to 760px.

   .wrapper{
           position: absolute;
           top: 50%;
           left: 50%;
           width: 550px;
           transform: translate(-50%,-50%);
   }

2. Style the all btn div element, by setting its width to 170px, margin to 0 10px, padding to 15px 0, background-color to #fff and float them to left and set its position value to relative, so that we can place its child elements(before and after elements) wherever we want.

   .wrapper .btn{
       width: 170px;
       margin: 0 10px;
       padding: 15px 0;
       text-align: center;
       float: left;
       cursor: pointer;
       background: #fff;
       position: relative;
   }

3. Style the p tag, by setting its color, font-weight and font-size.

   .btn p{
       color: #2b2f6c;
       font-weight: 900;
       font-size: 14px;
       text-transform: uppercase;
   }

As I mentioned above, here I’m going to use before and after pseudo-elements to achieve the four borders(top, bottom, left and right).

Top and Bottom Border

11. Style Top and Bottom borders, By setting its position value to absoltue, width to 50px, height to 3px and background color to #fff. and Now align the Top border by setting its top and left property values to -6px and -7px. and Now align the Bottom border by setting its bottom and right property values to -6px and -7px respectively.

    .BorderTopBottom:before{
        content: "";
        position: absolute;
        width: 50px;
        height: 3px;
        top: -6px;
        left: -7px;
        background: #fff;
        transition: all 0.5s ease;
    }
    
    .BorderTopBottom:after{
        content: "";
        position: absolute;
        width: 50px;
        height: 3px;
        bottom: -6px;
        right: -7px;
        background: #fff;
        transition: all 0.5s ease;
    }

Left and Right Border

15. Style Left and Right borders, By setting its position value to absoltue,width to 3px, height to 25px and background color to #fff. and Now align the Left border by setting its top and left property values to -3px and -7px. and Now align the Right border by setting its bottom and right property values to -3px and -7px respectively.

    .BorderLeftRight:before{
        content: "";
        position: absolute;
        top: -3px;
        left: -7px;
        width: 3px;
        height: 25px;
        background: #fff;
        transition: all 0.5s ease;
    }
    
    .BorderLeftRight:after{
        content: "";
        position: absolute;
        bottom: -3px;
        right: -7px;
        width: 3px;
        height: 25px;
        background: #fff;
        transition: all 0.5s ease;
    }

Hover effect

19. Whenever We hover over the btn, the width of the top and bottom borders change from 50px to 184px and the height of the left and right borders change from the 25px to 56px. and set the transition property for smooth animation effect.

    .btn:hover .BorderTopBottom:before,
    .btn:hover .BorderTopBottom:after{
        width: 184px;
        transition: all 0.5s ease;
    }
    
    .btn:hover .BorderLeftRight:before,
    .btn:hover .BorderLeftRight:after{
        height: 56px;
        transition: all 0.5s ease;
    }

Related articles on Button hover effects, Button Background Hover Effect Button Background sliding effect

• ui school
• #ui