In this project, we have 2 buttons. You can use it in your project for the user to click it to download and upload any files. It has a nice design compared to default HTML buttons. When hovered, the buttons emit a nice shadow effect and the letters get some spacing for a nice and cinematic effect.
My video tutorial and demo is below:
Let's now see the source codes of this project.
Paste the following code in your HTML file:
<!--Created by CodingPorium,2021. Visit codingporium.blogspot.com or search for CodingPorium on YouTube with no spaces. -->
<!DOCTYPE html>
<html>
<head>
<title>Cool CSS Download and Upload Buttons | CodingPorium</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
body{
display: flex;
font-family: poppins;
justify-content: center;
align-items: center;
height: 600px;
background-color: mediumseagreen;
}
.container{
background:rgba(255,255,255,0.25);
box-shadow: 0 8px 32px 0 rgba(31,38,135,0.37);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border-radius: 10px;
border:1px solid rgba(255,255,255,0.18);
padding:16px;
}
.btn{
position:relative;
background-color: #0330fc;
border-radius: 26px;
font-family: poppins;
border:none;
color:white;
padding:12px 30px;
cursor:pointer;
font-size:20px;
transition:0.3s;
}
.download:hover{
background-color: #5775fa;
letter-spacing: 2px;
box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
transition: 0.3s;
}
.upload{
background-color: #5d07de;
}
.upload:hover{
background-color: #8444e3;
letter-spacing: 2px;
box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
-webkit-box-shadow: 0px 5px 40px -10px;
-moz-box-shadow:0px 5px 40px -10px rgba(0,0,0,0.57);
transition: 0.3s;
}
</style>
</head>
<body>
<div class="container">
<button class="btn download"><i class="fa fa-download"></i> Download</button>
<button class="btn upload"><i class="fa fa-upload"></i> Upload</button>
</div>
</body>
</html>
And that's all for this tutorial. Thanks for reading and do subscribe to our YouTube channel to support us!
Till the next one, goodbye!
Post a Comment