Creative CSS3 button border animation

byCodingFlicks -May 24, 2023

0

In website design, buttons refer to interactive elements that users can click or tap to perform specific actions or navigate through the website. Buttons are visual cues that indicate to users that they can interact with them. Buttons serve various purposes in website design, such as navigation, call-to-action or CTA, form submission, social sharing, etc. In this blog, we will create a button with border animation around it. Our Website has many source codes for CSS animation examples, Full website design, and many more. Make sure to click the load more button below the homepage to access those. The video demo of this snippet is available below.

Video Demo:

I hope you have seen the video demo. In order to make buttons visually appealing, easily recognizable, and intuitive to use we need to add some animation to it. Animated buttons can capture users' attention and make the interaction with the website more engaging and enjoyable. Animated buttons can help establish a visual hierarchy on a web page. Using different animations for different buttons, you can guide users' attention and prioritize specific actions or elements on the page.

You May Also Like:

Creative CSS3 button border animation [ Source Code ]:

Create an HTML file and a CSS file for this snippet. After that link the external CSS file using the link tag in the HTML file. Please copy the code from the code box below. If you are facing any problem with the code below you can also download the code from the download button below.

ADD HTML:

<!DOCTYPE html>
<!-- codingflicks.com -->
<html>
<head>
    <title>Creative CSS3 button border animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <button>Border Animation</button>
    </div>
</body>
</html>

ADD CSS:

body{
    margin: 0;
    padding: 0;
    background-color: #ddd;
}
.wrapper{
    position: relative;
    display: grid;
    place-items: center;
    height: 100vh;
}
button {
    position: relative;
	background-color: #fff;
	border: 6px solid #262626;
	color: #262626;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 2px;
	box-shadow: 2px 10px 20px rgba(0,0,0,0.5);
	cursor: pointer;
	outline: none;
	height: 100px;
	width: 300px;
	font-family: sans-serif;	
}
button:before{
    content: "";
    position: absolute;
    height: 30px;
    width: 301px;
    background-color: #fff;
    margin: auto;
    left: -6px;
    right: 0;
    bottom: -6px;
    transition: width 0.5s,
                height 0.5s 0.5s;
}
button:after{
    content: "";
    position: absolute;
    transition: width 0.5s,
                height 0.5s 0.5s;
    height: 30px;
    width: 301px;
    background-color: #fff;
    margin: auto;
    left: -6px;
    right: 0;
    top: -6px;
}

button:hover:before,
button:hover:after{
    width: 0;
    height: 10px;
    transition: height 0.5s,
                width 0.5s 0.5s;
}

I hope the code is working for you. Thanks for visiting our website.

Please do not enter any spam link in the comment box.