Photo by Nick Karvounis on Unsplash
Make a click button with border animation and transition on hover using css and brand logo banner
We will make the animated button along with brand banner as below.
Step 1: Setting up the HTML structure
Start by creating a new HTML file and define the basic structure of your webpage using HTML5. This includes the <!DOCTYPE html> declaration, <html>, <head>, and <body> tags.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Button with Brand Banner</title>
<link rel="stylesheet" href="styles.css"> <!-- Link your CSS file -->
</head>
<body>
<!-- Your content will go here -->
</body>
</html>
Step 2: Creating the main section
Inside the <body> tag, create a <main> section where your button and brand banner will be displayed.
<main>
<!-- Button and brand banner will go here -->
</main>
Step 3: Designing the button
Within the <main> section, create a <div> with a class of .btn-container to hold your button. Inside this container, add a <button> element with a class of .btn for styling.
<div class="btn-container">
<button class="btn">
Click Me
<!-- Arrow container will go here -->
</button>
</div>
Step 4: Adding the arrow animation
Within the <button> element, create a <div> with a class of .arrow-container to hold the arrow animation. Inside this container, add two <span> elements: one for the arrow's background (.arrow-bg) and one for the arrow itself (.arrow).
<div class="arrow-container">
<span class="arrow-bg"></span>
<span class="arrow"></span>
</div>
Step 5: Integrating the brand banner
After the button, create another <div> with a class of .social-banner to display your brand logos. Inside this container, add <img> tags for each logo you want to display.
<div class="social-banner">
<img src="brand-logo1.png" alt="brand-logo">
<img src="brand-logo2.png" alt="brand-logo">
<img src="brand-logo3.png" alt="brand-logo">
</div>
Step 6: Styling your elements
<style>
main {
background: blue;
height: 50vh;
position: relative;
}
.btn-container {
position: absolute;
top: 50%;
left: 41%;
transform: translateY(-50%);
background: white;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
width: 169px;
height: 43px;
cursor: pointer;
}
.btn {
padding: 10px 20px;
border-radius: 20px;
border: 2px solid transparent;
background: blue;
color: white;
cursor: pointer;
position: relative;
text-align: center;
width: calc(100% - 4px);
}
.btn-container:hover {
transition: width 1s ease;
width: calc(165px + 50px);
background: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b);
animation: slidebg 1s linear infinite;
}
.btn-container:hover .btn {
text-align: left;
background: blue;
}
.btn-container:hover .arrow-container {
opacity: 1;
}
.arrow-container {
position: absolute;
height: 43px;
top: -4px;
right: -4px;
border-radius: 50%;
aspect-ratio: 1/1;
opacity: 0;
overflow: hidden;
}
.arrow-bg {
background: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b);
animation: slidebg 1s linear infinite;
position: absolute;
width: 215px;
height: 100%;
right: 0;
}
.arrow {
height: 40px;
border-radius: 50%;
background: blue;
display: block;
position: relative;
right: -2px;
top: 1.8px;
aspect-ratio: 1 / 1;
}
.arrow::after {
content: "->";
position: absolute;
top: 10px;
right: 10px;
}
.social-banner {
background: green;
position: absolute;
height: 100px;
width: 50%;
bottom: -43px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: space-between;
border-radius: 20px;
align-items: center;
padding: 0 25px;
}
.social-banner img {
height: 50px;
aspect-ratio: 1 / 1;
}
@keyframes slidebg {
to {
background-position: 215px;
}
}
</style>
Step 7: Testing your webpage
Open your HTML file in a web browser to see how your animated button and brand banner look. Make adjustments to the HTML and CSS as needed until you're satisfied with the design.
This is the final code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Button with Brand Banner</title>
<style>
main {
background: blue;
height: 50vh;
position: relative;
}
.btn-container {
position: absolute;
top: 50%;
left: 41%;
transform: translateY(-50%);
background: white;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
width: 169px;
height: 43px;
cursor: pointer;
}
.btn {
padding: 10px 20px;
border-radius: 20px;
border: 2px solid transparent;
background: blue;
color: white;
cursor: pointer;
position: relative;
text-align: center;
width: calc(100% - 4px);
}
.btn-container:hover {
transition: width 1s ease;
width: calc(165px + 50px);
background: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b);
animation: slidebg 1s linear infinite;
}
.btn-container:hover .btn {
text-align: left;
background: blue;
}
.btn-container:hover .arrow-container {
opacity: 1;
}
.arrow-container {
position: absolute;
height: 43px;
top: -4px;
right: -4px;
border-radius: 50%;
aspect-ratio: 1/1;
opacity: 0;
overflow: hidden;
}
.arrow-bg {
background: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b);
animation: slidebg 1s linear infinite;
position: absolute;
width: 215px;
height: 100%;
right: 0;
}
.arrow {
height: 40px;
border-radius: 50%;
background: blue;
display: block;
position: relative;
right: -2px;
top: 1.8px;
aspect-ratio: 1 / 1;
}
.arrow::after {
content: "->";
position: absolute;
top: 10px;
right: 10px;
}
.social-banner {
background: green;
position: absolute;
height: 100px;
width: 50%;
bottom: -43px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: space-between;
border-radius: 20px;
align-items: center;
padding: 0 25px;
}
.social-banner img {
height: 50px;
aspect-ratio: 1 / 1;
}
@keyframes slidebg {
to {
background-position: 215px;
}
}
</style>
</head>
<body>
<!-- Your content will go here -->
<main>
<!-- Button and brand banner will go here -->
<div class="btn-container">
<button class="btn">
Click Me
<!-- Arrow container will go here -->
<div class="arrow-container">
<span class="arrow-bg"></span>
<span class="arrow"></span>
</div>
</button>
</div>
<div class="social-banner">
<img src="https://i.postimg.cc/L65nyYC1/Group-2.png" alt="brand-logo">
<img src="https://i.postimg.cc/L65nyYC1/Group-2.png" alt="brand-logo">
<img src="https://i.postimg.cc/L65nyYC1/Group-2.png" alt="brand-logo">
</div>
</main>
</body>
</html>
That's it! You've successfully created an animated button along with a brand banner for your webpage. Happy coding!