Learn how to create a simple but visually appealing close button animation effect on your webpage using HTML, CSS and JavaScript. In this video, we will walk through the process of setting up a webpage, styling it using CSS and creating an animation effect using JavaScript. Whether you’re a beginner or an experienced developer, this video will show you how to add a professional touch to your web design. By the end of this video, you will have a solid understanding of how to create a close button animation effect for your webpage.
This code is an example of a simple webpage that demonstrates a close button animation. The webpage includes an HTML document, a CSS stylesheet, and a JavaScript file.
The HTML document includes a head section that sets the character set, viewport, and links to a CSS stylesheet and a font awesome library. The body of the document includes a section with a button to show the report and a card element that contains the report content and a close button. The JavaScript file is linked at the bottom of the body to handle the animation of the close button.
The CSS stylesheet is used to style the webpage. It starts with a universal selector that sets default styles for all elements on the page. The body element has a background color of #333. The container class centers the content of the page and sets a maximum width. The btn-show-report class styles the show report button with a transparent background and white text. The card class styles the report card with a gradient background, a backdrop-filter for blur effect, and a box-shadow. The card-content class styles the layout of the report card using CSS Grid. The fa-hourglass-start class styles the font awesome icon inside the report card, and the btn-close class styles the close button.
The JavaScript file handle the animation of the close button. When the button is clicked, the card element is hidden and the close button disappears. The animation is handled by changing the width and display properties of the card element and the display property of the close button.
Overall, the webpage uses a combination of HTML, CSS and JavaScript to create a simple webpage that demonstrates a close button animation effect.
Additionally, the CSS also includes a number of other styles that are used to enhance the visual design of the webpage. One such example is the use of the “backdrop-filter” property on the card class. This property allows you to apply graphical effects such as blurring or color shifting to the area behind an element. This can be a powerful tool for creating a more polished and visually appealing design, as it can be used to create a sense of depth and movement on the page.
Another interesting aspect of the CSS is the use of the “grid-template-columns” property on the card-content class. This property is used to create a grid layout within the card element, which allows for more precise control over the placement and spacing of the report content. This can be especially useful for creating a more polished and professional-looking design, as it allows for more flexibility and control over the layout of the page.
Finally, it’s worth noting that the JavaScript file is used to handle the animation of the close button. When the button is clicked, the card element is hidden and the close button disappears. The animation is handled by changing the width and display properties of the card element and the display property of the close button. This is a simple but effective way to handle the animation, as it allows for smooth and seamless transitions between the different states of the webpage.
In conclusion, the code provided is a great example of how HTML, CSS, and JavaScript can be used together to create a simple but visually appealing webpage with a close button animation effect. The use of CSS grid layout and backdrop-filter properties add a polished look to the design. The use of JavaScript to handle the animation of the close button make the webpage more interactive and user-friendly.
<section class="container">
<button class="btn-show-report">Show report</button>
<div class="card">
<div class="card-body">
<aside><i class="fa-solid fa-hourglass-start"></i></aside>
<main>
<h3>Weekly report</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere,
ipsum. Repellendus rem blanditiis optio facere laboriosam alias
error fuga quis!
</p>
</main>
</div>
<button class="btn-close">x</button>
</div>
</section>* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background: #fff;
}
.btn-show-report {
background: transparent;
color: #eee;
padding: 0.33rem 0.55rem;
}
.container {
max-width: 700px;
padding: 0 2rem;
}
.card {
position: relative;
width: 300px;
background: linear-gradient(0.25turn, #e66465, #9198e5);
backdrop-filter: blur(6.3px);
box-shadow: 5px 4px 10px rgba(0, 0, 0, 0.6);
padding: 1rem;
margin-top: 20vh;
border-radius: 5px;
width: 0;
display: none;
}
.card-body {
display: grid;
grid-template-columns: 1fr 3fr;
align-items: center;
}
.fa-hourglass-start {
font-size: 4rem;
color: #1ac5f0;
}
h3,
p {
color: #fff;
margin-bottom: 1rem;
}
.btn-close {
position: absolute;
top: -10px;
left: -10px;
border-radius: 50px;
width: 20px;
height: 20px;
border: 1px solid silver;
background: #cf0b0b;
color: #fff;
cursor: pointer;
display: none;
}
.card:hover > .btn-close {
display: initial;
transition: all 0.2s ease-out;
}
.btn-close.active {
border-radius: 5px;
width: 50px;
transform: translateX(5px);
}
.card.show {
display: block;
width: 300px;
animation: grow 0.3s ease-out;
}
@keyframes grow {
0% {
width: 0;
opacity: 0;
}
100% {
width: 300px;
opacity: 1;
}
}
const btnShowReport = document.querySelector(".btn-show-report");
const reportCard = document.querySelector(".card");
const btnClose = document.querySelector(".btn-close");
console.log(btnShowReport, reportCard, btnClose);
btnShowReport.onclick = () => reportCard.classList.toggle("show");
btnClose.onmouseenter = () => {
btnClose.classList.add("active");
btnClose.innerHTML = "Close";
};
btnClose.onmouseleave = () => {
btnClose.classList.remove("active");
btnClose.innerHTML = "x";
};
btnClose.onclick = () => reportCard.classList.toggle("show");
Video Tutorial on Youtube
Check out the full detailed tutorial on my YouTube Channel for the React Countdown timer.
Want to become a web developer ?
Get complete web development courses on HTML, CSS , JavaScript, Bootstrap, Visual Studio Code, Responsive design and much more…