How to Create a Pure CSS Button with Border Animation

By Faraz - August 10, 2022

Learn how to create a stylish button with pure CSS and border animation. Follow our step-by-step guide for a seamless user interface.

Join us on Telegram

creating a button in pure css with border animation.png

Read Also

How to Create a Skeuomorphic Like Button Using HTML, CSS, and JavaScript

A button with border animation is a web element that has an animated border around it, which is triggered by user actions such as hovering over the button or clicking on it. This effect can be created using pure CSS and is a great way to add some personality to a website and improve the user experience. By using CSS to create the border animation, developers can avoid the use of heavy JavaScript libraries, which can slow down the website's performance. Buttons with border animation are commonly used in web design to draw attention to a call-to-action, such as signing up for a newsletter or making a purchase.

When it comes to web design, small details can make a big difference. Animating buttons with CSS can give your website a more polished and professional look. In this tutorial, we will be showing you how to create a stylish button with pure CSS and border animation.

Let's start making an amazing button border animation using HTML and Pure CSS step by step.

Join My Telegram Channel to Download the Project: Click Here

Prerequisites:

Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our button.

<!DOCTYPE html> specifies that the document is an HTML5 document.

The <html> element is the root element of an HTML page and everything inside it is the document's content.

lang="en" declares the language of the document as English.

The <head> element contains metadata about the document, such as the title of the page, character encoding, and stylesheets.

<title>Button with Border Animation</title> sets the title of the page, which appears in the browser tab or window title.

<meta charset="UTF-8" /> specifies the character encoding for the document as UTF-8, which is the most commonly used character encoding for web pages.

<meta name="viewport" content="width=device-width" /> sets the viewport size to the width of the device screen. This is important for responsive design, which aims to ensure that web pages look good on all devices, including desktops, laptops, tablets, and mobile phones.

<link rel="stylesheet" href="styles.css" /> links to an external stylesheet called styles.css which contains CSS rules that apply to the HTML elements in the page.

The <body> element contains the visible content of the page.

<div>Faraz</div> creates a <div> element that contains the text "Faraz". This will appear on the webpage as a block element containing the text "Faraz".

After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.

This is the basic structure of our button using HTML, and now we can move on to styling it using CSS.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Button with Border Animation</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
  <div>Faraz</div>
  </body>
</html>

Read Also Create a Contact Form with Tailwind CSS.jpg

Create a Contact Form with Tailwind CSS (Source Code)

Step 2 (CSS Code):

Once the basic HTML structure of the button is in place, the next step is to add styling to the button using CSS.

Next, we will create our CSS file. In this file, we will use some basic CSS rules to style our button.

The first section applies some properties to the <body> and <html> elements, which are the main containers for the page's content. These properties include setting the width and height to 100%, applying a flex display mode, and setting a background color.

The second section applies some properties to <div> elements, which are often used as containers for other elements in a webpage. These properties include setting the position to relative, the width to 120 pixels, the text alignment to center, and the font size to 20 pixels. There are also some border and background color settings, as well as a cursor style and a transition effect.

The final section uses CSS animations to create a visual effect for the <div> elements. It creates two pseudo-elements (::before and ::after) that are positioned around the <div> element and have a border and border-radius. It also defines two keyframe animations using the @keyframes rule and the -webkit-keyframes rule. These animations set the clip-path property of the pseudo-elements to create a rotating pattern around the <div> element.

This will give our button an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

body,
html {
  width: 100%;
  height: 100%;
  display: flex;
  background-color: #1a1a1a;
}

div {
  position: relative;
  margin: auto;
  width: 120px;
  line-height: 64px;
  text-align: center;
  color: #1a1a1a;
  font-size: 20px;
  border: 2px solid #f6a9bd;
  border-radius: 10px;
  background: #f6a9bd;
  transition: all 0.3s;
  cursor: pointer;
}

div::before, div::after {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 2px solid #fff;
  transition: all 0.5s;
  -webkit-animation: clippath 3s infinite linear;
          animation: clippath 3s infinite linear;
  border-radius: 10px;
}
div::after {
  -webkit-animation: clippath 3s infinite -1.5s linear;
          animation: clippath 3s infinite -1.5s linear;
}

@-webkit-keyframes clippath {
  0%, 100% {
    -webkit-clip-path: inset(0 0 98% 0);
            clip-path: inset(0 0 98% 0);
  }
  25% {
    -webkit-clip-path: inset(0 98% 0 0);
            clip-path: inset(0 98% 0 0);
  }
  50% {
    -webkit-clip-path: inset(98% 0 0 0);
            clip-path: inset(98% 0 0 0);
  }
  75% {
    -webkit-clip-path: inset(0 0 0 98%);
            clip-path: inset(0 0 0 98%);
  }
}

@keyframes clippath {
  0%, 100% {
    -webkit-clip-path: inset(0 0 98% 0);
            clip-path: inset(0 0 98% 0);
  }
  25% {
    -webkit-clip-path: inset(0 98% 0 0);
            clip-path: inset(0 98% 0 0);
  }
  50% {
    -webkit-clip-path: inset(98% 0 0 0);
            clip-path: inset(98% 0 0 0);
  }
  75% {
    -webkit-clip-path: inset(0 0 0 98%);
            clip-path: inset(0 0 0 98%);
  }
}

Final Output:

creating a button in pure css with border animation.gif

Read Also Create a Stunning Food Delivery Website HTML & CSS.jpg

Create a Stunning Food Delivery Website: HTML & CSS

Conclusion:

In this tutorial, we have shown you how to create a stylish button with pure CSS and border animation. This is a simple yet effective way to add some personality to your website and improve the user experience. By following our step-by-step guide, you can create a button that stands out on any website. Remember to experiment with different colors and animations to find the perfect look for your website.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊