<script src="https://kit.fontawesome.com/a7e9f794eb.js" crossorigin="anonymous"></script>
<div class="container">
<a href="#" class="btn btn1">
<span class="icon1">
<i class="fas fa-shipping-fast"></i>
</span>
<span class="text1">Click Here</span>
</a>
<a href="#" class="btn btn2">
<span class="icon2">
<i class="far fa-envelope"></i>
</span>
<span class="text2">Mail</span>
</a>
</div>
*,
*::after,
*::before {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
min-height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
background: linear-gradient(to right, #ee0979, #ff6a00);
}
a {
text-decoration: none;
color: #fff;
font-size: 18px;
text-transform: uppercase;
letter-spacing: 4px;
text-shadow: 2px 2px 8px 1px #000;
}
i {
font-size: 30px;
}
.btn {
position: relative;
width: 200px;
height: 70px;
display: flex;
margin: 50px;
border-radius: 20px;
justify-content: center;
align-items: center;
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px,
rgba(0, 0, 0, 0.22) 0px 10px 10px;
}
/* ===== Button 1 ===== */
.btn1 {
overflow: hidden;
}
.text1,
.icon1 {
position: absolute;
width: 200px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
transition: left 200ms ease;
text-shadow: 2px 2px 5px #000;
}
.text1 {
left: 0%;
}
.icon1 {
left: -100%;
}
.active.text1 {
left: 100%;
}
.active.icon1 {
left: 0%;
}
/* ===== Button 2 ===== */
.btn2 {
overflow: hidden;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0 10px;
}
.icon2,
.text2 {
text-shadow: 2px 2px 4px #000;
}
.icon2 i {
font-size: 32px;
transition: opacity 200ms ease, transform 250ms ease;
}
/* .btn2:hover i {
animation: blink 1500ms ease-in-out infinite;
} */
.active.icon2 i {
transform: scale(1.2);
opacity: 0;
}
@keyframes blink {
0%,
50%,
100% {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
const btn1 = document.querySelector(".btn1");
const text1 = document.querySelector(".text1");
const icon1 = document.querySelector(".icon1");
btn1.addEventListener("click", () => {
text1.classList.toggle("active");
icon1.classList.toggle("active");
});
// ==============================================
const btn2 = document.querySelector(".btn2");
const text2 = document.querySelector(".text2");
const icon2 = document.querySelector(".icon2");
console.log(text2.innerHTML.toLowerCase());
btn2.addEventListener("click", () => {
if (text2.innerHTML.toLowerCase() == "mail") {
text2.innerHTML = "DONE";
} else {
text2.innerHTML = "mail";
}
icon2.classList.toggle("active");
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.