Photo by Jackson Sophat on Unsplash
Make slide and shine animation with button hover transition in css
To create buttons with labels and icons that have a shine animation effect, we will use a combination of HTML and CSS. The following tutorial provides the necessary HTML and CSS code to achieve this effect.
HTML and CSS Code for Animated Buttons with Labels and Icons
HTML Structure
Below is the HTML structure for creating three buttons, each with unique animations and icons. The structure includes a container for each button and its associated label.
<!-- image.svg -->
<!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>
.main {
border: 5px dotted #d6d46f;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70%;
height: fit-content;
padding: 90px;
}
.btn-group {
display: flex;
justify-content: space-between;
margin-top: 90px;
}
.btn-div {
cursor: pointer;
}
.btn-label-container,
.btn-container {
position: relative;
}
.btn-container {
overflow: hidden;
border-radius: 50px;
}
.btn-lbl-cont {
font-weight: 500;
font-size: .8rem;
color: #050129;
padding: 5px;
border-radius: 25px;
position: absolute;
background: linear-gradient(to right, #ee0707, #ef8a06, #efeb06, #2af800);
}
.btn-label {
margin: 0;
padding: 4px 7px;
border-radius: 25px;
background: #ebe70c;
}
.label-1 {
top: -90px;
opacity: 0;
left: 50%;
transform: translateX(-50%);
animation: 2s slide 2s forwards 1;
animation-fill-mode: forwards;
}
.label-2 {
bottom: -13px;
opacity: 0;
left: 50%;
transform: translateX(-50%);
animation: 2s slide2 2s forwards 1;
animation-fill-mode: forwards;
}
.btn {
transition: all 1s;
cursor: pointer;
background: rgb(36, 2, 255);
padding: 15px 30px;
color: #fff;
font-weight: 500;
font-size: 1.5rem;
border: none;
border-radius: 25px;
}
.btn-div:hover .btn {
transition: all 1s;
box-shadow: 0 5px 1px 1px rgb(6, 1, 27);
transform: translateY(-10px);
}
.btn-3 {
display: flex;
align-items: center;
gap: 10px;
}
.icon-container {
display: inline-block;
background: linear-gradient(to right, #e66465, #9198e5);
height: 25px;
width: 25px;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.icon {
height: 80%;
width: 80%;
}
.sheen:after {
content: '';
position: absolute;
left: -30%;
top: -12px;
height: 50px;
transform: rotate(-30deg);
width: 5px;
background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255, 255, 255, 0.5) 50%, rgba(229, 172, 142, 0));
animation: 2s sheen 4s forwards infinite;
}
@keyframes sheen {
100% {
left: 115%;
}
}
@keyframes slide {
100% {
opacity: 1;
top: -60px;
}
}
@keyframes slide2 {
100% {
opacity: 1;
bottom: -60px;
}
}
</style>
</head>
<body>
<div class="main">
<h1>Buttons For Animation</h1>
<div class="btn-group">
<div class="btn-label-container">
<div class="btn-lbl-cont label-1">
<p class="btn-label sheen">btn label</p>
</div>
<div class="btn-div">
<button class="btn btn-1">Button 1</button>
</div>
</div>
<div class="btn-label-container">
<div class="btn-div">
<button class="btn btn-2">Button 2</button>
</div>
<div class="btn-lbl-cont label-2">
<p class="btn-label sheen">btn label</p>
</div>
</div>
<div class="btn-div">
<button class="btn btn-3">Button 3<span class="btn-container">
<span class="icon-container sheen"><img class="icon" src="./images.svg" alt="icon"></span>
</span></button>
</div>
</div>
</div>
</body>
</html>
Explanation of the Code
HTML Structure:
The HTML consists of a main container (
.main) which centers the content on the page.Inside the
.maincontainer, there is a title (<h1>) and a group of buttons (.btn-group).
Button Containers:
Each button has a container (
.btn-div) to handle hover effects.The button labels are in containers (
.btn-label-container) that position them absolutely for animation effects.
CSS Styling:
Main Container: The main container is styled with a dotted border and centered using absolute positioning and CSS transforms.
Button Group: The buttons are displayed in a flex container to space them evenly.
Button Styling: Buttons have padding, border-radius, and background color. A hover effect is added to elevate the button slightly when hovered.
Icon and Sheen Effect: The icon container has a linear gradient background. The
sheeneffect is created using a pseudo-element and CSS keyframes to animate a shine across the button.
Animations:
Sheen Animation: The
sheenanimation slides a gradient across the button to create a shine effect.Label Animation: The
slideandslide2animations make the labels slide into view from the top and bottom, respectively.
SVG Icon
To include an SVG icon for the buttons, you can use the following SVG code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="201px" height="251px"
style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path style="opacity:1" fill="none"
d="M -0.5,-0.5 C 66.5,-0.5 133.5,-0.5 200.5,-0.5C 200.5,83.1667 200.5,166.833 200.5,250.5C 133.5,250.5 66.5,250.5 -0.5,250.5C -0.5,166.833 -0.5,83.1667 -0.5,-0.5 Z" />
</g>
<g>
<path style="opacity:1" fill="#7058af"
d="M 21.5,16.5 C 32.8739,18.0067 44.2072,19.84 55.5,22C 70.3333,36.8333 85.1667,51.6667 100,66.5C 114.833,51.6667 129.667,36.8333 144.5,22C 154.644,20.0379 164.811,18.2045 175,16.5C 176.436,16.5589 177.769,16.8922 179,17.5C 177.914,29.2703 175.914,40.937 173,52.5C 158.5,67 144,81.5 129.5,96C 133.682,100.349 138.015,104.515 142.5,108.5C 149.747,100.986 157.247,100.653 165,107.5C 166.52,111.375 166.854,115.375 166,119.5C 162.353,123.982 158.519,128.315 154.5,132.5C 158.985,137.485 163.651,142.319 168.5,147C 186.48,147.639 194.313,156.806 192,174.5C 185.528,187.982 175.361,191.815 161.5,186C 154.431,180.693 150.931,173.526 151,164.5C 146.319,159.651 141.485,154.985 136.5,150.5C 132.682,153.818 129.015,157.318 125.5,161C 114.81,164.822 108.476,161.156 106.5,150C 107.045,145.41 109.045,141.577 112.5,138.5C 108.515,134.015 104.349,129.682 100,125.5C 95.6513,129.682 91.4846,134.015 87.5,138.5C 95.4613,146.038 95.4613,153.538 87.5,161C 83.9279,162.405 80.2613,162.738 76.5,162C 72.0181,158.353 67.6848,154.519 63.5,150.5C 58.5148,154.985 53.6814,159.651 49,164.5C 46.6533,185.857 35.4866,192.69 15.5,185C 6.67502,176.281 5.17502,166.447 11,155.5C 16.3828,149.227 23.2162,146.393 31.5,147C 36.3485,142.319 41.0152,137.485 45.5,132.5C 41.4808,128.315 37.6475,123.982 34,119.5C 31.9496,107.217 37.1163,101.717 49.5,103C 52.579,104.248 55.2457,106.081 57.5,108.5C 61.9851,104.515 66.3184,100.349 70.5,96C 56,81.5 41.5,67 27,52.5C 24.6413,41.8731 22.4746,31.2064 20.5,20.5C 20.6233,19.0755 20.9566,17.7421 21.5,16.5 Z" />
</g>
<g>
<path style="opacity:1" fill="#f8f8f8"
d="M 29.5,25.5 C 37.2472,26.5194 44.9138,28.0194 52.5,30C 80.3333,57.8333 108.167,85.6667 136,113.5C 135.28,116.265 133.613,118.599 131,120.5C 106.5,96 82,71.5 57.5,47C 54.8728,44.9833 52.3728,45.1499 50,47.5C 49.3333,48.8333 49.3333,50.1667 50,51.5C 74.6667,76.1667 99.3333,100.833 124,125.5C 123.28,128.265 121.613,130.599 119,132.5C 90.6667,104.167 62.3333,75.8333 34,47.5C 32.3041,40.1868 30.8041,32.8535 29.5,25.5 Z" />
</g>
<g>
<path style="opacity:1" fill="#f8f8f8"
d="M 165.5,25.5 C 167.288,25.2148 168.955,25.5481 170.5,26.5C 169.066,33.5008 167.566,40.5008 166,47.5C 152.167,61.3333 138.333,75.1667 124.5,89C 121.735,88.2797 119.401,86.6131 117.5,84C 128.333,73.1667 139.167,62.3333 150,51.5C 151.123,47.9447 149.789,45.9447 146,45.5C 134.242,55.2549 123.075,65.7549 112.5,77C 110.255,76.8047 108.422,75.6381 107,73.5C 106.333,72.5 106.333,71.5 107,70.5C 120.5,57 134,43.5 147.5,30C 153.639,28.5449 159.639,27.0449 165.5,25.5 Z" />
</g>
<g>
<path style="opacity:1" fill="#f6f6f6"
d="M 75.5,101.5 C 77.8122,103.146 79.8122,105.146 81.5,107.5C 77.5154,111.985 73.3487,116.318 69,120.5C 66.9824,118.65 65.1491,116.65 63.5,114.5C 67.5219,110.146 71.5219,105.813 75.5,101.5 Z" />
</g>
<g>
<path style="opacity:1" fill="#f7f7f7"
d="M 43.5,110.5 C 44.8734,110.343 46.2068,110.51 47.5,111C 60,123.5 72.5,136 85,148.5C 85.2929,154.401 82.7929,155.901 77.5,153C 65.6667,141.167 53.8333,129.333 42,117.5C 41.1668,114.829 41.6668,112.496 43.5,110.5 Z" />
</g>
<g>
<path style="opacity:1" fill="#f7f7f7"
d="M 152.5,110.5 C 157.494,110.329 159.328,112.662 158,117.5C 146.167,129.333 134.333,141.167 122.5,153C 117.138,155.891 114.638,154.391 115,148.5C 127.702,135.965 140.202,123.298 152.5,110.5 Z" />
</g>
<g>
<path style="opacity:1" fill="#fafafa"
d="M 87.5,113.5 C 89.8122,115.146 91.8122,117.146 93.5,119.5C 89.5154,123.985 85.3487,128.318 81,132.5C 78.9824,130.65 77.1491,128.65 75.5,126.5C 79.5219,122.146 83.5219,117.813 87.5,113.5 Z" />
</g>
<g>
<path style="opacity:1" fill="#f4f4f4"
d="M 50.5,138.5 C 53.2254,139.713 55.5588,141.546 57.5,144C 53.3333,148.167 49.1667,152.333 45,156.5C 43.6912,154.024 41.8579,152.024 39.5,150.5C 43.1886,146.48 46.8553,142.48 50.5,138.5 Z" />
</g>
<g>
<path style="opacity:1" fill="#f5f5f5"
d="M 147.5,138.5 C 152.419,141.748 156.753,145.748 160.5,150.5C 158.142,152.024 156.309,154.024 155,156.5C 150.833,152.333 146.667,148.167 142.5,144C 144.373,142.296 146.04,140.463 147.5,138.5 Z" />
</g>
<g>
<path style="opacity:1" fill="#fafafa"
d="M 23.5,155.5 C 37.9024,155.388 42.7357,162.055 38,175.5C 31.9114,181.491 25.4114,181.991 18.5,177C 13.1657,167.963 14.8323,160.797 23.5,155.5 Z" />
</g>
<g>
<path style="opacity:1" fill="#f9f9f9"
d="M 167.5,155.5 C 180.374,154.206 185.874,159.872 184,172.5C 179.451,180.81 172.951,182.643 164.5,178C 157.226,169.416 158.226,161.916 167.5,155.5 Z" />
</g>
</svg>
Happy coding!
