Photo by Joshua Woroniecki on Unsplash
Creating Animated Buttons and Complex Hero Section Background design with HTML and CSS
In this blog, we'll explore how to create visually appealing animated buttons using HTML and CSS and make complex background designs with overflowing list items. This tutorial is beginner-friendly and will guide you step-by-step through the process. The code we will work with involves creating a hero banner, a list of items, and two animated buttons with tooltips. Let's get started!
Step 1: Setting Up the HTML Structure
We'll start by setting up the basic HTML structure. This includes a hero-banner section, a list of items, and a section for the animated buttons.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="hero-banner">
<div class="inner-box"></div>
<div class="banner-clip-path"></div>
<ul class="list">
<li class="list-item"></li>
<li class="list-item"></li>
<li class="list-item"></li>
<li class="list-item"></li>
<li class="list-item"></li>
</ul>
</div>
<div class="animation-btns-section">
<p class="heading">Animation buttons</p>
<div class="animation-btns-container">
<div class="btn-label-container">
<div class="btn-container"><a href="#" class="btn btn-tertiary" title="Upgrade a CV">Button 1<span class="ai-powered-icon"><svg>
<defs>
<clipPath id="iconClipPath">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.6204 2.07223C14.6204 2.82498 14.2191 3.48399 13.6187 3.84692V5.23798L23.1859 5.23798V9.42837H25.1423V13.6188H23.1859V17.7634L12.6405 22V17.7634H2.09519V13.6188H0V9.42837H2.09519V5.23798L11.5235 5.23798V3.87376C10.8978 3.51711 10.476 2.84393 10.476 2.07223C10.476 0.927768 11.4037 0 12.5482 0C13.6927 0 14.6204 0.927768 14.6204 2.07223ZM10.385 11.5477C10.385 12.6921 9.45723 13.6199 8.31277 13.6199C7.16831 13.6199 6.24055 12.6921 6.24055 11.5477C6.24055 10.4032 7.16831 9.47543 8.31277 9.47543C9.45723 9.47543 10.385 10.4032 10.385 11.5477ZM16.7836 13.6199C17.928 13.6199 18.8558 12.6921 18.8558 11.5477C18.8558 10.4032 17.928 9.47543 16.7836 9.47543C15.6391 9.47543 14.7113 10.4032 14.7113 11.5477C14.7113 12.6921 15.6391 13.6199 16.7836 13.6199Z"></path>
</clipPath>
</defs>
</svg></span></a></div>
<p class="btn-label-tooltip"><span class="ai-powered-text">Label</span></p>
</div>
<div class="btn-label-container-1">
<div class="btn-container"><a href="#" class="btn btn-tertiary" title="Upgrade a CV">Button 2</a></div>
<p class="btn-label"><span class="label-text"><svg width="11" height="11" viewBox="0 0 10 10" fill="none">
<path d="M4.1257 2.00348L3.83108 1.41423L3.24182 1.1196L3.83108 0.824973L4.1257 0.235718L4.42033 0.824973L5.00959 1.1196L4.42033 1.41423L4.1257 2.00348ZM1.47405 3.182L0.97687 2.20604L0.000915527 1.70886L0.97687 1.23009L1.47405 0.235718L1.95282 1.23009L2.94719 1.70886L1.95282 2.20604L1.47405 3.182ZM7.95587 5.53902L8.43464 6.53339L9.42901 7.01216L8.43464 7.50934L7.95587 8.4853L7.45868 7.50934L6.48273 7.01216L7.45868 6.53339L7.95587 5.53902Z" fill="url(#paint0_linear_6897_39950)"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.14737 0.147314C8.06602 0.0659547 7.93411 0.0659544 7.85275 0.147314L0.147375 7.85269C0.0660161 7.93404 0.0660158 8.06595 0.147375 8.14731L1.85275 9.85269C1.93411 9.93404 2.06602 9.93405 2.14737 9.85269L9.85275 2.14731C9.93411 2.06595 9.93411 1.93405 9.85275 1.85269L8.14737 0.147314ZM8.14736 1.48065C8.066 1.39929 7.93409 1.39929 7.85273 1.48065L6.14736 3.18602C6.066 3.26738 6.066 3.39929 6.14736 3.48065L6.5194 3.85269C6.60076 3.93405 6.73267 3.93405 6.81403 3.85269L8.5194 2.14732C8.60076 2.06596 8.60076 1.93405 8.5194 1.85269L8.14736 1.48065Z" fill="url(#paint1_linear_6897_39950)"></path>
<defs>
<linearGradient id="paint0_linear_6897_39950" x1="7.54339" y1="-0.176761" x2="4.1503" y2="10.4458" gradientUnits="userSpaceOnUse">
<stop stop-color="#EC407A"></stop>
<stop offset="0.5" stop-color="#F56600"></stop>
<stop offset="1" stop-color="#F2D100"></stop>
</linearGradient>
<linearGradient id="paint1_linear_6897_39950" x1="10.0001" y1="1.2" x2="1.0834" y2="-0.467974" gradientUnits="userSpaceOnUse">
<stop stop-color="#EC407A"></stop>
<stop offset="0.5" stop-color="#F56600"></stop>
<stop offset="1" stop-color="#F2D100"></stop>
</linearGradient>
</defs>
</svg>Label</span></p>
</div>
</div>
</div>
</body>
</html>
Step 2: Adding the CSS Styles
Next, we'll add the CSS to style the hero banner, and list items, and buttons. We'll also include the animations for the buttons.
<style>
.hero-banner {
overflow: hidden;
position: relative;
background: linear-gradient(225deg, rgba(18, 146, 163, 0.98) 0%, rgb(1, 155, 161) 100%);
z-index: 1;
height: 600px;
justify-content: center;
display: flex;
}
.hero-banner::before,
.hero-banner::after {
content: "";
position: absolute;
height: 155px;
bottom: 0px;
width: 100%;
}
.hero-banner::before {
left: 0px;
background: rgba(2, 69, 81, 0.14);
clip-path: polygon(0px 0px, 0% 100%, 100% 100%);
z-index: 0;
}
.hero-banner::after {
right: 0px;
background: rgba(1, 67, 79, 0.48);
clip-path: polygon(100% 0px, 0% 100%, 100% 100%);
z-index: -1;
}
.inner-box::before {
content: "";
background-repeat: repeat;
background-blend-mode: soft-light;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="57px" height="49px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"><g><path style="opacity:0.428" fill="%23080808" d="M 17.5,-0.5 C 24.5,-0.5 31.5,-0.5 38.5,-0.5C 39.4678,2.02558 38.6345,2.69225 36,1.5C 34.4735,4.57838 31.9735,6.41172 28.5,7C 29.056,7.38258 29.3893,7.88258 29.5,8.5C 28.4415,9.60023 27.6082,10.9336 27,12.5C 26.7679,11.2625 26.2679,10.2625 25.5,9.5C 24.4647,7.79505 24.4647,6.12838 25.5,4.5C 23.7145,2.07764 22.0478,2.07764 20.5,4.5C 18.535,1.88025 17.035,2.21359 16,5.5C 14.3374,3.11069 14.8374,1.11069 17.5,-0.5 Z"/></g><g><path style="opacity:0.393" fill="%23060606" d="M 40.5,-0.5 C 42.8333,-0.5 45.1667,-0.5 47.5,-0.5C 47.67,0.822066 47.3366,1.98873 46.5,3C 48.0739,3.35297 49.7406,4.01964 51.5,5C 49.8812,6.92317 48.0479,7.42317 46,6.5C 43.6681,8.20295 41.8347,10.203 40.5,12.5C 39.6618,12.1583 39.3284,11.4916 39.5,10.5C 40.8069,9.19837 40.8069,7.86503 39.5,6.5C 40.6507,5.26899 41.8173,5.26899 43,6.5C 43.3742,5.58377 43.8742,4.75044 44.5,4C 43.9402,2.37973 42.6068,0.879729 40.5,-0.5 Z"/></g><g><path style="opacity:0.403" fill="%23080808" d="M -0.5,-0.5 C 4.16667,-0.5 8.83333,-0.5 13.5,-0.5C 13.6068,1.37857 13.1068,1.7119 12,0.5C 11.5,1 11,1.5 10.5,2C 12.6785,2.44185 13.3452,3.44185 12.5,5C 13.756,5.41691 14.4226,6.25025 14.5,7.5C 13.5604,9.61246 12.3937,11.6125 11,13.5C 10.3333,12.1667 9.33333,11.1667 8,10.5C 7.14998,11.4239 6.14998,11.4239 5,10.5C 4.5,10.6667 4,10.8333 3.5,11C 4.10949,13.0581 5.10949,13.8914 6.5,13.5C 6.19238,14.3081 5.69238,14.9747 5,15.5C 3.29424,14.6921 2.46091,13.3588 2.5,11.5C 1.5,11.5 0.5,11.5 -0.5,11.5C -0.5,7.5 -0.5,3.5 -0.5,-0.5 Z"/></g><g><path style="opacity:0.424" fill="%230d0d0d" d="M 38.5,-0.5 C 39.1667,-0.5 39.8333,-0.5 40.5,-0.5C 42.6068,0.879729 43.9402,2.37973 44.5,4C 43.8742,4.75044 43.3742,5.58377 43,6.5C 41.8173,5.26899 40.6507,5.26899 39.5,6.5C 40.8069,7.86503 40.8069,9.19837 39.5,10.5C 38.8826,10.3893 38.3826,10.056 38,9.5C 35.3333,10.8333 32.6667,12.1667 30,13.5C 29.5172,12.552 29.3505,11.552 29.5,10.5C 30.9778,10.762 32.3112,10.4287 33.5,9.5C 32.3088,9.59534 30.9755,9.262 29.5,8.5C 29.3893,7.88258 29.056,7.38258 28.5,7C 31.9735,6.41172 34.4735,4.57838 36,1.5C 38.6345,2.69225 39.4678,2.02558 38.5,-0.5 Z"/></g><g><path style="opacity:0.409" fill="%230f0f0f" d="M 13.5,-0.5 C 14.8333,-0.5 16.1667,-0.5 17.5,-0.5C 14.8374,1.11069 14.3374,3.11069 16,5.5C 17.035,2.21359 18.535,1.88025 20.5,4.5C 22.0478,2.07764 23.7145,2.07764 25.5,4.5C 24.4647,6.12838 24.4647,7.79505 25.5,9.5C 25.5654,9.93822 25.3988,10.2716 25,10.5C 23.4301,9.38598 22.0968,8.05264 21,6.5C 20.2515,8.33246 19.2515,9.99913 18,11.5C 17.2303,10.4019 16.397,10.4019 15.5,11.5C 15.9038,10.2436 16.5705,9.0769 17.5,8C 17.3333,7.5 17.1667,7 17,6.5C 16.3292,7.25244 15.4959,7.58577 14.5,7.5C 14.4226,6.25025 13.756,5.41691 12.5,5C 13.3452,3.44185 12.6785,2.44185 10.5,2C 11,1.5 11.5,1 12,0.5C 13.1068,1.7119 13.6068,1.37857 13.5,-0.5 Z"/></g><g><path style="opacity:0.426" fill="%230c0c0c" d="M 47.5,-0.5 C 50.5,-0.5 53.5,-0.5 56.5,-0.5C 56.5,4.5 56.5,9.5 56.5,14.5C 55.1667,13.5 53.8333,12.5 52.5,11.5C 53.8412,6.96746 53.3412,6.63413 51,10.5C 50.3333,9.83333 49.6667,9.16667 49,8.5C 46.2145,10.0309 43.3812,11.3643 40.5,12.5C 41.8347,10.203 43.6681,8.20295 46,6.5C 48.0479,7.42317 49.8812,6.92317 51.5,5C 49.7406,4.01964 48.0739,3.35297 46.5,3C 47.3366,1.98873 47.67,0.822066 47.5,-0.5 Z"/></g><g><path style="opacity:0.422" fill="%23080808" d="M 25.5,9.5 C 26.2679,10.2625 26.7679,11.2625 27,12.5C 27.6082,10.9336 28.4415,9.60023 29.5,8.5C 30.9755,9.262 32.3088,9.59534 33.5,9.5C 32.3112,10.4287 30.9778,10.762 29.5,10.5C 29.3505,11.552 29.5172,12.552 30,13.5C 32.6667,12.1667 35.3333,10.8333 38,9.5C 38.3826,10.056 38.8826,10.3893 39.5,10.5C 39.3284,11.4916 39.6618,12.1583 40.5,12.5C 39.9924,14.2327 39.159,14.566 38,13.5C 37.5357,14.0944 37.369,14.7611 37.5,15.5C 37.5654,15.9382 37.3988,16.2716 37,16.5C 36.5814,15.3279 35.9147,14.3279 35,13.5C 34.8348,15.678 35.6682,17.5114 37.5,19C 36.7476,19.6708 36.4142,20.5041 36.5,21.5C 35.1667,21.5 33.8333,21.5 32.5,21.5C 34.0505,18.8283 33.5505,16.4949 31,14.5C 30.0053,15.0659 29.172,15.7326 28.5,16.5C 28.1667,16.5 27.8333,16.5 27.5,16.5C 25.0576,16.6463 24.3909,15.813 25.5,14C 23.6969,13.3632 22.3636,12.1965 21.5,10.5C 20.3348,11.4911 19.1681,12.4911 18,13.5C 16.5,13 15,12.5 13.5,12C 14.0944,11.5357 14.7611,11.369 15.5,11.5C 16.397,10.4019 17.2303,10.4019 18,11.5C 19.2515,9.99913 20.2515,8.33246 21,6.5C 22.0968,8.05264 23.4301,9.38598 25,10.5C 25.3988,10.2716 25.5654,9.93822 25.5,9.5 Z"/></g><g><path style="opacity:0.384" fill="%230f0f0f" d="M 52.5,11.5 C 53.8333,12.5 55.1667,13.5 56.5,14.5C 56.5,15.5 56.5,16.5 56.5,17.5C 55.8501,17.1961 55.1835,16.8627 54.5,16.5C 53.7189,17.7287 53.2189,19.062 53,20.5C 52.6667,19.8333 52.3333,19.1667 52,18.5C 50.9505,19.5171 49.7839,19.6838 48.5,19C 49.6721,18.5814 50.6721,17.9147 51.5,17C 50.7877,15.575 50.621,14.075 51,12.5C 49.3684,13.5282 47.8684,14.5282 46.5,15.5C 45.8333,14.8333 45.1667,14.1667 44.5,13.5C 46.9608,12.469 49.6275,11.8023 52.5,11.5 Z"/></g><g><path style="opacity:0.435" fill="%23060606" d="M 52.5,11.5 C 49.6275,11.8023 46.9608,12.469 44.5,13.5C 42.2543,14.4552 39.921,15.1218 37.5,15.5C 37.369,14.7611 37.5357,14.0944 38,13.5C 39.159,14.566 39.9924,14.2327 40.5,12.5C 43.3812,11.3643 46.2145,10.0309 49,8.5C 49.6667,9.16667 50.3333,9.83333 51,10.5C 53.3412,6.63413 53.8412,6.96746 52.5,11.5 Z"/></g><g><path style="opacity:0.416" fill="%230c0c0c" d="M 15.5,11.5 C 14.7611,11.369 14.0944,11.5357 13.5,12C 15,12.5 16.5,13 18,13.5C 19.1681,12.4911 20.3348,11.4911 21.5,10.5C 22.3636,12.1965 23.6969,13.3632 25.5,14C 24.3909,15.813 25.0576,16.6463 27.5,16.5C 27.631,17.2389 27.4643,17.9056 27,18.5C 24.5615,17.1337 24.0615,17.6337 25.5,20C 25.0946,20.9454 24.428,21.6121 23.5,22C 26.0515,23.5158 25.7181,24.3491 22.5,24.5C 22.3893,23.8826 22.056,23.3826 21.5,23C 16.279,23.7886 15.6124,22.4553 19.5,19C 17.4311,18.6758 17.0977,17.8425 18.5,16.5C 16.7596,17.6208 14.4263,17.6208 11.5,16.5C 8.80781,17.2112 6.30781,17.2112 4,16.5C 2.61524,17.5505 1.61524,18.8839 1,20.5C 0.721579,19.5842 0.221579,18.9175 -0.5,18.5C -0.5,16.1667 -0.5,13.8333 -0.5,11.5C 0.5,11.5 1.5,11.5 2.5,11.5C 2.46091,13.3588 3.29424,14.6921 5,15.5C 5.69238,14.9747 6.19238,14.3081 6.5,13.5C 5.10949,13.8914 4.10949,13.0581 3.5,11C 4,10.8333 4.5,10.6667 5,10.5C 6.14998,11.4239 7.14998,11.4239 8,10.5C 9.33333,11.1667 10.3333,12.1667 11,13.5C 12.3937,11.6125 13.5604,9.61246 14.5,7.5C 15.4959,7.58577 16.3292,7.25244 17,6.5C 17.1667,7 17.3333,7.5 17.5,8C 16.5705,9.0769 15.9038,10.2436 15.5,11.5 Z"/></g><g><path style="opacity:0.416" fill="%23050505" d="M 27.5,16.5 C 27.8333,16.5 28.1667,16.5 28.5,16.5C 29.3764,16.3691 30.0431,16.7025 30.5,17.5C 31.1654,19.1012 31.4988,20.6012 31.5,22C 30.2161,22.6838 29.0495,22.5171 28,21.5C 26.3831,22.5358 26.2164,23.7025 27.5,25C 26.552,25.4828 25.552,25.6495 24.5,25.5C 23.8333,25.5 23.1667,25.5 22.5,25.5C 22.5,25.1667 22.5,24.8333 22.5,24.5C 25.7181,24.3491 26.0515,23.5158 23.5,22C 24.428,21.6121 25.0946,20.9454 25.5,20C 24.0615,17.6337 24.5615,17.1337 27,18.5C 27.4643,17.9056 27.631,17.2389 27.5,16.5 Z"/></g><g><path style="opacity:0.402" fill="%23060606" d="M 22.5,24.5 C 21.8186,26.1585 20.9853,27.8251 20,29.5C 20.0773,28.2624 19.9106,27.2624 19.5,26.5C 18.8182,27.2427 18.1515,27.9094 17.5,28.5C 18.1272,25.1359 16.7939,23.1359 13.5,22.5C 12.2867,22.7472 11.62,23.4138 11.5,24.5C 10.2801,22.9504 10.2801,21.2837 11.5,19.5C 12.625,18.6522 12.625,17.6522 11.5,16.5C 14.4263,17.6208 16.7596,17.6208 18.5,16.5C 17.0977,17.8425 17.4311,18.6758 19.5,19C 15.6124,22.4553 16.279,23.7886 21.5,23C 22.056,23.3826 22.3893,23.8826 22.5,24.5 Z"/></g><g><path style="opacity:0.386" fill="%23090909" d="M 11.5,16.5 C 12.625,17.6522 12.625,18.6522 11.5,19.5C 9.90997,21.4746 8.7433,23.8079 8,26.5C 6.82927,23.9622 5.32927,23.4622 3.5,25C 7.5,25.6667 7.5,26.3333 3.5,27C 5.19322,27.8466 6.85989,28.6799 8.5,29.5C 8.2252,31.8418 7.39186,31.8418 6,29.5C 5.48065,30.5156 4.64732,31.1822 3.5,31.5C 1.95894,30.7142 0.625602,29.7142 -0.5,28.5C -0.5,25.1667 -0.5,21.8333 -0.5,18.5C 0.221579,18.9175 0.721579,19.5842 1,20.5C 1.61524,18.8839 2.61524,17.5505 4,16.5C 6.30781,17.2112 8.80781,17.2112 11.5,16.5 Z"/></g><g><path style="opacity:0.423" fill="%230a0a0a" d="M 37.5,15.5 C 39.921,15.1218 42.2543,14.4552 44.5,13.5C 45.1667,14.1667 45.8333,14.8333 46.5,15.5C 47.3629,16.9403 47.3629,18.2736 46.5,19.5C 49.0485,20.2842 51.3819,21.4508 53.5,23C 51.9669,24.8081 50.3003,25.3081 48.5,24.5C 47.2438,24.4614 46.2438,24.9614 45.5,26C 46.1095,28.0581 47.1095,28.8914 48.5,28.5C 48,28.8333 47.5,29.1667 47,29.5C 45.317,27.6495 43.4837,25.9828 41.5,24.5C 41.5594,22.2355 40.7261,21.9022 39,23.5C 37.699,23.3613 36.8656,22.6946 36.5,21.5C 36.4142,20.5041 36.7476,19.6708 37.5,19C 35.6682,17.5114 34.8348,15.678 35,13.5C 35.9147,14.3279 36.5814,15.3279 37,16.5C 37.3988,16.2716 37.5654,15.9382 37.5,15.5 Z"/></g><g><path style="opacity:0.41" fill="%23070707" d="M 56.5,17.5 C 56.5,19.8333 56.5,22.1667 56.5,24.5C 55.1667,25.1667 53.8333,25.8333 52.5,26.5C 52.1667,26.5 51.8333,26.5 51.5,26.5C 50.1266,26.6567 48.7932,26.49 47.5,26C 48.056,25.6174 48.3893,25.1174 48.5,24.5C 50.3003,25.3081 51.9669,24.8081 53.5,23C 51.3819,21.4508 49.0485,20.2842 46.5,19.5C 47.3629,18.2736 47.3629,16.9403 46.5,15.5C 47.8684,14.5282 49.3684,13.5282 51,12.5C 50.621,14.075 50.7877,15.575 51.5,17C 50.6721,17.9147 49.6721,18.5814 48.5,19C 49.7839,19.6838 50.9505,19.5171 52,18.5C 52.3333,19.1667 52.6667,19.8333 53,20.5C 53.2189,19.062 53.7189,17.7287 54.5,16.5C 55.1835,16.8627 55.8501,17.1961 56.5,17.5 Z"/></g><g><path style="opacity:0.43" fill="%230d0d0d" d="M 36.5,21.5 C 36.8656,22.6946 37.699,23.3613 39,23.5C 40.7261,21.9022 41.5594,22.2355 41.5,24.5C 39.3023,24.4088 38.9689,25.0755 40.5,26.5C 38.5165,26.6168 36.8498,25.9501 35.5,24.5C 34.0944,25.6682 32.9277,25.3348 32,23.5C 30.7453,24.2106 29.5786,25.044 28.5,26C 28.8333,26.3333 29.1667,26.6667 29.5,27C 28.552,27.4828 27.552,27.6495 26.5,27.5C 26.19,26.2617 25.69,26.2617 25,27.5C 24.5357,26.9056 24.369,26.2389 24.5,25.5C 25.552,25.6495 26.552,25.4828 27.5,25C 26.2164,23.7025 26.3831,22.5358 28,21.5C 29.0495,22.5171 30.2161,22.6838 31.5,22C 31.4988,20.6012 31.1654,19.1012 30.5,17.5C 30.0431,16.7025 29.3764,16.3691 28.5,16.5C 29.172,15.7326 30.0053,15.0659 31,14.5C 33.5505,16.4949 34.0505,18.8283 32.5,21.5C 33.8333,21.5 35.1667,21.5 36.5,21.5 Z"/></g><g><path style="opacity:0.422" fill="%23050505" d="M 40.5,26.5 C 40.9382,26.4346 41.2716,26.6012 41.5,27C 40.2341,27.3095 39.0674,27.8095 38,28.5C 37.1627,26.9926 35.9961,26.4926 34.5,27C 34.2592,28.5625 34.7592,30.0625 36,31.5C 36.7253,29.842 37.892,29.342 39.5,30C 37.3553,30.7431 37.1886,31.5765 39,32.5C 40.1516,30.4883 41.3183,30.3217 42.5,32C 41.9341,32.9947 41.2674,33.828 40.5,34.5C 39.1155,33.1991 37.6155,33.1991 36,34.5C 35.7216,33.5842 35.2216,32.9175 34.5,32.5C 33.1575,30.6954 32.3241,28.6954 32,26.5C 31.6667,27.8333 31.3333,29.1667 31,30.5C 29.6897,29.1031 28.1897,28.1031 26.5,27.5C 27.552,27.6495 28.552,27.4828 29.5,27C 29.1667,26.6667 28.8333,26.3333 28.5,26C 29.5786,25.044 30.7453,24.2106 32,23.5C 32.9277,25.3348 34.0944,25.6682 35.5,24.5C 36.8498,25.9501 38.5165,26.6168 40.5,26.5 Z"/></g><g><path style="opacity:0.39" fill="%23101010" d="M 11.5,19.5 C 10.2801,21.2837 10.2801,22.9504 11.5,24.5C 12.552,24.3505 13.552,24.5172 14.5,25C 11.3113,25.9808 10.978,27.3141 13.5,29C 12.9152,30.3024 12.2485,31.469 11.5,32.5C 11.5,32.1667 11.5,31.8333 11.5,31.5C 11.631,30.7611 11.4643,30.0944 11,29.5C 10.2303,30.5981 9.39695,30.5981 8.5,29.5C 6.85989,28.6799 5.19322,27.8466 3.5,27C 7.5,26.3333 7.5,25.6667 3.5,25C 5.32927,23.4622 6.82927,23.9622 8,26.5C 8.7433,23.8079 9.90997,21.4746 11.5,19.5 Z"/></g><g><path style="opacity:0.398" fill="%23090909" d="M 17.5,28.5 C 17.9038,29.7564 18.5705,30.9231 19.5,32C 17.3101,33.3942 15.9767,34.8942 15.5,36.5C 14.391,36.4431 13.391,36.1098 12.5,35.5C 12.4431,34.391 12.1098,33.391 11.5,32.5C 12.2485,31.469 12.9152,30.3024 13.5,29C 10.978,27.3141 11.3113,25.9808 14.5,25C 13.552,24.5172 12.552,24.3505 11.5,24.5C 11.62,23.4138 12.2867,22.7472 13.5,22.5C 16.7939,23.1359 18.1272,25.1359 17.5,28.5 Z"/></g><g><path style="opacity:0.359" fill="%230e0e0e" d="M 22.5,24.5 C 22.5,24.8333 22.5,25.1667 22.5,25.5C 23.2341,26.7079 23.5674,28.0413 23.5,29.5C 21.0752,29.684 21.0752,30.3507 23.5,31.5C 23.1667,32.1667 22.8333,32.8333 22.5,33.5C 19.8307,33.7489 17.4973,35.0822 15.5,37.5C 15.5,37.1667 15.5,36.8333 15.5,36.5C 15.9767,34.8942 17.3101,33.3942 19.5,32C 18.5705,30.9231 17.9038,29.7564 17.5,28.5C 18.1515,27.9094 18.8182,27.2427 19.5,26.5C 19.9106,27.2624 20.0773,28.2624 20,29.5C 20.9853,27.8251 21.8186,26.1585 22.5,24.5 Z"/></g><g><path style="opacity:0.473" fill="%230e0e0e" d="M 22.5,25.5 C 23.1667,25.5 23.8333,25.5 24.5,25.5C 24.369,26.2389 24.5357,26.9056 25,27.5C 25.69,26.2617 26.19,26.2617 26.5,27.5C 28.1897,28.1031 29.6897,29.1031 31,30.5C 31.3333,29.1667 31.6667,27.8333 32,26.5C 32.3241,28.6954 33.1575,30.6954 34.5,32.5C 33.5266,32.9867 32.5266,33.4867 31.5,34C 32.756,34.4169 33.4226,35.2502 33.5,36.5C 33.1667,36.5 32.8333,36.5 32.5,36.5C 30.9217,35.9344 29.5884,34.9344 28.5,33.5C 29.5294,33.7036 30.5294,33.2036 31.5,32C 30.354,31.3551 29.354,30.5217 28.5,29.5C 26.6442,29.7923 24.9776,29.7923 23.5,29.5C 23.5674,28.0413 23.2341,26.7079 22.5,25.5 Z"/></g><g><path style="opacity:0.388" fill="%23060606" d="M 51.5,26.5 C 51.8333,26.5 52.1667,26.5 52.5,26.5C 52.6107,27.1174 52.944,27.6174 53.5,28C 52.0439,28.4226 51.5439,29.2559 52,30.5C 52.3333,30.1667 52.6667,29.8333 53,29.5C 53.5,30.6667 54.3333,31.5 55.5,32C 53.2464,33.0539 52.913,34.5539 54.5,36.5C 54.0431,37.2975 53.3764,37.6309 52.5,37.5C 52.6309,36.6236 52.2975,35.9569 51.5,35.5C 50.0295,36.3805 49.1962,37.7139 49,39.5C 48.586,39.0426 48.086,38.7093 47.5,38.5C 46.8182,39.2427 46.1515,39.9094 45.5,40.5C 45.5,39.5 45.5,38.5 45.5,37.5C 45.1583,36.6618 44.4916,36.3284 43.5,36.5C 43.6584,31.5692 44.825,30.9026 47,34.5C 48.8241,33.2513 48.6574,32.0847 46.5,31C 47.938,30.7811 49.2713,30.2811 50.5,29.5C 50.2907,28.914 49.9574,28.414 49.5,28C 50.4158,27.7216 51.0825,27.2216 51.5,26.5 Z"/></g><g><path style="opacity:0.39" fill="%23070707" d="M -0.5,28.5 C 0.625602,29.7142 1.95894,30.7142 3.5,31.5C 4.64732,31.1822 5.48065,30.5156 6,29.5C 7.39186,31.8418 8.2252,31.8418 8.5,29.5C 9.39695,30.5981 10.2303,30.5981 11,29.5C 11.4643,30.0944 11.631,30.7611 11.5,31.5C 10.2502,31.5774 9.41691,32.244 9,33.5C 8.28248,32.5494 7.44915,32.3828 6.5,33C 7.69559,33.6543 7.69559,34.1543 6.5,34.5C 5.16667,33.8333 3.83333,33.1667 2.5,32.5C 1.35536,33.7757 1.35536,35.109 2.5,36.5C 1.83333,37.1667 1.16667,37.8333 0.5,38.5C 1.52066,39.9014 2.52066,41.2347 3.5,42.5C 3.47008,43.4972 3.97008,44.1639 5,44.5C 6.16176,43.8132 7.32843,43.6466 8.5,44C 7.16667,44.6667 7.16667,45.3333 8.5,46C 6.76499,46.6514 5.09833,46.4847 3.5,45.5C 2.61432,46.325 2.28099,47.325 2.5,48.5C 1.5,48.5 0.5,48.5 -0.5,48.5C -0.5,41.8333 -0.5,35.1667 -0.5,28.5 Z"/></g><g><path style="opacity:0.4" fill="%230d0d0d" d="M 41.5,24.5 C 43.4837,25.9828 45.317,27.6495 47,29.5C 47.5,29.1667 48,28.8333 48.5,28.5C 47.1095,28.8914 46.1095,28.0581 45.5,26C 46.2438,24.9614 47.2438,24.4614 48.5,24.5C 48.3893,25.1174 48.056,25.6174 47.5,26C 48.7932,26.49 50.1266,26.6567 51.5,26.5C 51.0825,27.2216 50.4158,27.7216 49.5,28C 49.9574,28.414 50.2907,28.914 50.5,29.5C 49.2713,30.2811 47.938,30.7811 46.5,31C 48.6574,32.0847 48.8241,33.2513 47,34.5C 44.825,30.9026 43.6584,31.5692 43.5,36.5C 41.5856,35.8153 39.5856,35.3153 37.5,35C 38.448,34.5172 39.448,34.3505 40.5,34.5C 41.2674,33.828 41.9341,32.9947 42.5,32C 41.3183,30.3217 40.1516,30.4883 39,32.5C 37.1886,31.5765 37.3553,30.7431 39.5,30C 37.892,29.342 36.7253,29.842 36,31.5C 34.7592,30.0625 34.2592,28.5625 34.5,27C 35.9961,26.4926 37.1627,26.9926 38,28.5C 39.0674,27.8095 40.2341,27.3095 41.5,27C 41.2716,26.6012 40.9382,26.4346 40.5,26.5C 38.9689,25.0755 39.3023,24.4088 41.5,24.5 Z"/></g><g><path style="opacity:0.411" fill="%230d0d0d" d="M 11.5,31.5 C 11.5,31.8333 11.5,32.1667 11.5,32.5C 12.1098,33.391 12.4431,34.391 12.5,35.5C 10.5829,36.1164 9.4162,37.4497 9,39.5C 7.13545,37.1449 4.96878,36.9782 2.5,39C 3.7101,40.0391 4.7101,41.2058 5.5,42.5C 4.83333,42.5 4.16667,42.5 3.5,42.5C 2.52066,41.2347 1.52066,39.9014 0.5,38.5C 1.16667,37.8333 1.83333,37.1667 2.5,36.5C 1.35536,35.109 1.35536,33.7757 2.5,32.5C 3.83333,33.1667 5.16667,33.8333 6.5,34.5C 7.69559,34.1543 7.69559,33.6543 6.5,33C 7.44915,32.3828 8.28248,32.5494 9,33.5C 9.41691,32.244 10.2502,31.5774 11.5,31.5 Z"/></g><g><path style="opacity:0.407" fill="%23090909" d="M 34.5,32.5 C 35.2216,32.9175 35.7216,33.5842 36,34.5C 37.6155,33.1991 39.1155,33.1991 40.5,34.5C 39.448,34.3505 38.448,34.5172 37.5,35C 39.5856,35.3153 41.5856,35.8153 43.5,36.5C 44.4916,36.3284 45.1583,36.6618 45.5,37.5C 44.7784,37.9175 44.2784,38.5842 44,39.5C 42.5295,38.7334 41.0295,38.0668 39.5,37.5C 37.2239,37.7565 36.0572,39.0898 36,41.5C 35.1534,39.8068 34.3201,38.1401 33.5,36.5C 33.4226,35.2502 32.756,34.4169 31.5,34C 32.5266,33.4867 33.5266,32.9867 34.5,32.5 Z"/></g><g><path style="opacity:0.424" fill="%23080808" d="M 32.5,36.5 C 32.631,37.2389 32.4643,37.9056 32,38.5C 29.4058,37.5376 27.4058,35.8709 26,33.5C 25.0805,33.9302 24.2472,34.2635 23.5,34.5C 24.325,35.3857 25.325,35.719 26.5,35.5C 26.1412,37.7659 26.8078,39.5993 28.5,41C 28.2716,41.3988 27.9382,41.5654 27.5,41.5C 25.5891,41.4257 24.4224,40.4257 24,38.5C 22.4894,39.564 22.3228,40.8974 23.5,42.5C 22.5768,41.6971 21.5768,41.5304 20.5,42C 22.0585,44.0519 23.3918,46.2185 24.5,48.5C 21.5,48.5 18.5,48.5 15.5,48.5C 17.1002,47.3556 18.7669,46.1889 20.5,45C 19.175,45.1484 18.0084,44.9817 17,44.5C 15.7978,42.3225 15.2978,39.9892 15.5,37.5C 17.4973,35.0822 19.8307,33.7489 22.5,33.5C 22.8333,32.8333 23.1667,32.1667 23.5,31.5C 21.0752,30.3507 21.0752,29.684 23.5,29.5C 24.9776,29.7923 26.6442,29.7923 28.5,29.5C 29.354,30.5217 30.354,31.3551 31.5,32C 30.5294,33.2036 29.5294,33.7036 28.5,33.5C 29.5884,34.9344 30.9217,35.9344 32.5,36.5 Z"/></g><g><path style="opacity:0.42" fill="%230d0d0d" d="M 12.5,35.5 C 13.391,36.1098 14.391,36.4431 15.5,36.5C 15.5,36.8333 15.5,37.1667 15.5,37.5C 15.2978,39.9892 15.7978,42.3225 17,44.5C 18.0084,44.9817 19.175,45.1484 20.5,45C 18.7669,46.1889 17.1002,47.3556 15.5,48.5C 14.8333,48.5 14.1667,48.5 13.5,48.5C 13.8511,46.1305 14.0178,43.7972 14,41.5C 13.019,47.5327 11.519,47.866 9.5,42.5C 11.1084,43.5381 12.1084,42.8714 12.5,40.5C 11.4647,38.8716 11.4647,37.205 12.5,35.5 Z"/></g><g><path style="opacity:0.384" fill="%230e0e0e" d="M 32.5,36.5 C 32.8333,36.5 33.1667,36.5 33.5,36.5C 34.3201,38.1401 35.1534,39.8068 36,41.5C 36.0572,39.0898 37.2239,37.7565 39.5,37.5C 39.3893,38.1174 39.056,38.6174 38.5,39C 40.4414,40.8159 41.1081,42.8159 40.5,45C 38.0669,44.2129 36.0669,44.3795 34.5,45.5C 31.9818,44.4891 31.9818,43.1557 34.5,41.5C 33.7579,40.7132 32.9246,40.0465 32,39.5C 31.3333,40.8333 30.6667,40.8333 30,39.5C 29.7508,40.624 29.2508,41.624 28.5,42.5C 27.8933,42.3764 27.56,42.0431 27.5,41.5C 27.9382,41.5654 28.2716,41.3988 28.5,41C 26.8078,39.5993 26.1412,37.7659 26.5,35.5C 25.325,35.719 24.325,35.3857 23.5,34.5C 24.2472,34.2635 25.0805,33.9302 26,33.5C 27.4058,35.8709 29.4058,37.5376 32,38.5C 32.4643,37.9056 32.631,37.2389 32.5,36.5 Z"/></g><g><path style="opacity:0.393" fill="%230c0c0c" d="M 56.5,24.5 C 56.5,30.5 56.5,36.5 56.5,42.5C 54.4689,41.4613 53.1355,39.7946 52.5,37.5C 53.3764,37.6309 54.0431,37.2975 54.5,36.5C 52.913,34.5539 53.2464,33.0539 55.5,32C 54.3333,31.5 53.5,30.6667 53,29.5C 52.6667,29.8333 52.3333,30.1667 52,30.5C 51.5439,29.2559 52.0439,28.4226 53.5,28C 52.944,27.6174 52.6107,27.1174 52.5,26.5C 53.8333,25.8333 55.1667,25.1667 56.5,24.5 Z"/></g><g><path style="opacity:0.427" fill="%23070707" d="M 39.5,37.5 C 41.0295,38.0668 42.5295,38.7334 44,39.5C 44.2784,38.5842 44.7784,37.9175 45.5,37.5C 45.5,38.5 45.5,39.5 45.5,40.5C 44.9473,44.4557 44.1139,44.4557 43,40.5C 42.6667,40.8333 42.3333,41.1667 42,41.5C 42.7916,43.8462 42.6249,46.1795 41.5,48.5C 38.8333,48.5 36.1667,48.5 33.5,48.5C 33.5,48.1667 33.5,47.8333 33.5,47.5C 34.3382,47.1583 34.6716,46.4916 34.5,45.5C 36.0669,44.3795 38.0669,44.2129 40.5,45C 41.1081,42.8159 40.4414,40.8159 38.5,39C 39.056,38.6174 39.3893,38.1174 39.5,37.5 Z"/></g><g><path style="opacity:0.476" fill="%23080808" d="M 52.5,37.5 C 53.1355,39.7946 54.4689,41.4613 56.5,42.5C 56.5,44.5 56.5,46.5 56.5,48.5C 54.5,48.5 52.5,48.5 50.5,48.5C 51.8069,47.1984 51.8069,45.865 50.5,44.5C 51.7161,43.9041 53.0494,43.7374 54.5,44C 53.6667,43.1667 52.8333,42.3333 52,41.5C 48.8897,42.6734 48.723,42.1734 51.5,40C 50.1175,38.5391 50.4508,37.7058 52.5,37.5 Z"/></g><g><path style="opacity:0.345" fill="%23080808" d="M 12.5,35.5 C 11.4647,37.205 11.4647,38.8716 12.5,40.5C 12.1084,42.8714 11.1084,43.5381 9.5,42.5C 8.16667,42.5 6.83333,42.5 5.5,42.5C 4.7101,41.2058 3.7101,40.0391 2.5,39C 4.96878,36.9782 7.13545,37.1449 9,39.5C 9.4162,37.4497 10.5829,36.1164 12.5,35.5 Z"/></g><g><path style="opacity:0.386" fill="%23060606" d="M 27.5,41.5 C 27.56,42.0431 27.8933,42.3764 28.5,42.5C 29.2508,41.624 29.7508,40.624 30,39.5C 30.6667,40.8333 31.3333,40.8333 32,39.5C 32.9246,40.0465 33.7579,40.7132 34.5,41.5C 31.9818,43.1557 31.9818,44.4891 34.5,45.5C 34.6716,46.4916 34.3382,47.1583 33.5,47.5C 32.352,46.8359 31.0187,46.6692 29.5,47C 31.9434,44.4417 31.4434,43.6083 28,44.5C 27.3333,43.8333 26.6667,43.1667 26,42.5C 25.0228,43.7736 24.1894,43.7736 23.5,42.5C 22.3228,40.8974 22.4894,39.564 24,38.5C 24.4224,40.4257 25.5891,41.4257 27.5,41.5 Z"/></g><g><path style="opacity:0.407" fill="%230a0a0a" d="M 13.5,48.5 C 9.83333,48.5 6.16667,48.5 2.5,48.5C 2.28099,47.325 2.61432,46.325 3.5,45.5C 5.09833,46.4847 6.76499,46.6514 8.5,46C 7.16667,45.3333 7.16667,44.6667 8.5,44C 7.32843,43.6466 6.16176,43.8132 5,44.5C 3.97008,44.1639 3.47008,43.4972 3.5,42.5C 4.16667,42.5 4.83333,42.5 5.5,42.5C 6.83333,42.5 8.16667,42.5 9.5,42.5C 11.519,47.866 13.019,47.5327 14,41.5C 14.0178,43.7972 13.8511,46.1305 13.5,48.5 Z"/></g><g><path style="opacity:0.416" fill="%230e0e0e" d="M 23.5,42.5 C 24.1894,43.7736 25.0228,43.7736 26,42.5C 26.6667,43.1667 27.3333,43.8333 28,44.5C 31.4434,43.6083 31.9434,44.4417 29.5,47C 31.0187,46.6692 32.352,46.8359 33.5,47.5C 33.5,47.8333 33.5,48.1667 33.5,48.5C 30.5,48.5 27.5,48.5 24.5,48.5C 23.3918,46.2185 22.0585,44.0519 20.5,42C 21.5768,41.5304 22.5768,41.6971 23.5,42.5 Z"/></g><g><path style="opacity:0.43" fill="%230d0d0d" d="M 52.5,37.5 C 50.4508,37.7058 50.1175,38.5391 51.5,40C 48.723,42.1734 48.8897,42.6734 52,41.5C 52.8333,42.3333 53.6667,43.1667 54.5,44C 53.0494,43.7374 51.7161,43.9041 50.5,44.5C 51.8069,45.865 51.8069,47.1984 50.5,48.5C 47.5,48.5 44.5,48.5 41.5,48.5C 42.6249,46.1795 42.7916,43.8462 42,41.5C 42.3333,41.1667 42.6667,40.8333 43,40.5C 44.1139,44.4557 44.9473,44.4557 45.5,40.5C 46.1515,39.9094 46.8182,39.2427 47.5,38.5C 48.086,38.7093 48.586,39.0426 49,39.5C 49.1962,37.7139 50.0295,36.3805 51.5,35.5C 52.2975,35.9569 52.6309,36.6236 52.5,37.5 Z"/></g></svg>');
position: absolute;
height: 100%;
width: 150%;
opacity: 0.4;
top: 0px;
z-index: -1;
}
.banner-clip-path {
background: rgb(247, 247, 247);
clip-path: polygon(50% 85%, -11% 100%, 110% 100%);
height: 616px;
width: 100%;
position: absolute;
z-index: 0;
}
.list {
display: flex;
gap: 20px;
width: 125vw;
z-index: 0;
}
.list-item {
list-style: none;
width: 25vw;
height: 450px;
background-color: rgb(69, 6, 6);
}
.list-item:nth-child(2n+1) {
background-color: rgb(74, 33, 197);
}
.animation-btns-section {
background: rgb(247, 247, 247);
text-align: center;
position: relative;
z-index: 0;
}
.animation-btns-section .heading {
font-size: 2rem;
line-height: 2.5rem;
font-weight: 600;
}
.animation-btns-container {
padding: 50px;
display: flex;
justify-content: space-around;
align-items: center;
}
.btn-container .btn.btn-tertiary {
background: rgb(247, 247, 247);
border: transparent;
margin: 2px;
padding: 14px 51px;
text-decoration: none;
font-size: 2rem;
font-weight: 700;
}
.btn-label-container {
position: relative;
flex-direction: column;
}
.btn-label-container .btn-container .btn.btn-tertiary {
border: 2px solid black;
display: flex;
align-items: center;
gap: 8px;
}
.btn-label-container:hover .btn.btn-tertiary {
color: rgb(255, 255, 255);
background: rgb(0, 0, 0);
}
.ai-powered-icon {
order: -1;
width: 26px;
height: 22px;
position: relative;
overflow: hidden;
display: inline-block;
background: transparent;
clip-path: url(#iconClipPath);
}
.ai-powered-icon::before {
content: "";
width: 100%;
height: 400%;
position: absolute;
background: linear-gradient(195.59deg, rgb(236, 64, 122), rgb(236, 64, 122), rgb(245, 102, 0), rgb(242, 209, 0), rgb(236, 64, 122), rgb(242, 209, 0), rgb(245, 102, 0), rgb(236, 64, 122), rgb(245, 102, 0), rgb(242, 209, 0));
bottom: 0px;
animation: 5s ease-in-out 1ms infinite normal none running gradient;
}
@keyframes gradient {
100% {
bottom: -66px;
}
}
.btn-label-tooltip {
position: absolute;
opacity: 0;
background: rgb(252, 246, 189);
border: 0.5px solid rgb(185, 185, 185);
padding: 8px;
bottom: 63px;
left: 30px;
white-space: normal;
}
.btn-label-container:hover .btn-label-tooltip {
opacity: 1;
}
.btn-label-tooltip::before,
.btn-label-tooltip::after {
content: "";
position: absolute;
top: 100%;
width: 0px;
height: 0px;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
right: 25px;
}
.btn-label-tooltip::before {
border-top: 11px solid rgb(185, 185, 185);
}
.btn-label-tooltip::after {
border-top: 11.5px solid rgb(252, 246, 189);
top: 98%;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
}
.ai-powered-text {
font-weight: 700;
font-size: 1.1rem;
line-height: 1.6rem;
}
.btn-label-container-1 {
position: relative;
cursor: pointer;
}
.btn-label-container-1 .btn-container {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}
.btn-label-container-1 .btn-container::before {
content: "";
display: block;
width: 300px;
height: 300px;
position: absolute;
z-index: -1;
background: rgb(0, 0, 0);
transform: rotate(0deg);
}
.btn-label-container-1:hover .btn-container::before {
background: radial-gradient(100% 1360.73% at 100% 49.09%, rgb(242, 209, 0) 0%, rgb(255, 179, 71) 50%, rgb(236, 64, 122) 100%);
animation: 2s linear 0s infinite normal none running spin1;
}
@keyframes spin1 {
100% {
transform: rotate(360deg);
}
}
.btn-label-container-1 .btn-label {
position: absolute;
background: rgb(247, 247, 247);
top: 0px;
left: 50%;
padding: 0px 6px;
transform: translateY(-50%) translateX(-50%);
margin: 0;
}
.btn-label-container-1 .label-text {
line-height: 1.6rem;
font-size: 1.1rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 3px;
}
</style>
Step 3: Understanding the CSS
Hero Banner and List Items
Hero Banner: The
.hero-bannerclass styles the main banner section with a gradient background and additional decorative elements using pseudo-elements (::beforeand::after).Inner Box: The
.inner-boxthe class adds a subtle background effect with opacity.Banner Clip Path: The
.banner-clip-pathclass uses aclip-pathto create a unique shape at the bottom of the banner.List Items: The
.listclass styles a list of items within the banner. The.list-itemclass assigns colours to these items, alternating between two colours.
Animated Buttons
Buttons: The
.animation-btns-sectionand.animation-btns-containerclasses organize the button section. The.btn.btn-tertiaryclass styles the buttons with padding, margin, and font properties.Button Hover Effects: The
.btn-label-container:hover .btn.btn-tertiaryclass changes the button's background and text colour when hovering.Icon Animation: The
.ai-powered-iconclass and associated@keyframes gradientanimation creates a moving gradient effect within the button's icon.Tooltip: The
.btn-label-tooltipclass displays a tooltip when the button is hovered, using::beforeand::afterfor the arrow.Spinning Effect: The
.btn-label-container-1:hover .btn-container::beforethe class adds a spinning animation with a radial gradient background on hover.
Let's dive deeper into the CSS details, focusing on the hover effects on the parent btn-container element and how the list overflow design is managed in the hero section.
Understanding the Hover Effects on the Parent btn-container Element
In the CSS provided, hover effects are applied to the parent .btn-container elements. This approach leverages the concept of CSS inheritance and allows for more complex animations and styling changes that affect multiple child elements.
Button Hover Effects: .btn-label-container and .btn-container
Button Label Container:
.btn-label-containeris a wrapper around the button and the tooltip.Hovering over
.btn-label-containerchanges the style of the button inside it.This design allows the tooltip to appear when the parent container is hovered, rather than just the button itself.
.btn-label-container:hover .btn.btn-tertiary {
color: #fff;
background: #000;
}
Explanation:
- When you hover over the
.btn-label-container, it applies the specified styles to the.btn.btn-tertiarychild element. This changes the button's text colour to white (#fff) and the background colour to black (#000).
- When you hover over the
Tooltip:
- The tooltip associated with the button is hidden by default and becomes visible when the parent container is hovered.
.btn-label-container:hover .btn-label-tooltip {
opacity: 1;
}
Explanation:
- The
opacityproperty of.btn-label-tooltipis set to1on hover, making the tooltip visible.
Spinning Effect:
- For the second button, additional effects are applied using a spinning animation.
.btn-label-container-1:hover .btn-container::before {
background: radial-gradient(100% 1360.73% at 100% 49.09%, #f2d100 0, #ffb347 50%, #ec407a 100%);
animation: 2s linear 0s infinite normal none running spin1;
}
Explanation:
When hovering over
.btn-label-container-1, the::beforepseudo-element of.btn-containerchanges its background to a radial gradient and starts spinning.The
animationproperty applies thespin1keyframes animation, which rotates the pseudo-element.
@keyframes spin1 {
100% {
transform: rotate(360deg);
}
}
Explanation:
- The
spin1animation rotates the element by 360 degrees over 2 seconds, creating a continuous spinning effect.
Managing List Overflow in the Hero Section
The hero section includes a list of items that extend beyond the visible area of the banner. Here's how the design handles this overflow:
Hero Banner and List Items: .hero-banner and .list
Hero Banner:
- The
.hero-bannerclass sets up the background and clipping paths.
- The
.hero-banner {
overflow: hidden;
position: relative;
background: linear-gradient(225deg, rgba(18,146,163,.98) 0, #019ba1 100%);
z-index: 1;
height: 600px;
justify-content: center;
display: flex;
}
Explanation:
overflow: hiddenensures that any child elements exceeding the dimensions of.hero-bannerare not visible. This is crucial for managing overflow.position: relativeandz-index: 1help in layering and positioning child elements.The background is set with a gradient, and the height is defined as 600px.
justify-content: centeranddisplay: flexcentre the content horizontally.
Inner Box and Banner Clip Path:
- These elements create decorative effects inside the hero banner.
.inner-box::before {
content: "";
background-repeat: repeat;
background-blend-mode: soft-light;
position: absolute;
height: 100%;
width: 150%;
opacity: .4;
top: 0;
z-index: -1;
}
.banner-clip-path {
background: #f7f7f7;
clip-path: polygon(50% 85%, -11% 100%, 110% 100%);
height: 616px;
width: 100%;
position: absolute;
z-index: 0;
}
Explanation:
.inner-box::beforecreates a subtle background effect using blending and opacity..banner-clip-pathuses aclip-pathto create a unique shape at the bottom of the banner, enhancing the visual appeal.
List Items:
- The list items are designed to be larger than the visible area, creating an overflow effect.
.list {
display: flex;
gap: 20px;
width: 125vw;
z-index: 0;
}
.list-item {
list-style: none;
width: 25vw;
height: 450px;
background-color: #450606;
}
Explanation:
.listis set todisplay: flex, which allows the list items to be arranged in a row.gap: 20pxadds space between the items.width: 125vwsets the width of the list to be 125% of the viewport width, ensuring that part of the list overflows the visible area..list-itemsets the dimensions and background colour of each item. The width of25vwensures that each item takes up 25% of the viewport width, making the total width of the list larger than the viewport.
Alternating Background Colors:
- The list items alternate in the background colour to enhance visual distinction.
.list-item:nth-child(2n+1) {
background-color: #4a21c5;
}
Explanation:
- This CSS rule targets every odd child (
nth-child(2n+1)) of the list and changes its background colour, providing an alternating pattern.
Summary
Hover Effects: By applying hover effects on the parent container (
.btn-containeror.btn-label-container), we can easily control the styles and animations of multiple child elements, such as buttons and tooltips. This approach ensures that all related elements are affected by the hover state, enhancing the user experience.List Overflow: The hero section handles overflow by setting the list width to exceed the viewport width (
125vw) and usingoverflow: hiddenon the parent.hero-bannerto hide the excess content. This design choice creates a visually appealing horizontal overflow effect.
By understanding these techniques, you can create complex and interactive designs using CSS, enhancing both the functionality and aesthetics of your web pages.
The gradient animation on the SVG icon is an interesting feature that adds a dynamic visual effect. Let's break down how this is implemented in detail.
SVG Icon with Gradient Animation
The gradient animation involves several key components:
SVG Icon Structure
Gradient Definition
Clip Path for the Icon
Animation Keyframes
1. SVG Icon Structure
The SVG icon is embedded in the HTML with a defs a section defining the clip-path and gradients.
htmlCopy code<svg>
<defs>
<clipPath id="iconClipPath">
<path d="..."></path>
</clipPath>
<linearGradient id="paint0_linear_6897_39950" x1="7.54339" x2="4.1503" y1="-0.176761" y2="10.4458">
<stop offset="0" stop-color="#EC407A"></stop>
<stop offset="0.5" stop-color="#F56600"></stop>
<stop offset="1" stop-color="#F2D100"></stop>
</linearGradient>
</defs>
</svg>
clipPath: Defines the shape of the icon that will be visible.linearGradient: Defines the gradient colours and stops.
2. Gradient Definition
The linearGradient element within the defs the section defines a gradient with three colour stops.
htmlCopy code<linearGradient id="paint0_linear_6897_39950" x1="7.54339" x2="4.1503" y1="-0.176761" y2="10.4458">
<stop offset="0" stop-color="#EC407A"></stop>
<stop offset="0.5" stop-color="#F56600"></stop>
<stop offset="1" stop-color="#F2D100"></stop>
</linearGradient>
stopElements: Eachstopdefines colour and its position within the gradient.
3. Clip Path for the Icon
The clipPath is used to clip the icon to the defined path shape.
htmlCopy code<clipPath id="iconClipPath">
<path d="M14.6204 2.07223C14.6204 2.82498 14.2191 3.48399 13.6187 3.84692V5.23798L23.1859 5.23798V9.42837H25.1423V13.6188H23.1859V17.7634L12.6405 22V17.7634H2.09519V13.6188H0V9.42837H2.09519V5.23798L11.5235 5.23798V3.87376C10.8978 3.51711 10.476 2.84393 10.476 2.07223C10.476 0.927768 11.4037 0 12.5482 0C13.6927 0 14.6204 0.927768 14.6204 2.07223ZM10.385 11.5477C10.385 12.6921 9.45723 13.6199 8.31277 13.6199C7.16831 13.6199 6.24055 12.6921 6.24055 11.5477C6.24055 10.4032 7.16831 9.47543 8.31277 9.47543C9.45723 9.47543 10.385 10.4032 10.385 11.5477ZM16.7836 13.6199C17.928 13.6199 18.8558 12.6921 18.8558 11.5477C18.8558 10.4032 17.928 9.47543 16.7836 9.47543C15.6391 9.47543 14.7113 10.4032 14.7113 11.5477C14.7113 12.6921 15.6391 13.6199 16.7836 13.6199Z" clip-rule="evenodd" fill-rule="evenodd"></path>
</clipPath>
clipPath: Clips the icon to only show the area within the defined path.clip-ruleandfill-rule: Ensure the clipping path is applied correctly.
4. Animation Keyframes
The gradient animation is achieved using CSS keyframes.
cssCopy code@keyframes gradient {
100% {
bottom: -66px;
}
}
.ai-powered-icon::before {
content: "";
width: 100%;
height: 400%;
position: absolute;
background: linear-gradient(195.59deg, #ec407a, #ec407a, #f56600, #f2d100, #ec407a, #f2d100, #f56600, #ec407a, #f56600, #f2d100);
bottom: 0;
animation: 16s ease-in-out 1ms infinite normal none running gradient;
}
@keyframes gradient: Defines the animation to move the background.100% { bottom: -66px; }: Moves the background gradient down throughout the animation.
.ai-powered-icon::before: Uses a pseudo-element to apply the gradient animation.background: Sets the gradient background.animation: Applies thegradientkeyframes animation.
Step-by-Step Breakdown of the Animation
SVG and Clip Path:
The SVG icon uses a
clipPathto define the visible area.The
clipPathis referenced byidin theclip-pathproperty of the icon.
Gradient Definition:
The
linearGradientdefines a smooth transition between colours.The gradient is referenced in the SVG using
fill="url(#paint0_linear_6897_39950)".
CSS Pseudo-Element Animation:
The
::beforepseudo-element is used to create an animated gradient background.The
backgroundproperty of::beforesets the gradient colours.The
animationproperty applies thegradientkeyframes to the pseudo-element, creating a moving gradient effect.
Keyframes Animation:
The
@keyframes gradientthe animation moves the gradient background vertically.By animating the
bottomproperty from0to-66px, the gradient background appears to scroll downward continuously.
This approach effectively creates a dynamic and visually appealing gradient animation on the SVG icon, enhancing the overall user experience with engaging visuals.
Final Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.hero-banner {
overflow: hidden;
position: relative;
background: linear-gradient(225deg, rgba(18, 146, 163, 0.98) 0%, rgb(1, 155, 161) 100%);
z-index: 1;
height: 600px;
justify-content: center;
display: flex;
}
.hero-banner::before,
.hero-banner::after {
content: "";
position: absolute;
height: 155px;
bottom: 0px;
width: 100%;
}
.hero-banner::before {
left: 0px;
background: rgba(2, 69, 81, 0.14);
clip-path: polygon(0px 0px, 0% 100%, 100% 100%);
z-index: 0;
}
.hero-banner::after {
right: 0px;
background: rgba(1, 67, 79, 0.48);
clip-path: polygon(100% 0px, 0% 100%, 100% 100%);
z-index: -1;
}
.inner-box::before {
content: "";
background-repeat: repeat;
background-blend-mode: soft-light;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="57px" height="49px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"><g><path style="opacity:0.428" fill="%23080808" d="M 17.5,-0.5 C 24.5,-0.5 31.5,-0.5 38.5,-0.5C 39.4678,2.02558 38.6345,2.69225 36,1.5C 34.4735,4.57838 31.9735,6.41172 28.5,7C 29.056,7.38258 29.3893,7.88258 29.5,8.5C 28.4415,9.60023 27.6082,10.9336 27,12.5C 26.7679,11.2625 26.2679,10.2625 25.5,9.5C 24.4647,7.79505 24.4647,6.12838 25.5,4.5C 23.7145,2.07764 22.0478,2.07764 20.5,4.5C 18.535,1.88025 17.035,2.21359 16,5.5C 14.3374,3.11069 14.8374,1.11069 17.5,-0.5 Z"/></g><g><path style="opacity:0.393" fill="%23060606" d="M 40.5,-0.5 C 42.8333,-0.5 45.1667,-0.5 47.5,-0.5C 47.67,0.822066 47.3366,1.98873 46.5,3C 48.0739,3.35297 49.7406,4.01964 51.5,5C 49.8812,6.92317 48.0479,7.42317 46,6.5C 43.6681,8.20295 41.8347,10.203 40.5,12.5C 39.6618,12.1583 39.3284,11.4916 39.5,10.5C 40.8069,9.19837 40.8069,7.86503 39.5,6.5C 40.6507,5.26899 41.8173,5.26899 43,6.5C 43.3742,5.58377 43.8742,4.75044 44.5,4C 43.9402,2.37973 42.6068,0.879729 40.5,-0.5 Z"/></g><g><path style="opacity:0.403" fill="%23080808" d="M -0.5,-0.5 C 4.16667,-0.5 8.83333,-0.5 13.5,-0.5C 13.6068,1.37857 13.1068,1.7119 12,0.5C 11.5,1 11,1.5 10.5,2C 12.6785,2.44185 13.3452,3.44185 12.5,5C 13.756,5.41691 14.4226,6.25025 14.5,7.5C 13.5604,9.61246 12.3937,11.6125 11,13.5C 10.3333,12.1667 9.33333,11.1667 8,10.5C 7.14998,11.4239 6.14998,11.4239 5,10.5C 4.5,10.6667 4,10.8333 3.5,11C 4.10949,13.0581 5.10949,13.8914 6.5,13.5C 6.19238,14.3081 5.69238,14.9747 5,15.5C 3.29424,14.6921 2.46091,13.3588 2.5,11.5C 1.5,11.5 0.5,11.5 -0.5,11.5C -0.5,7.5 -0.5,3.5 -0.5,-0.5 Z"/></g><g><path style="opacity:0.424" fill="%230d0d0d" d="M 38.5,-0.5 C 39.1667,-0.5 39.8333,-0.5 40.5,-0.5C 42.6068,0.879729 43.9402,2.37973 44.5,4C 43.8742,4.75044 43.3742,5.58377 43,6.5C 41.8173,5.26899 40.6507,5.26899 39.5,6.5C 40.8069,7.86503 40.8069,9.19837 39.5,10.5C 38.8826,10.3893 38.3826,10.056 38,9.5C 35.3333,10.8333 32.6667,12.1667 30,13.5C 29.5172,12.552 29.3505,11.552 29.5,10.5C 30.9778,10.762 32.3112,10.4287 33.5,9.5C 32.3088,9.59534 30.9755,9.262 29.5,8.5C 29.3893,7.88258 29.056,7.38258 28.5,7C 31.9735,6.41172 34.4735,4.57838 36,1.5C 38.6345,2.69225 39.4678,2.02558 38.5,-0.5 Z"/></g><g><path style="opacity:0.409" fill="%230f0f0f" d="M 13.5,-0.5 C 14.8333,-0.5 16.1667,-0.5 17.5,-0.5C 14.8374,1.11069 14.3374,3.11069 16,5.5C 17.035,2.21359 18.535,1.88025 20.5,4.5C 22.0478,2.07764 23.7145,2.07764 25.5,4.5C 24.4647,6.12838 24.4647,7.79505 25.5,9.5C 25.5654,9.93822 25.3988,10.2716 25,10.5C 23.4301,9.38598 22.0968,8.05264 21,6.5C 20.2515,8.33246 19.2515,9.99913 18,11.5C 17.2303,10.4019 16.397,10.4019 15.5,11.5C 15.9038,10.2436 16.5705,9.0769 17.5,8C 17.3333,7.5 17.1667,7 17,6.5C 16.3292,7.25244 15.4959,7.58577 14.5,7.5C 14.4226,6.25025 13.756,5.41691 12.5,5C 13.3452,3.44185 12.6785,2.44185 10.5,2C 11,1.5 11.5,1 12,0.5C 13.1068,1.7119 13.6068,1.37857 13.5,-0.5 Z"/></g><g><path style="opacity:0.426" fill="%230c0c0c" d="M 47.5,-0.5 C 50.5,-0.5 53.5,-0.5 56.5,-0.5C 56.5,4.5 56.5,9.5 56.5,14.5C 55.1667,13.5 53.8333,12.5 52.5,11.5C 53.8412,6.96746 53.3412,6.63413 51,10.5C 50.3333,9.83333 49.6667,9.16667 49,8.5C 46.2145,10.0309 43.3812,11.3643 40.5,12.5C 41.8347,10.203 43.6681,8.20295 46,6.5C 48.0479,7.42317 49.8812,6.92317 51.5,5C 49.7406,4.01964 48.0739,3.35297 46.5,3C 47.3366,1.98873 47.67,0.822066 47.5,-0.5 Z"/></g><g><path style="opacity:0.422" fill="%23080808" d="M 25.5,9.5 C 26.2679,10.2625 26.7679,11.2625 27,12.5C 27.6082,10.9336 28.4415,9.60023 29.5,8.5C 30.9755,9.262 32.3088,9.59534 33.5,9.5C 32.3112,10.4287 30.9778,10.762 29.5,10.5C 29.3505,11.552 29.5172,12.552 30,13.5C 32.6667,12.1667 35.3333,10.8333 38,9.5C 38.3826,10.056 38.8826,10.3893 39.5,10.5C 39.3284,11.4916 39.6618,12.1583 40.5,12.5C 39.9924,14.2327 39.159,14.566 38,13.5C 37.5357,14.0944 37.369,14.7611 37.5,15.5C 37.5654,15.9382 37.3988,16.2716 37,16.5C 36.5814,15.3279 35.9147,14.3279 35,13.5C 34.8348,15.678 35.6682,17.5114 37.5,19C 36.7476,19.6708 36.4142,20.5041 36.5,21.5C 35.1667,21.5 33.8333,21.5 32.5,21.5C 34.0505,18.8283 33.5505,16.4949 31,14.5C 30.0053,15.0659 29.172,15.7326 28.5,16.5C 28.1667,16.5 27.8333,16.5 27.5,16.5C 25.0576,16.6463 24.3909,15.813 25.5,14C 23.6969,13.3632 22.3636,12.1965 21.5,10.5C 20.3348,11.4911 19.1681,12.4911 18,13.5C 16.5,13 15,12.5 13.5,12C 14.0944,11.5357 14.7611,11.369 15.5,11.5C 16.397,10.4019 17.2303,10.4019 18,11.5C 19.2515,9.99913 20.2515,8.33246 21,6.5C 22.0968,8.05264 23.4301,9.38598 25,10.5C 25.3988,10.2716 25.5654,9.93822 25.5,9.5 Z"/></g><g><path style="opacity:0.384" fill="%230f0f0f" d="M 52.5,11.5 C 53.8333,12.5 55.1667,13.5 56.5,14.5C 56.5,15.5 56.5,16.5 56.5,17.5C 55.8501,17.1961 55.1835,16.8627 54.5,16.5C 53.7189,17.7287 53.2189,19.062 53,20.5C 52.6667,19.8333 52.3333,19.1667 52,18.5C 50.9505,19.5171 49.7839,19.6838 48.5,19C 49.6721,18.5814 50.6721,17.9147 51.5,17C 50.7877,15.575 50.621,14.075 51,12.5C 49.3684,13.5282 47.8684,14.5282 46.5,15.5C 45.8333,14.8333 45.1667,14.1667 44.5,13.5C 46.9608,12.469 49.6275,11.8023 52.5,11.5 Z"/></g><g><path style="opacity:0.435" fill="%23060606" d="M 52.5,11.5 C 49.6275,11.8023 46.9608,12.469 44.5,13.5C 42.2543,14.4552 39.921,15.1218 37.5,15.5C 37.369,14.7611 37.5357,14.0944 38,13.5C 39.159,14.566 39.9924,14.2327 40.5,12.5C 43.3812,11.3643 46.2145,10.0309 49,8.5C 49.6667,9.16667 50.3333,9.83333 51,10.5C 53.3412,6.63413 53.8412,6.96746 52.5,11.5 Z"/></g><g><path style="opacity:0.416" fill="%230c0c0c" d="M 15.5,11.5 C 14.7611,11.369 14.0944,11.5357 13.5,12C 15,12.5 16.5,13 18,13.5C 19.1681,12.4911 20.3348,11.4911 21.5,10.5C 22.3636,12.1965 23.6969,13.3632 25.5,14C 24.3909,15.813 25.0576,16.6463 27.5,16.5C 27.631,17.2389 27.4643,17.9056 27,18.5C 24.5615,17.1337 24.0615,17.6337 25.5,20C 25.0946,20.9454 24.428,21.6121 23.5,22C 26.0515,23.5158 25.7181,24.3491 22.5,24.5C 22.3893,23.8826 22.056,23.3826 21.5,23C 16.279,23.7886 15.6124,22.4553 19.5,19C 17.4311,18.6758 17.0977,17.8425 18.5,16.5C 16.7596,17.6208 14.4263,17.6208 11.5,16.5C 8.80781,17.2112 6.30781,17.2112 4,16.5C 2.61524,17.5505 1.61524,18.8839 1,20.5C 0.721579,19.5842 0.221579,18.9175 -0.5,18.5C -0.5,16.1667 -0.5,13.8333 -0.5,11.5C 0.5,11.5 1.5,11.5 2.5,11.5C 2.46091,13.3588 3.29424,14.6921 5,15.5C 5.69238,14.9747 6.19238,14.3081 6.5,13.5C 5.10949,13.8914 4.10949,13.0581 3.5,11C 4,10.8333 4.5,10.6667 5,10.5C 6.14998,11.4239 7.14998,11.4239 8,10.5C 9.33333,11.1667 10.3333,12.1667 11,13.5C 12.3937,11.6125 13.5604,9.61246 14.5,7.5C 15.4959,7.58577 16.3292,7.25244 17,6.5C 17.1667,7 17.3333,7.5 17.5,8C 16.5705,9.0769 15.9038,10.2436 15.5,11.5 Z"/></g><g><path style="opacity:0.416" fill="%23050505" d="M 27.5,16.5 C 27.8333,16.5 28.1667,16.5 28.5,16.5C 29.3764,16.3691 30.0431,16.7025 30.5,17.5C 31.1654,19.1012 31.4988,20.6012 31.5,22C 30.2161,22.6838 29.0495,22.5171 28,21.5C 26.3831,22.5358 26.2164,23.7025 27.5,25C 26.552,25.4828 25.552,25.6495 24.5,25.5C 23.8333,25.5 23.1667,25.5 22.5,25.5C 22.5,25.1667 22.5,24.8333 22.5,24.5C 25.7181,24.3491 26.0515,23.5158 23.5,22C 24.428,21.6121 25.0946,20.9454 25.5,20C 24.0615,17.6337 24.5615,17.1337 27,18.5C 27.4643,17.9056 27.631,17.2389 27.5,16.5 Z"/></g><g><path style="opacity:0.402" fill="%23060606" d="M 22.5,24.5 C 21.8186,26.1585 20.9853,27.8251 20,29.5C 20.0773,28.2624 19.9106,27.2624 19.5,26.5C 18.8182,27.2427 18.1515,27.9094 17.5,28.5C 18.1272,25.1359 16.7939,23.1359 13.5,22.5C 12.2867,22.7472 11.62,23.4138 11.5,24.5C 10.2801,22.9504 10.2801,21.2837 11.5,19.5C 12.625,18.6522 12.625,17.6522 11.5,16.5C 14.4263,17.6208 16.7596,17.6208 18.5,16.5C 17.0977,17.8425 17.4311,18.6758 19.5,19C 15.6124,22.4553 16.279,23.7886 21.5,23C 22.056,23.3826 22.3893,23.8826 22.5,24.5 Z"/></g><g><path style="opacity:0.386" fill="%23090909" d="M 11.5,16.5 C 12.625,17.6522 12.625,18.6522 11.5,19.5C 9.90997,21.4746 8.7433,23.8079 8,26.5C 6.82927,23.9622 5.32927,23.4622 3.5,25C 7.5,25.6667 7.5,26.3333 3.5,27C 5.19322,27.8466 6.85989,28.6799 8.5,29.5C 8.2252,31.8418 7.39186,31.8418 6,29.5C 5.48065,30.5156 4.64732,31.1822 3.5,31.5C 1.95894,30.7142 0.625602,29.7142 -0.5,28.5C -0.5,25.1667 -0.5,21.8333 -0.5,18.5C 0.221579,18.9175 0.721579,19.5842 1,20.5C 1.61524,18.8839 2.61524,17.5505 4,16.5C 6.30781,17.2112 8.80781,17.2112 11.5,16.5 Z"/></g><g><path style="opacity:0.423" fill="%230a0a0a" d="M 37.5,15.5 C 39.921,15.1218 42.2543,14.4552 44.5,13.5C 45.1667,14.1667 45.8333,14.8333 46.5,15.5C 47.3629,16.9403 47.3629,18.2736 46.5,19.5C 49.0485,20.2842 51.3819,21.4508 53.5,23C 51.9669,24.8081 50.3003,25.3081 48.5,24.5C 47.2438,24.4614 46.2438,24.9614 45.5,26C 46.1095,28.0581 47.1095,28.8914 48.5,28.5C 48,28.8333 47.5,29.1667 47,29.5C 45.317,27.6495 43.4837,25.9828 41.5,24.5C 41.5594,22.2355 40.7261,21.9022 39,23.5C 37.699,23.3613 36.8656,22.6946 36.5,21.5C 36.4142,20.5041 36.7476,19.6708 37.5,19C 35.6682,17.5114 34.8348,15.678 35,13.5C 35.9147,14.3279 36.5814,15.3279 37,16.5C 37.3988,16.2716 37.5654,15.9382 37.5,15.5 Z"/></g><g><path style="opacity:0.41" fill="%23070707" d="M 56.5,17.5 C 56.5,19.8333 56.5,22.1667 56.5,24.5C 55.1667,25.1667 53.8333,25.8333 52.5,26.5C 52.1667,26.5 51.8333,26.5 51.5,26.5C 50.1266,26.6567 48.7932,26.49 47.5,26C 48.056,25.6174 48.3893,25.1174 48.5,24.5C 50.3003,25.3081 51.9669,24.8081 53.5,23C 51.3819,21.4508 49.0485,20.2842 46.5,19.5C 47.3629,18.2736 47.3629,16.9403 46.5,15.5C 47.8684,14.5282 49.3684,13.5282 51,12.5C 50.621,14.075 50.7877,15.575 51.5,17C 50.6721,17.9147 49.6721,18.5814 48.5,19C 49.7839,19.6838 50.9505,19.5171 52,18.5C 52.3333,19.1667 52.6667,19.8333 53,20.5C 53.2189,19.062 53.7189,17.7287 54.5,16.5C 55.1835,16.8627 55.8501,17.1961 56.5,17.5 Z"/></g><g><path style="opacity:0.43" fill="%230d0d0d" d="M 36.5,21.5 C 36.8656,22.6946 37.699,23.3613 39,23.5C 40.7261,21.9022 41.5594,22.2355 41.5,24.5C 39.3023,24.4088 38.9689,25.0755 40.5,26.5C 38.5165,26.6168 36.8498,25.9501 35.5,24.5C 34.0944,25.6682 32.9277,25.3348 32,23.5C 30.7453,24.2106 29.5786,25.044 28.5,26C 28.8333,26.3333 29.1667,26.6667 29.5,27C 28.552,27.4828 27.552,27.6495 26.5,27.5C 26.19,26.2617 25.69,26.2617 25,27.5C 24.5357,26.9056 24.369,26.2389 24.5,25.5C 25.552,25.6495 26.552,25.4828 27.5,25C 26.2164,23.7025 26.3831,22.5358 28,21.5C 29.0495,22.5171 30.2161,22.6838 31.5,22C 31.4988,20.6012 31.1654,19.1012 30.5,17.5C 30.0431,16.7025 29.3764,16.3691 28.5,16.5C 29.172,15.7326 30.0053,15.0659 31,14.5C 33.5505,16.4949 34.0505,18.8283 32.5,21.5C 33.8333,21.5 35.1667,21.5 36.5,21.5 Z"/></g><g><path style="opacity:0.422" fill="%23050505" d="M 40.5,26.5 C 40.9382,26.4346 41.2716,26.6012 41.5,27C 40.2341,27.3095 39.0674,27.8095 38,28.5C 37.1627,26.9926 35.9961,26.4926 34.5,27C 34.2592,28.5625 34.7592,30.0625 36,31.5C 36.7253,29.842 37.892,29.342 39.5,30C 37.3553,30.7431 37.1886,31.5765 39,32.5C 40.1516,30.4883 41.3183,30.3217 42.5,32C 41.9341,32.9947 41.2674,33.828 40.5,34.5C 39.1155,33.1991 37.6155,33.1991 36,34.5C 35.7216,33.5842 35.2216,32.9175 34.5,32.5C 33.1575,30.6954 32.3241,28.6954 32,26.5C 31.6667,27.8333 31.3333,29.1667 31,30.5C 29.6897,29.1031 28.1897,28.1031 26.5,27.5C 27.552,27.6495 28.552,27.4828 29.5,27C 29.1667,26.6667 28.8333,26.3333 28.5,26C 29.5786,25.044 30.7453,24.2106 32,23.5C 32.9277,25.3348 34.0944,25.6682 35.5,24.5C 36.8498,25.9501 38.5165,26.6168 40.5,26.5 Z"/></g><g><path style="opacity:0.39" fill="%23101010" d="M 11.5,19.5 C 10.2801,21.2837 10.2801,22.9504 11.5,24.5C 12.552,24.3505 13.552,24.5172 14.5,25C 11.3113,25.9808 10.978,27.3141 13.5,29C 12.9152,30.3024 12.2485,31.469 11.5,32.5C 11.5,32.1667 11.5,31.8333 11.5,31.5C 11.631,30.7611 11.4643,30.0944 11,29.5C 10.2303,30.5981 9.39695,30.5981 8.5,29.5C 6.85989,28.6799 5.19322,27.8466 3.5,27C 7.5,26.3333 7.5,25.6667 3.5,25C 5.32927,23.4622 6.82927,23.9622 8,26.5C 8.7433,23.8079 9.90997,21.4746 11.5,19.5 Z"/></g><g><path style="opacity:0.398" fill="%23090909" d="M 17.5,28.5 C 17.9038,29.7564 18.5705,30.9231 19.5,32C 17.3101,33.3942 15.9767,34.8942 15.5,36.5C 14.391,36.4431 13.391,36.1098 12.5,35.5C 12.4431,34.391 12.1098,33.391 11.5,32.5C 12.2485,31.469 12.9152,30.3024 13.5,29C 10.978,27.3141 11.3113,25.9808 14.5,25C 13.552,24.5172 12.552,24.3505 11.5,24.5C 11.62,23.4138 12.2867,22.7472 13.5,22.5C 16.7939,23.1359 18.1272,25.1359 17.5,28.5 Z"/></g><g><path style="opacity:0.359" fill="%230e0e0e" d="M 22.5,24.5 C 22.5,24.8333 22.5,25.1667 22.5,25.5C 23.2341,26.7079 23.5674,28.0413 23.5,29.5C 21.0752,29.684 21.0752,30.3507 23.5,31.5C 23.1667,32.1667 22.8333,32.8333 22.5,33.5C 19.8307,33.7489 17.4973,35.0822 15.5,37.5C 15.5,37.1667 15.5,36.8333 15.5,36.5C 15.9767,34.8942 17.3101,33.3942 19.5,32C 18.5705,30.9231 17.9038,29.7564 17.5,28.5C 18.1515,27.9094 18.8182,27.2427 19.5,26.5C 19.9106,27.2624 20.0773,28.2624 20,29.5C 20.9853,27.8251 21.8186,26.1585 22.5,24.5 Z"/></g><g><path style="opacity:0.473" fill="%230e0e0e" d="M 22.5,25.5 C 23.1667,25.5 23.8333,25.5 24.5,25.5C 24.369,26.2389 24.5357,26.9056 25,27.5C 25.69,26.2617 26.19,26.2617 26.5,27.5C 28.1897,28.1031 29.6897,29.1031 31,30.5C 31.3333,29.1667 31.6667,27.8333 32,26.5C 32.3241,28.6954 33.1575,30.6954 34.5,32.5C 33.5266,32.9867 32.5266,33.4867 31.5,34C 32.756,34.4169 33.4226,35.2502 33.5,36.5C 33.1667,36.5 32.8333,36.5 32.5,36.5C 30.9217,35.9344 29.5884,34.9344 28.5,33.5C 29.5294,33.7036 30.5294,33.2036 31.5,32C 30.354,31.3551 29.354,30.5217 28.5,29.5C 26.6442,29.7923 24.9776,29.7923 23.5,29.5C 23.5674,28.0413 23.2341,26.7079 22.5,25.5 Z"/></g><g><path style="opacity:0.388" fill="%23060606" d="M 51.5,26.5 C 51.8333,26.5 52.1667,26.5 52.5,26.5C 52.6107,27.1174 52.944,27.6174 53.5,28C 52.0439,28.4226 51.5439,29.2559 52,30.5C 52.3333,30.1667 52.6667,29.8333 53,29.5C 53.5,30.6667 54.3333,31.5 55.5,32C 53.2464,33.0539 52.913,34.5539 54.5,36.5C 54.0431,37.2975 53.3764,37.6309 52.5,37.5C 52.6309,36.6236 52.2975,35.9569 51.5,35.5C 50.0295,36.3805 49.1962,37.7139 49,39.5C 48.586,39.0426 48.086,38.7093 47.5,38.5C 46.8182,39.2427 46.1515,39.9094 45.5,40.5C 45.5,39.5 45.5,38.5 45.5,37.5C 45.1583,36.6618 44.4916,36.3284 43.5,36.5C 43.6584,31.5692 44.825,30.9026 47,34.5C 48.8241,33.2513 48.6574,32.0847 46.5,31C 47.938,30.7811 49.2713,30.2811 50.5,29.5C 50.2907,28.914 49.9574,28.414 49.5,28C 50.4158,27.7216 51.0825,27.2216 51.5,26.5 Z"/></g><g><path style="opacity:0.39" fill="%23070707" d="M -0.5,28.5 C 0.625602,29.7142 1.95894,30.7142 3.5,31.5C 4.64732,31.1822 5.48065,30.5156 6,29.5C 7.39186,31.8418 8.2252,31.8418 8.5,29.5C 9.39695,30.5981 10.2303,30.5981 11,29.5C 11.4643,30.0944 11.631,30.7611 11.5,31.5C 10.2502,31.5774 9.41691,32.244 9,33.5C 8.28248,32.5494 7.44915,32.3828 6.5,33C 7.69559,33.6543 7.69559,34.1543 6.5,34.5C 5.16667,33.8333 3.83333,33.1667 2.5,32.5C 1.35536,33.7757 1.35536,35.109 2.5,36.5C 1.83333,37.1667 1.16667,37.8333 0.5,38.5C 1.52066,39.9014 2.52066,41.2347 3.5,42.5C 3.47008,43.4972 3.97008,44.1639 5,44.5C 6.16176,43.8132 7.32843,43.6466 8.5,44C 7.16667,44.6667 7.16667,45.3333 8.5,46C 6.76499,46.6514 5.09833,46.4847 3.5,45.5C 2.61432,46.325 2.28099,47.325 2.5,48.5C 1.5,48.5 0.5,48.5 -0.5,48.5C -0.5,41.8333 -0.5,35.1667 -0.5,28.5 Z"/></g><g><path style="opacity:0.4" fill="%230d0d0d" d="M 41.5,24.5 C 43.4837,25.9828 45.317,27.6495 47,29.5C 47.5,29.1667 48,28.8333 48.5,28.5C 47.1095,28.8914 46.1095,28.0581 45.5,26C 46.2438,24.9614 47.2438,24.4614 48.5,24.5C 48.3893,25.1174 48.056,25.6174 47.5,26C 48.7932,26.49 50.1266,26.6567 51.5,26.5C 51.0825,27.2216 50.4158,27.7216 49.5,28C 49.9574,28.414 50.2907,28.914 50.5,29.5C 49.2713,30.2811 47.938,30.7811 46.5,31C 48.6574,32.0847 48.8241,33.2513 47,34.5C 44.825,30.9026 43.6584,31.5692 43.5,36.5C 41.5856,35.8153 39.5856,35.3153 37.5,35C 38.448,34.5172 39.448,34.3505 40.5,34.5C 41.2674,33.828 41.9341,32.9947 42.5,32C 41.3183,30.3217 40.1516,30.4883 39,32.5C 37.1886,31.5765 37.3553,30.7431 39.5,30C 37.892,29.342 36.7253,29.842 36,31.5C 34.7592,30.0625 34.2592,28.5625 34.5,27C 35.9961,26.4926 37.1627,26.9926 38,28.5C 39.0674,27.8095 40.2341,27.3095 41.5,27C 41.2716,26.6012 40.9382,26.4346 40.5,26.5C 38.9689,25.0755 39.3023,24.4088 41.5,24.5 Z"/></g><g><path style="opacity:0.411" fill="%230d0d0d" d="M 11.5,31.5 C 11.5,31.8333 11.5,32.1667 11.5,32.5C 12.1098,33.391 12.4431,34.391 12.5,35.5C 10.5829,36.1164 9.4162,37.4497 9,39.5C 7.13545,37.1449 4.96878,36.9782 2.5,39C 3.7101,40.0391 4.7101,41.2058 5.5,42.5C 4.83333,42.5 4.16667,42.5 3.5,42.5C 2.52066,41.2347 1.52066,39.9014 0.5,38.5C 1.16667,37.8333 1.83333,37.1667 2.5,36.5C 1.35536,35.109 1.35536,33.7757 2.5,32.5C 3.83333,33.1667 5.16667,33.8333 6.5,34.5C 7.69559,34.1543 7.69559,33.6543 6.5,33C 7.44915,32.3828 8.28248,32.5494 9,33.5C 9.41691,32.244 10.2502,31.5774 11.5,31.5 Z"/></g><g><path style="opacity:0.407" fill="%23090909" d="M 34.5,32.5 C 35.2216,32.9175 35.7216,33.5842 36,34.5C 37.6155,33.1991 39.1155,33.1991 40.5,34.5C 39.448,34.3505 38.448,34.5172 37.5,35C 39.5856,35.3153 41.5856,35.8153 43.5,36.5C 44.4916,36.3284 45.1583,36.6618 45.5,37.5C 44.7784,37.9175 44.2784,38.5842 44,39.5C 42.5295,38.7334 41.0295,38.0668 39.5,37.5C 37.2239,37.7565 36.0572,39.0898 36,41.5C 35.1534,39.8068 34.3201,38.1401 33.5,36.5C 33.4226,35.2502 32.756,34.4169 31.5,34C 32.5266,33.4867 33.5266,32.9867 34.5,32.5 Z"/></g><g><path style="opacity:0.424" fill="%23080808" d="M 32.5,36.5 C 32.631,37.2389 32.4643,37.9056 32,38.5C 29.4058,37.5376 27.4058,35.8709 26,33.5C 25.0805,33.9302 24.2472,34.2635 23.5,34.5C 24.325,35.3857 25.325,35.719 26.5,35.5C 26.1412,37.7659 26.8078,39.5993 28.5,41C 28.2716,41.3988 27.9382,41.5654 27.5,41.5C 25.5891,41.4257 24.4224,40.4257 24,38.5C 22.4894,39.564 22.3228,40.8974 23.5,42.5C 22.5768,41.6971 21.5768,41.5304 20.5,42C 22.0585,44.0519 23.3918,46.2185 24.5,48.5C 21.5,48.5 18.5,48.5 15.5,48.5C 17.1002,47.3556 18.7669,46.1889 20.5,45C 19.175,45.1484 18.0084,44.9817 17,44.5C 15.7978,42.3225 15.2978,39.9892 15.5,37.5C 17.4973,35.0822 19.8307,33.7489 22.5,33.5C 22.8333,32.8333 23.1667,32.1667 23.5,31.5C 21.0752,30.3507 21.0752,29.684 23.5,29.5C 24.9776,29.7923 26.6442,29.7923 28.5,29.5C 29.354,30.5217 30.354,31.3551 31.5,32C 30.5294,33.2036 29.5294,33.7036 28.5,33.5C 29.5884,34.9344 30.9217,35.9344 32.5,36.5 Z"/></g><g><path style="opacity:0.42" fill="%230d0d0d" d="M 12.5,35.5 C 13.391,36.1098 14.391,36.4431 15.5,36.5C 15.5,36.8333 15.5,37.1667 15.5,37.5C 15.2978,39.9892 15.7978,42.3225 17,44.5C 18.0084,44.9817 19.175,45.1484 20.5,45C 18.7669,46.1889 17.1002,47.3556 15.5,48.5C 14.8333,48.5 14.1667,48.5 13.5,48.5C 13.8511,46.1305 14.0178,43.7972 14,41.5C 13.019,47.5327 11.519,47.866 9.5,42.5C 11.1084,43.5381 12.1084,42.8714 12.5,40.5C 11.4647,38.8716 11.4647,37.205 12.5,35.5 Z"/></g><g><path style="opacity:0.384" fill="%230e0e0e" d="M 32.5,36.5 C 32.8333,36.5 33.1667,36.5 33.5,36.5C 34.3201,38.1401 35.1534,39.8068 36,41.5C 36.0572,39.0898 37.2239,37.7565 39.5,37.5C 39.3893,38.1174 39.056,38.6174 38.5,39C 40.4414,40.8159 41.1081,42.8159 40.5,45C 38.0669,44.2129 36.0669,44.3795 34.5,45.5C 31.9818,44.4891 31.9818,43.1557 34.5,41.5C 33.7579,40.7132 32.9246,40.0465 32,39.5C 31.3333,40.8333 30.6667,40.8333 30,39.5C 29.7508,40.624 29.2508,41.624 28.5,42.5C 27.8933,42.3764 27.56,42.0431 27.5,41.5C 27.9382,41.5654 28.2716,41.3988 28.5,41C 26.8078,39.5993 26.1412,37.7659 26.5,35.5C 25.325,35.719 24.325,35.3857 23.5,34.5C 24.2472,34.2635 25.0805,33.9302 26,33.5C 27.4058,35.8709 29.4058,37.5376 32,38.5C 32.4643,37.9056 32.631,37.2389 32.5,36.5 Z"/></g><g><path style="opacity:0.393" fill="%230c0c0c" d="M 56.5,24.5 C 56.5,30.5 56.5,36.5 56.5,42.5C 54.4689,41.4613 53.1355,39.7946 52.5,37.5C 53.3764,37.6309 54.0431,37.2975 54.5,36.5C 52.913,34.5539 53.2464,33.0539 55.5,32C 54.3333,31.5 53.5,30.6667 53,29.5C 52.6667,29.8333 52.3333,30.1667 52,30.5C 51.5439,29.2559 52.0439,28.4226 53.5,28C 52.944,27.6174 52.6107,27.1174 52.5,26.5C 53.8333,25.8333 55.1667,25.1667 56.5,24.5 Z"/></g><g><path style="opacity:0.427" fill="%23070707" d="M 39.5,37.5 C 41.0295,38.0668 42.5295,38.7334 44,39.5C 44.2784,38.5842 44.7784,37.9175 45.5,37.5C 45.5,38.5 45.5,39.5 45.5,40.5C 44.9473,44.4557 44.1139,44.4557 43,40.5C 42.6667,40.8333 42.3333,41.1667 42,41.5C 42.7916,43.8462 42.6249,46.1795 41.5,48.5C 38.8333,48.5 36.1667,48.5 33.5,48.5C 33.5,48.1667 33.5,47.8333 33.5,47.5C 34.3382,47.1583 34.6716,46.4916 34.5,45.5C 36.0669,44.3795 38.0669,44.2129 40.5,45C 41.1081,42.8159 40.4414,40.8159 38.5,39C 39.056,38.6174 39.3893,38.1174 39.5,37.5 Z"/></g><g><path style="opacity:0.476" fill="%23080808" d="M 52.5,37.5 C 53.1355,39.7946 54.4689,41.4613 56.5,42.5C 56.5,44.5 56.5,46.5 56.5,48.5C 54.5,48.5 52.5,48.5 50.5,48.5C 51.8069,47.1984 51.8069,45.865 50.5,44.5C 51.7161,43.9041 53.0494,43.7374 54.5,44C 53.6667,43.1667 52.8333,42.3333 52,41.5C 48.8897,42.6734 48.723,42.1734 51.5,40C 50.1175,38.5391 50.4508,37.7058 52.5,37.5 Z"/></g><g><path style="opacity:0.345" fill="%23080808" d="M 12.5,35.5 C 11.4647,37.205 11.4647,38.8716 12.5,40.5C 12.1084,42.8714 11.1084,43.5381 9.5,42.5C 8.16667,42.5 6.83333,42.5 5.5,42.5C 4.7101,41.2058 3.7101,40.0391 2.5,39C 4.96878,36.9782 7.13545,37.1449 9,39.5C 9.4162,37.4497 10.5829,36.1164 12.5,35.5 Z"/></g><g><path style="opacity:0.386" fill="%23060606" d="M 27.5,41.5 C 27.56,42.0431 27.8933,42.3764 28.5,42.5C 29.2508,41.624 29.7508,40.624 30,39.5C 30.6667,40.8333 31.3333,40.8333 32,39.5C 32.9246,40.0465 33.7579,40.7132 34.5,41.5C 31.9818,43.1557 31.9818,44.4891 34.5,45.5C 34.6716,46.4916 34.3382,47.1583 33.5,47.5C 32.352,46.8359 31.0187,46.6692 29.5,47C 31.9434,44.4417 31.4434,43.6083 28,44.5C 27.3333,43.8333 26.6667,43.1667 26,42.5C 25.0228,43.7736 24.1894,43.7736 23.5,42.5C 22.3228,40.8974 22.4894,39.564 24,38.5C 24.4224,40.4257 25.5891,41.4257 27.5,41.5 Z"/></g><g><path style="opacity:0.407" fill="%230a0a0a" d="M 13.5,48.5 C 9.83333,48.5 6.16667,48.5 2.5,48.5C 2.28099,47.325 2.61432,46.325 3.5,45.5C 5.09833,46.4847 6.76499,46.6514 8.5,46C 7.16667,45.3333 7.16667,44.6667 8.5,44C 7.32843,43.6466 6.16176,43.8132 5,44.5C 3.97008,44.1639 3.47008,43.4972 3.5,42.5C 4.16667,42.5 4.83333,42.5 5.5,42.5C 6.83333,42.5 8.16667,42.5 9.5,42.5C 11.519,47.866 13.019,47.5327 14,41.5C 14.0178,43.7972 13.8511,46.1305 13.5,48.5 Z"/></g><g><path style="opacity:0.416" fill="%230e0e0e" d="M 23.5,42.5 C 24.1894,43.7736 25.0228,43.7736 26,42.5C 26.6667,43.1667 27.3333,43.8333 28,44.5C 31.4434,43.6083 31.9434,44.4417 29.5,47C 31.0187,46.6692 32.352,46.8359 33.5,47.5C 33.5,47.8333 33.5,48.1667 33.5,48.5C 30.5,48.5 27.5,48.5 24.5,48.5C 23.3918,46.2185 22.0585,44.0519 20.5,42C 21.5768,41.5304 22.5768,41.6971 23.5,42.5 Z"/></g><g><path style="opacity:0.43" fill="%230d0d0d" d="M 52.5,37.5 C 50.4508,37.7058 50.1175,38.5391 51.5,40C 48.723,42.1734 48.8897,42.6734 52,41.5C 52.8333,42.3333 53.6667,43.1667 54.5,44C 53.0494,43.7374 51.7161,43.9041 50.5,44.5C 51.8069,45.865 51.8069,47.1984 50.5,48.5C 47.5,48.5 44.5,48.5 41.5,48.5C 42.6249,46.1795 42.7916,43.8462 42,41.5C 42.3333,41.1667 42.6667,40.8333 43,40.5C 44.1139,44.4557 44.9473,44.4557 45.5,40.5C 46.1515,39.9094 46.8182,39.2427 47.5,38.5C 48.086,38.7093 48.586,39.0426 49,39.5C 49.1962,37.7139 50.0295,36.3805 51.5,35.5C 52.2975,35.9569 52.6309,36.6236 52.5,37.5 Z"/></g></svg>');
position: absolute;
height: 100%;
width: 150%;
opacity: 0.4;
top: 0px;
z-index: -1;
}
.banner-clip-path {
background: rgb(247, 247, 247);
clip-path: polygon(50% 85%, -11% 100%, 110% 100%);
height: 616px;
width: 100%;
position: absolute;
z-index: 0;
}
.list {
display: flex;
gap: 20px;
width: 125vw;
z-index: 0;
}
.list-item {
list-style: none;
width: 25vw;
height: 450px;
background-color: rgb(69, 6, 6);
}
.list-item:nth-child(2n+1) {
background-color: rgb(74, 33, 197);
}
.animation-btns-section {
background: rgb(247, 247, 247);
text-align: center;
position: relative;
z-index: 0;
}
.animation-btns-section .heading {
font-size: 2rem;
line-height: 2.5rem;
font-weight: 600;
}
.animation-btns-container {
padding: 50px;
display: flex;
justify-content: space-around;
align-items: center;
}
.btn-container .btn.btn-tertiary {
background: rgb(247, 247, 247);
border: transparent;
margin: 2px;
padding: 14px 51px;
text-decoration: none;
font-size: 2rem;
font-weight: 700;
}
.btn-label-container {
position: relative;
flex-direction: column;
}
.btn-label-container .btn-container .btn.btn-tertiary {
border: 2px solid black;
display: flex;
align-items: center;
gap: 8px;
}
.btn-label-container:hover .btn.btn-tertiary {
color: rgb(255, 255, 255);
background: rgb(0, 0, 0);
}
.ai-powered-icon {
order: -1;
width: 26px;
height: 22px;
position: relative;
overflow: hidden;
display: inline-block;
background: transparent;
clip-path: url(#iconClipPath);
}
.ai-powered-icon::before {
content: "";
width: 100%;
height: 400%;
position: absolute;
background: linear-gradient(195.59deg, rgb(236, 64, 122), rgb(236, 64, 122), rgb(245, 102, 0), rgb(242, 209, 0), rgb(236, 64, 122), rgb(242, 209, 0), rgb(245, 102, 0), rgb(236, 64, 122), rgb(245, 102, 0), rgb(242, 209, 0));
bottom: 0px;
animation: 5s ease-in-out 1ms infinite normal none running gradient;
}
@keyframes gradient {
100% {
bottom: -66px;
}
}
.btn-label-tooltip {
position: absolute;
opacity: 0;
background: rgb(252, 246, 189);
border: 0.5px solid rgb(185, 185, 185);
padding: 8px;
bottom: 63px;
left: 30px;
white-space: normal;
}
.btn-label-container:hover .btn-label-tooltip {
opacity: 1;
}
.btn-label-tooltip::before,
.btn-label-tooltip::after {
content: "";
position: absolute;
top: 100%;
width: 0px;
height: 0px;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
right: 25px;
}
.btn-label-tooltip::before {
border-top: 11px solid rgb(185, 185, 185);
}
.btn-label-tooltip::after {
border-top: 11.5px solid rgb(252, 246, 189);
top: 98%;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
}
.ai-powered-text {
font-weight: 700;
font-size: 1.1rem;
line-height: 1.6rem;
}
.btn-label-container-1 {
position: relative;
cursor: pointer;
}
.btn-label-container-1 .btn-container {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}
.btn-label-container-1 .btn-container::before {
content: "";
display: block;
width: 300px;
height: 300px;
position: absolute;
z-index: -1;
background: rgb(0, 0, 0);
transform: rotate(0deg);
}
.btn-label-container-1:hover .btn-container::before {
background: radial-gradient(100% 1360.73% at 100% 49.09%, rgb(242, 209, 0) 0%, rgb(255, 179, 71) 50%, rgb(236, 64, 122) 100%);
animation: 2s linear 0s infinite normal none running spin1;
}
@keyframes spin1 {
100% {
transform: rotate(360deg);
}
}
.btn-label-container-1 .btn-label {
position: absolute;
background: rgb(247, 247, 247);
top: 0px;
left: 50%;
padding: 0px 6px;
transform: translateY(-50%) translateX(-50%);
margin: 0;
}
.btn-label-container-1 .label-text {
line-height: 1.6rem;
font-size: 1.1rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 3px;
}
</style>
</head>
<body>
<div class="hero-banner">
<div class="inner-box"></div>
<div class="banner-clip-path"></div>
<ul class="list">
<li class="list-item"></li>
<li class="list-item"></li>
<li class="list-item"></li>
<li class="list-item"></li>
<li class="list-item"></li>
</ul>
</div>
<div class="animation-btns-section">
<p class="heading">Animation buttons</p>
<div class="animation-btns-container">
<div class="btn-label-container">
<div class="btn-container"><a href="#" class="btn btn-tertiary" title="Upgrade a CV">Button 1<span class="ai-powered-icon"><svg>
<defs>
<clipPath id="iconClipPath">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.6204 2.07223C14.6204 2.82498 14.2191 3.48399 13.6187 3.84692V5.23798L23.1859 5.23798V9.42837H25.1423V13.6188H23.1859V17.7634L12.6405 22V17.7634H2.09519V13.6188H0V9.42837H2.09519V5.23798L11.5235 5.23798V3.87376C10.8978 3.51711 10.476 2.84393 10.476 2.07223C10.476 0.927768 11.4037 0 12.5482 0C13.6927 0 14.6204 0.927768 14.6204 2.07223ZM10.385 11.5477C10.385 12.6921 9.45723 13.6199 8.31277 13.6199C7.16831 13.6199 6.24055 12.6921 6.24055 11.5477C6.24055 10.4032 7.16831 9.47543 8.31277 9.47543C9.45723 9.47543 10.385 10.4032 10.385 11.5477ZM16.7836 13.6199C17.928 13.6199 18.8558 12.6921 18.8558 11.5477C18.8558 10.4032 17.928 9.47543 16.7836 9.47543C15.6391 9.47543 14.7113 10.4032 14.7113 11.5477C14.7113 12.6921 15.6391 13.6199 16.7836 13.6199Z"></path>
</clipPath>
</defs>
</svg></span></a></div>
<p class="btn-label-tooltip"><span class="ai-powered-text">Label</span></p>
</div>
<div class="btn-label-container-1">
<div class="btn-container"><a href="#" class="btn btn-tertiary" title="Upgrade a CV">Button 2</a></div>
<p class="btn-label"><span class="label-text"><svg width="11" height="11" viewBox="0 0 10 10" fill="none">
<path d="M4.1257 2.00348L3.83108 1.41423L3.24182 1.1196L3.83108 0.824973L4.1257 0.235718L4.42033 0.824973L5.00959 1.1196L4.42033 1.41423L4.1257 2.00348ZM1.47405 3.182L0.97687 2.20604L0.000915527 1.70886L0.97687 1.23009L1.47405 0.235718L1.95282 1.23009L2.94719 1.70886L1.95282 2.20604L1.47405 3.182ZM7.95587 5.53902L8.43464 6.53339L9.42901 7.01216L8.43464 7.50934L7.95587 8.4853L7.45868 7.50934L6.48273 7.01216L7.45868 6.53339L7.95587 5.53902Z" fill="url(#paint0_linear_6897_39950)"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.14737 0.147314C8.06602 0.0659547 7.93411 0.0659544 7.85275 0.147314L0.147375 7.85269C0.0660161 7.93404 0.0660158 8.06595 0.147375 8.14731L1.85275 9.85269C1.93411 9.93404 2.06602 9.93405 2.14737 9.85269L9.85275 2.14731C9.93411 2.06595 9.93411 1.93405 9.85275 1.85269L8.14737 0.147314ZM8.14736 1.48065C8.066 1.39929 7.93409 1.39929 7.85273 1.48065L6.14736 3.18602C6.066 3.26738 6.066 3.39929 6.14736 3.48065L6.5194 3.85269C6.60076 3.93405 6.73267 3.93405 6.81403 3.85269L8.5194 2.14732C8.60076 2.06596 8.60076 1.93405 8.5194 1.85269L8.14736 1.48065Z" fill="url(#paint1_linear_6897_39950)"></path>
<defs>
<linearGradient id="paint0_linear_6897_39950" x1="7.54339" y1="-0.176761" x2="4.1503" y2="10.4458" gradientUnits="userSpaceOnUse">
<stop stop-color="#EC407A"></stop>
<stop offset="0.5" stop-color="#F56600"></stop>
<stop offset="1" stop-color="#F2D100"></stop>
</linearGradient>
<linearGradient id="paint1_linear_6897_39950" x1="10.0001" y1="1.2" x2="1.0834" y2="-0.467974" gradientUnits="userSpaceOnUse">
<stop stop-color="#EC407A"></stop>
<stop offset="0.5" stop-color="#F56600"></stop>
<stop offset="1" stop-color="#F2D100"></stop>
</linearGradient>
</defs>
</svg>Label</span></p>
</div>
</div>
</div>
</body>
</html>
Step 4: Testing and Finalizing
To see the effects in action, save your HTML and CSS files and open the HTML file in a web browser. Hover over the buttons to see the animations and tooltips in action.
That's it! You've successfully created animated buttons with tooltips using HTML and CSS. Feel free to customize the colours, animations, and styles to match your project's needs. Happy coding!
