Hello Guys In This Post I will teach you how to create amazing download Button with tooltip using HTML & CSS only.
This download button is created by pure HTML And Css no javascript is used here. you can use this button in your project as a download Button.
Full Video Tutorial is on my Youtube Channel.
Here Is the HTML code for download button.👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- custom css -->
<link rel="stylesheet" href="style.css">
<!-- font awesome cdn -->
<script src="https://kit.fontawesome.com/8385bc9e15.js" crossorigin="anonymous"></script>
<title>Download button hover effact</title>
</head>
<body>
<div class="button" data-tooltip="file-size:50Mb">
<div class="button-wrapper">
<div class="text">Download</div>
<span class="icon"><i class="fa-solid fa-download"></i></span>
</div>
</div>
</body>
</html>
Here Is the CSS code for download button.👇
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #121212;
}
.button{
width: 150px;
height: 50px;
background-image: linear-gradient(to left, #DD5E98, #CC4BC2);
position: relative;
text-align: center;
border-radius: 8px;
transition: all 0.4s ease-in-out;
cursor: pointer;
}
.button::before{
content: attr(data-tooltip);
width: 130px;
height: 35px;
background-color: #FE938C;
font-size: 14px;
font-weight: bold;
color: #000000;
text-transform: capitalize;
border-radius: 6px;
line-height: 35px;
position: absolute;
bottom: 74px;
left: 50%;
transform: translateX(-50%);
}
.button::after{
position: absolute;
content: "";
width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: #FE938C;
bottom: 54px;
left: 50%;
transform: translateX(-50%);
}
.button::after,
.button::before{
opacity: 0;
visibility: hidden;
transition: all .3s ease-in-out;
}
.text{
font-size: 16px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}
.button-wrapper, .text, .icon{
overflow: hidden;
position: absolute;
width: 100%;
height: 100%;
left: 0;
color: #fff;
}
.text{
top: 0;
}
.text, .icon{
transition: top 0.4s ease-in-out;
}
.icon{
color: #fff;
top: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.button:hover{
box-shadow: 0 8px 10px rgba(255, 255, 255, 0.1);
background-image: linear-gradient(to right, #DD5E98, #CC4BC2);
}
.button:hover .text{
top: -100%;
}
.button:hover .icon{
top: 0;
}
.button:hover::before,
.button:hover::after{
opacity: 1;
visibility: visible;
}
.button:hover::after{
bottom: 70px;
}
.button:hover::before{
bottom: 90px;
}
Watch full Tutorial..👇
Download Source Code
DOWNLOAD NOW
Share the Post and Video with your friends.
