Learn with us how to create an Electric Button in CSS!
If you found us on TikTok on the following post, check out this article and copy-paste the full code!
Happy coding! 😻
@creative.tim Check the link in bio for How to #46 full code 👀 #webdevelopment #46 #techtok #csscoding #programmingexercises #programming #webdev ♬ original sound - Creative Tim
1. HTML Code
<a href="https://www.mythrillfiction.com/the-dark-rider" alt="Mythrill" target="_blank">
<div class="card">
<div class="wrapper">
<img src="https://ggayane.github.io/css-experiments/cards/dark_rider-cover.jpg" class="cover-image" />
</div>
<img src="https://ggayane.github.io/css-experiments/cards/dark_rider-title.png" class="title" />
<img src="https://ggayane.github.io/css-experiments/cards/dark_rider-character.webp" class="character" />
</div>
</a>
<a href="https://www.mythrillfiction.com/force-mage" alt="Mythrill" target="_blank">
<div class="card">
<div class="wrapper">
<img src="https://ggayane.github.io/css-experiments/cards/force_mage-cover.jpg" class="cover-image" />
</div>
<img src="https://ggayane.github.io/css-experiments/cards/force_mage-title.png" class="title" />
<img src="https://ggayane.github.io/css-experiments/cards/force_mage-character.webp" class="character" />
</div>
</a>
2. CSS Code
body {
background:black;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
.voltage-button {
position:relative;
button {
color:white;
background: #17255A;
padding:1.6rem 5rem 1.8rem 5rem;
border-radius:5rem;
border:5px solid #EFC3F5;
font-size:1.8rem;
line-height:1em;
letter-spacing:0.075em;
transition:background 0.3s;
&:hover {
cursor:pointer;
background: #6D98BA;
+ svg, +svg + .dots {
opacity:1;
}
}
}
svg {
display:block;
position:absolute;
top:-0.75em;
left:-0.25em;
width:calc(100% + 0.5em);
height:calc(100% + 1.5em);
pointer-events:none;
opacity:0;
transition:opacity 0.4s;
transition-delay:0.1s;
path {
stroke-dasharray: 100;
filter: url('#glow');
&.line-1 {
stroke:#E6F14A;
stroke-dashoffset: 0;
animation: spark-1 3s linear infinite;
}
&.line-2 {
stroke:#A06CD5 ;
stroke-dashoffset: 500;
animation: spark-2 3s linear infinite;
}
}
}
.dots {
opacity:0;
transition:opacity 0.3s;
transition-delay:0.4s;
.dot {
width:1rem;
height:1rem;
background:white;
border-radius:100%;
position:absolute;
opacity:0;
}
.dot-1 {
top:0;
left:20%;
animation: fly-up 3s linear infinite;
}
.dot-2 {
top:0;
left:55%;
animation: fly-up 3s linear infinite;
animation-delay: 0.5s;
}
.dot-3 {
top:0;
left:80%;
animation: fly-up 3s linear infinite;
animation-delay: 1s;
}
.dot-4 {
bottom:0;
left:30%;
animation: fly-down 3s linear infinite;
animation-delay: 2.5s;
}
.dot-5 {
bottom:0;
left:65%;
animation: fly-down 3s linear infinite;
animation-delay: 1.5s;
}
}
}
@keyframes spark-1 {
to {
stroke-dashoffset: -1000;
}
}
@keyframes spark-2 {
to {
stroke-dashoffset: -500;
}
}
@keyframes fly-up{
0% { opacity:0; transform:translateY(0) scale(0.2); }
5% { opacity:1; transform:translateY(-1.5rem) scale(0.4);}
10%,100%{ opacity:0; transform:translateY(-3rem) scale(0.2);}
}
@keyframes fly-down {
0% { opacity:0; transform:translateY(0) scale(0.2); }
5% { opacity:1; transform:translateY(1.5rem) scale(0.4);}
10%,100%{ opacity:0; transform:translateY(3rem) scale(0.2);}
}
I hope you did find this tutorial useful!
For more web development or UI/UX design tutorials, follow us on:
Other useful resources:
