Let’s create a Netflix Button Animation using HTML, CSS, and JavaScript.
This project will replicate the bold, cinematic feel of Netflix with an animated button that responds dynamically to hover and click events.
We’ll use:
- HTML for the button structure.
- CSS for styling, glowing effects, and smooth hover transitions.
- JavaScript to trigger animations like a play pulse or ripple effect.
This project is great for learning how to combine front-end technologies to build interactive and visually striking UI components. Whether you’re practicing for fun or adding effects to a website, the Netflix Button Animation will make your design look powerful and engaging. 🍿🔥
HTML :
This code creates a simple webpage with a button styled as “Netflix.” The HTML defines a container holding a link (<a>) with the class btn, which will be styled using style.css to look and animate like a Netflix button, while script.js can add interactivity. The <head> section sets the page title and ensures it works well on all devices, and the <body> displays the button in the center.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Netflix Button Animation | @coding.stella</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<a href="#" class="btn">Netflix</a>
</div>
<script src="script.js"></script>
</body>
</html>CSS :
This CSS styles the Netflix button with a modern animated effect: it centers the button on a dark background, gives it a red Netflix-themed color, and makes it glow with a red shadow when hovered. The span elements (which act as animated lines) are hidden by default (scaleY(0)) but expand vertically on hover, creating a cool animated border effect. The smooth transitions, hover glow, and letter spacing change make the button look dynamic and eye-catching.
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: "Poppins", serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #252432;
overflow: hidden;
}
.btn {
position: relative;
width: 240px;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.2);
border-radius: 10px;
cursor: pointer;
overflow: hidden;
font-size: 2em;
transition: 0.5s;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #e50914;
/* border: 1px solid #fff; */
}
.btn:hover {
filter: drop-shadow(0 0 10px #e50914) drop-shadow(0 0 30px #e50914);
letter-spacing: 0.2em;
color: #fff;
}
.btn span {
position: absolute;
top: 0;
width: 2px;
height: 100%;
background: #e50914;
pointer-events: none;
transition: transform 0.2s ease-in-out;
z-index: -1;
transform: scaleY(0);
transform-origin: bottom;
}
.btn:hover span {
transform: scaleY(1);
transform-origin: top;
}
.btn span:nth-child(even) {
transform-origin: top;
}
.btn:hover span:nth-child(even) {
transform-origin: bottom;
}
JavaScript:
This JavaScript waits until the page loads, then finds all elements with the class .btn and adds 120 <span> lines inside each button. Each span is positioned slightly to the right (left: i*2px) to cover the button and is given a random transition delay, so when the button is hovered, the red line animation plays at slightly different times, creating a glowing, wavy Netflix-style animation effect.
document.addEventListener("DOMContentLoaded", function () {
let btns = document.querySelectorAll(".btn");
btns.forEach(function (btn) {
let spans = [];
for (let i = 0; i < 120; i++) {
let span = document.createElement("span");
span.style.left = `${i * 2}px`;
spans.push(span);
btn.appendChild(span);
let randomDealy = Math.random() * 1 + 0;
span.style.transitionDelay = randomDealy + "s";
}
});
});In conclusion, building a Netflix Button Animation with HTML, CSS, and JavaScript is a fun way to experiment with creative UI effects. It gives your project a cinematic vibe while teaching you hover transitions, animation timing, and event-driven effects. Keep pushing your creativity and your buttons will never feel boring again! 🚀
If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!
