CSS Button Border Animation on Hover

CSS Button Border Animation

Buttons are interactive elements on a website or app that are used to perform a specific task. This element of any web interface is very important as they provide an intuitive way for users to interact with the webpage. These buttons are of many types such as navigation buttons, call-to-action or CTA buttons, form submission buttons, toggle buttons, etc. We can add various CSS animations to these buttons to make them visually appealing to users. One of these animations is to add a border animation around it. In this blog, the border animation we created can be visually appealing to users. There is a video below that shows the steps to create this snippet. Make sure to watch the video before collecting the source code. This will help you understand the source code.

Video Tutorial:

We hope you have watched the video tutorial. When used effectively, CSS animation may be a helpful tool for increasing user interest and engagement on websites or apps. Adding animation to some elements of a website makes it more interesting. In our snippet, we took four buttons. They are taken into a parent div called 'wrapper'. The display flex property is used to bring the parent div to the center of the viewport. In this example, we used the before and after pseudo-elements to add two additional borders on the top-left and bottom-right corners of the button. Initially, the width and height of the pseudo-elements will be 30px. When we hover over the button the height and width will be increased up to 100%. Watch the video above if you have any confusion.

You May Also Like:

CSS Button Border Animation on Hover [ Source Code ]:

Create an HTML File, followed by a CSS File. Take the code from the code box and paste it into your original files. You can download it from the button below if you detect any issues after reviewing the code in your browser.

ADD HTML:

<!DOCTYPE html> 
<html lang="en">
    <!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Css Button Border Animation on hover</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css"> 
</head>
<body>
    <div class="wrapper">
        <button class="btn">button one</button>
        <button class="btn">button two</button>
        <button class="btn">button three</button>
        <button class="btn">button four</button>
    </div>
</body>
</html>

ADD CSS:

* {
    padding: 0; 
    margin: 0;
    box-sizing: border-box;
  }
  
  .wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;    
    background: blueviolet;
  }
.btn {
    position: relative;
    cursor: pointer;
    margin: 0 30px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
    border: none;
    padding: 14px 32px;
    background: #fff;
    color: #262626;
    font-size: 20px;
    text-transform: uppercase;    
  }
  
  .btn:before {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    top: -10px;
    left: -10px;
    border-top: 3px solid #fff;
    border-left: 3px solid #fff;
    transition: all 0.5s;
  }
  
  .btn:after {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    bottom: -10px;
    right: -10px;
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
    transition: all 0.5s; 
  }

  .btn:hover:before,
  .btn:hover:after {
    height: 100%;
    width: 100%;
  }

Now you have successfully created a CSS Button Border Animation on Hover. Share it with like-minded individuals if you find it helpful. Thanks for visiting this blog post.

DOWNLOAD CODE

Post a Comment

Please Do not Enter any spam link in the comment box