<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Animated Share Btn</title>
<link
href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;1,400;1,500&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="share">
<h1 class="share__text">SHARE <i class="ri-share-fill"></i></h1>
<ul class="share__list">
<li class="share__item share__item--github">
<a href="https://www.youtube.com/channel/UCDFRpd2nCZSVmksGsxWfA0w" target="_blank"> <i class="ri-github-fill"></i> Github </a>
</li>
<li class="share__item share__item--youtube">
<a href="https://www.youtube.com/channel/UCDFRpd2nCZSVmksGsxWfA0w" target="_blank"> <i class="ri-youtube-fill"></i> Youtube </a>
</li>
<li class="share__item share__item--twitter">
<a href="https://twitter.com/lawtantra" target="_blank"> <i class="ri-twitter-fill"></i> Twitter </a>
</li>
<li class="share__item share__item--instagram">
<a href="https://www.instagram.com/lawtantra/" target="_blank"> <i class="ri-instagram-fill"></i> Instagram </a>
</li>
</ul>
</div>
<a href="https://www.youtube.com/channel/UCDFRpd2nCZSVmksGsxWfA0w" class="the-blood-coders__learn-it-btn" target="_blank">
<i class="ri-youtube-fill the-blood-coders__btn-icon"></i>
Learn it
</a>
<div class="the-blood-coders__backdrop">
<div class="the-blood-coders__popup">
<a href="https://www.youtube.com/channel/UCDFRpd2nCZSVmksGsxWfA0w" class="the-blood-coders__popup-header" target="_blank">
<i class="ri-youtube-fill the-blood-coders__btn-icon"></i>lawtantra
</a>
<h1 class="the-blood-coders__code-name">
<span class="the-blood-coders__code-name--span">Animated Share Button</span>😍💕
</h1>
<a href="https://youtu.be/U5e-7u7-23o" class="the-blood-coders__link"
target="_blank">https://www.youtube.com/channel/UCDFRpd2nCZSVmksGsxWfA0w</a>
<a href="#" class="the-blood-coders__ok-btn">Ok</a>
</div>
</div>
<script>
const btnOk = document.querySelector('.the-blood-coders__ok-btn');
btnOk.addEventListener('click', (e) => {
e.target.closest('.the-blood-coders__backdrop').remove();
});
</script>
</body>
</html>
Step 2: Create Style.css File.
:root{
--color-red : #dd1616;
--color-white : #fff;
--color-border : rgba(209, 209, 209, 0.815);
--color-youtube : linear-gradient(to top left, #dd1616, #dd1616);
--color-twitter : linear-gradient(to top left, #1da1f2, #0a9ee2);
--color-insta : linear-gradient(to top left, #962fbf, #d62976);
}
*{
padding: 0;
margin: 0;
}
body {
font-family: "Montserrat", sans-serif;
font-weight: 500;
height: 100vh;
background-color: var(--color-red);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-tap-highlight-color: transparent;
}
.share {
width: 12rem;
height: 4rem;
background-color: var(--color-white);
border-radius: 4px;
overflow: hidden;
-webkit-transition: width 0.5s 0.4s, height 0.5s;
-o-transition: width 0.5s 0.4s, height 0.5s;
transition: width 0.5s 0.4s, height 0.5s;
-webkit-box-shadow: 0 0 1rem rgba(29, 29, 29, 0.1);
box-shadow: 0 0 1rem rgba(29, 29, 29, 0.1);
cursor: pointer;
}
.share:hover {
-webkit-transition: all 0.5s, width 0.5s ease-in-out, height 0.5s 0.4s ease-in-out;
-o-transition: all 0.5s, width 0.5s ease-in-out, height 0.5s 0.4s ease-in-out;
transition: all 0.5s, width 0.5s ease-in-out, height 0.5s 0.4s ease-in-out;
width: 270px;
height: 320px;
border-radius: 4px;
}
.share__text {
font-size: 1.6em;
color: var(--color-red);
padding: 1.1rem 2rem;
border-bottom: 1px solid var(--color-border);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.share__text i {
margin-left: 1rem;
}
.share__list {
opacity: 0;
list-style: none;
padding:1rem;
-webkit-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
}
.share:hover .share__list {
-webkit-transition: all 0.3s 1s;
-o-transition: all 0.3s 1s;
transition: all 0.3s 1s;
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.share__item {
font-size: 1em;
padding: 1rem;
background-image: -webkit-gradient(linear, right bottom, left top, from(#111), to(#000));
background-image: -o-linear-gradient(bottom right, #111, #000);
background-image: linear-gradient(to top left, #111, #000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.share__item:not(:last-child) {
border-bottom: 1px solid var(--color-border);
}
.share__item a{
text-decoration: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.share__item i {
margin-right: 6px;
font-size: 1.4em;
}
.share__item--youtube {
background-image: var(--color-youtube);
}
.share__item--twitter {
background-image: var(--color-twitter);
}
.share__item--instagram {
background-image: var(--color-insta);
}
.the-blood-coders__learn-it-btn,
.the-blood-coders__learn-it-btn:link,
.the-blood-coders__learn-it-btn:active,
.the-blood-coders__learn-it-btn:visited {
padding: 0.5rem 2rem;
background-color: #eee;
position: absolute;
bottom: 2rem;
color: red;
font-family: "Poppins", sans-serif;
text-decoration: none;
border-radius: 4px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: 400;
-webkit-box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.the-blood-coders__learn-it-btn:active {
-webkit-box-shadow: 0 0 0rem rgba(0, 0, 0, 0);
box-shadow: 0 0 0rem rgba(0, 0, 0, 0);
-webkit-transform: translateX(-50%) scale(0.99);
-ms-transform: translateX(-50%) scale(0.99);
transform: translateX(-50%) scale(0.99);
}
.the-blood-coders__btn-icon {
font-size: 1.6em;
margin-right: 0.5rem;
}
.the-blood-coders__backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.644);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.the-blood-coders__popup {
width: 18rem;
background-color: rgb(255, 255, 255);
padding: 1rem;
border-radius: 4px;
font-family: "Poppins", sans-serif;
text-align: center;
-webkit-box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
}
.the-blood-coders__popup-header,
.the-blood-coders__popup-header:link,
.the-blood-coders__popup-header:visited {
font-size: 1.2em;
font-weight: 600;
margin-top: -2.6rem;
margin-bottom: 2rem;
background-image: -webkit-gradient(linear, left bottom, right top, from(#e90606), to(#ff4a4a));
background-image: -o-linear-gradient(left bottom, #e90606, #ff4a4a);
background-image: linear-gradient(to right top, #e90606, #ff4a4a);
color: rgb(241, 241, 241);
padding: 0.5rem 1rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 1px;
-webkit-transform: skew(-10deg) rotate(-3deg);
-ms-transform: skew(-10deg) rotate(-3deg);
transform: skew(-10deg) rotate(-3deg);
-webkit-box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
-webkit-tap-highlight-color: transparent;
text-decoration: none;
}
.the-blood-coders__code-name {
font-size: 1.2em;
margin-bottom: 1rem;
}
.the-blood-coders__code-name--span {
background-image: -webkit-gradient(linear, left bottom, right top, from(#e20000), to(#ff3131));
background-image: -o-linear-gradient(left bottom, #e20000, #ff3131);
background-image: linear-gradient(to right top, #e20000, #ff3131);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.the-blood-coders__link {
word-break: break-all;
line-height: 1.4;
display: block;
color: rgb(29, 29, 250);
margin-bottom: 1.2rem;
}
.the-blood-coders__ok-btn,
.the-blood-coders__ok-btn:link,
.the-blood-coders__ok-btn:active,
.the-blood-coders__ok-btn:visited {
text-transform: uppercase;
margin-top: 1rem;
display: inline-block;
padding: 0.5rem 2rem;
color: #ffffff;
background-image: -webkit-gradient(linear, left bottom, right top, from(#e20000), to(#ff3131));
background-image: -o-linear-gradient(left bottom, #e20000, #ff3131);
background-image: linear-gradient(to right top, #e20000, #ff3131);
font-family: "Poppins", sans-serif;
text-decoration: none;
font-weight: 400;
-webkit-tap-highlight-color: transparent;
-webkit-transform: skew(-10deg) rotate(-3deg);
-ms-transform: skew(-10deg) rotate(-3deg);
transform: skew(-10deg) rotate(-3deg);
-webkit-box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
}
Step 3: Result.
To that end, I am only an email away. Contact me with any questions.
Happy coding,
By Aakaanksha 💕 [TheBloodCoders] ( SoloLearn User )
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
If any Photos/Videos/Article/Blog/Content has an issue with this upload, please contact us and we will remove it immediately. Contact E-Mail :lawtantra@gmail.com
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
0 Comments
Please do not enter any spam link in the comment box.