3D Tilt Toggle Button With HTML CSS JavaScript
Enhance the interactivity and modernity of your website by learning how to create a 3D tilt toggle button using HTML, CSS, and JavaScript.
In this article, we will demonstrate the steps to create an engaging toggle button that tilts on hover and click, providing a 3D visual effect. Discover how to use CSS transitions and transforms to animate the button and how to use JavaScript to switch its state.
For additional HTML, CSS, and JavaScript projects, see our website.
Whether you’re a novice or an expert developer, this guide will equip you with all the necessary techniques to build an impressive 3D toggle button on your website. Stand out and capture your audience’s attention by adding this unique and interactive button.
Source Code:
HTML:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>3D Tilt Toggle</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<label class="tilt-toggle">
<input class="tilt-toggle__input" type="checkbox">
<span class="tilt-toggle__input-ball">
<span class="tilt-toggle__sr">Power</span>
</span>
</label>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
——————————
đź“‚ Important Links:
——————————
>> Learn Graphics Design & Make A Successful Profession.
>> Canva Makes Graphics Design Easy.
>> Start Freelancing Today & Earn Money.
>> Make Video Editing As Your Profession.
CSS:
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--hue: 223;
--bg: hsl(var(--hue), 90%, 70%);
--fg: hsl(var(--hue), 90%, 10%);
--primary: hsl(var(--hue), 90%, 50%);
--trans-dur: 0.3s;
font-size: calc(60px + (120 - 60) * (100vw - 320px) / (2560 - 320));
}
body,
input {
font: 1em/1.5 sans-serif;
}
body {
background-color: var(--bg);
color: var(--fg);
display: flex;
height: 100vh;
transition: background-color var(--trans-dur), color var(--trans-dur);
}
.tilt-toggle,
.tilt-toggle__input {
position: relative;
}
.tilt-toggle {
margin: auto;
perspective: 480px;
}
.tilt-toggle__input,
.tilt-toggle__input:before,
.tilt-toggle__input:after,
.tilt-toggle__input-ball {
animation: tiltOffA 0.6s ease-in-out forwards;
display: block;
}
.tilt-toggle__input,
.tilt-toggle__input:before,
.tilt-toggle__input:after {
border-radius: 0.75em;
}
.tilt-toggle__input {
background-image: linear-gradient(
90deg,
hsla(var(--hue), 90%, 40%, 0) 20%,
hsla(var(--hue), 90%, 40%, 0.5) 30% 70%,
hsl(var(--hue), 90%, 40%) 80%
),
linear-gradient(hsl(var(--hue), 90%, 80%) 33%, hsl(var(--hue), 90%, 30%) 67%);
border-radius: 0.75em;
filter: grayscale(0.9);
outline: transparent;
width: 3em;
height: 1.5em;
-webkit-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
}
.tilt-toggle__input:before,
.tilt-toggle__input:after {
content: "";
position: absolute;
}
.tilt-toggle__input:before {
animation-name: tiltOffB;
background-color: var(--primary);
box-shadow: 0 0 max(1px, 0.05em) max(1px, 0.05em) var(--primary);
top: 0.125em;
left: 0.125em;
width: calc(100% - 0.25em);
height: calc(100% - 0.25em);
}
.tilt-toggle__input:after {
animation-name: shadowOff;
background-color: hsla(var(--hue), 90%, 10%, 0.7);
filter: blur(0.1em);
top: 0.2em;
left: 0.2em;
width: 100%;
height: 100%;
transform-origin: 0.75em 50%;
z-index: -1;
}
.tilt-toggle__input-ball {
animation-name: rollOff;
background-color: hsl(0, 0%, 100%);
border-radius: 50%;
box-shadow: -0.05em -0.05em 0.1em hsl(var(--hue), 10%, 80%) inset,
-0.25em -0.25em 0.25em hsl(var(--hue), 10%, 60%) inset,
0.15em 0.15em 0.0625em hsla(var(--hue), 10%, 10%, 0.7);
position: absolute;
top: 0.25em;
left: calc(50% - 0.5em);
width: 1em;
height: 1em;
transform: translate3d(-0.75em, 0, 0.3em);
}
.tilt-toggle__sr {
overflow: hidden;
position: absolute;
width: 1px;
height: 1px;
}
/* :checked */
.tilt-toggle__input:checked {
animation-name: tiltOnA;
filter: grayscale(0);
}
.tilt-toggle__input:checked:before {
animation-name: tiltOnB;
}
.tilt-toggle__input:checked:after {
animation-name: shadowOn;
transform-origin: calc(100% - 0.75em) 50%;
}
.tilt-toggle__input:checked + .tilt-toggle__input-ball {
animation-name: rollOn;
transform: translate3d(0.75em, 0, 0.3em);
}
/* pristine */
.tilt-toggle--pristine .tilt-toggle__input,
.tilt-toggle--pristine .tilt-toggle__input:before,
.tilt-toggle--pristine .tilt-toggle__input:after,
.tilt-toggle--pristine .tilt-toggle__input-ball {
animation: none;
}
/* Animations */
@keyframes shadowOn {
from {
transform: skewY(0);
}
50% {
transform: skewY(-10deg);
}
to {
transform: skewY(0);
}
}
@keyframes shadowOff {
from {
transform: skewY(0);
}
50% {
transform: skewY(10deg);
}
to {
transform: skewY(0);
}
}
@keyframes rollOn {
from {
transform: rotateY(0) translate3d(-0.75em, 0, 0.3em) rotateY(0);
}
50% {
transform: rotateY(20deg) translate3d(0.75em, 0, 0.3em) rotateY(-20deg);
}
to {
transform: rotateY(0) translate3d(0.75em, 0, 0.3em) rotateY(0);
}
}
@keyframes rollOff {
from {
transform: rotateY(0) translate3d(0.75em, 0, 0.3em) rotateY(0);
}
50% {
transform: rotateY(-20deg) translate3d(-0.75em, 0, 0.3em) rotateY(20deg);
}
to {
transform: rotateY(0) translate3d(-0.75em, 0, 0.3em) rotateY(0);
}
}
@keyframes tiltOnA {
from {
filter: grayscale(0.9);
transform: rotateY(0);
}
50% {
filter: grayscale(0);
transform: rotateY(20deg);
}
to {
filter: grayscale(0);
transform: rotateY(0);
}
}
@keyframes tiltOffA {
from {
filter: grayscale(0);
transform: rotateY(0);
}
50% {
filter: grayscale(0.9);
transform: rotateY(-20deg);
}
to {
filter: grayscale(0.9);
transform: rotateY(0);
}
}
@keyframes tiltOnB {
from {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(0.0625em, 0, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}
@keyframes tiltOffB {
from {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(-0.0625em, 0, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}Another article for you.
JavaScript
// for preventing animations on load
window.addEventListener("DOMContentLoaded", () => {
const tt = new TiltToggle(".tilt-toggle");
});
class TiltToggle {
pristine = "tilt-toggle--pristine";
constructor(el) {
this.el = document.querySelector(el);
this.init();
}
init() {
this.el?.classList.add(this.pristine);
this.el?.addEventListener("change", () => {
this.el?.classList.remove(this.pristine);
});
}
}
