Learn to create an animated logout button using simple HTML and CSS. Follow step-by-step instructions to add smooth animations to your website’s logout button.
Table of Contents
Creating an animated logout button can make your website more interactive and engaging. In this tutorial, you will learn how to build a logout button with smooth animations using only HTML and CSS. This guide is perfect for beginners looking to add a touch of creativity to their web projects.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our Logout Button.
After creating the files just paste the below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Let's break down the HTML code:
1. <!DOCTYPE html>
- This tells the browser that the document is an HTML5 document.
2. <html lang="en">
- The
<html>tag is the root of the HTML document. The lang="en" attribute specifies that the language of the document is English.
3. <head>
The <head> section contains metadata and links to resources like stylesheets.
<meta charset="UTF-8">: Sets the character encoding to UTF-8, which supports most characters and symbols from all languages.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures the webpage scales correctly on different devices, particularly mobile ones.<title>Animated Logout Button</title>: Sets the title of the webpage, which appears on the browser tab.<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap">: Links to a Google Font called "Poppins," which will be used in the text on the page.<link rel="stylesheet" href="styles.css">: Links to an external CSS file named styles.css, where the styles for the webpage, including the animated button, are defined.
4. <body>
The <body> tag contains the content of the webpage that is visible to users.
<button class="logout-btn">: This is a button element with the class logout-btn. The styles for this button are defined in the styles.css file.<div class="icon"></div>: A<div>inside the button with the class icon. This might be used to display an icon or image related to the logout function.<div class="text">Logout</div>: Another<div>inside the button that contains the text "Logout."
This is the basic structure of our logout button using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the button is in place, the next step is to add styling to the button using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our logout button.
Let's break down the CSS code step by step:
body Styling
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #121212;
margin: 0;
}
display: flex;: This makes the body a flex container, allowing its children (like the button) to be easily aligned.justify-content: center; and align-items: center;: These properties center the button both horizontally and vertically within the body.height: 100vh;: The body takes up the full height of the viewport.background-color: #121212;: The background is set to a dark color.margin: 0;: Removes any default margin from the body.
.logout-btn Styling
.logout-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 8px 22px;
background: #ff3e3e;
color: #fff;
font-family: 'Poppins', sans-serif;
font-size: 18px;
font-weight: bold;
border: none;
border-radius: 50px;
cursor: pointer;
overflow: hidden;
transition: all 0.3s ease-in-out;
box-shadow: 0 10px 20px rgba(255, 62, 62, 0.5);
}
position: relative;: This allows the use of absolute positioning within the button for other elements.display: flex; and align-items: center;: The button's contents (like text and icon) are aligned in the center.padding: 8px 22px;: Adds padding inside the button for spacing.background: #ff3e3e;: Sets the background color of the button.color: #fff;: The text color is set to white.font-family, font-size, font-weight: Style the text with a specific font, size, and boldness.border-radius: 50px;: Gives the button rounded corners.cursor: pointer;: Changes the cursor to a pointer when hovering over the button.overflow: hidden;: Hides any content that exceeds the button's boundaries.transition: all 0.3s ease-in-out;: Smoothly transitions changes like background color and scale.box-shadow: 0 10px 20px rgba(255, 62, 62, 0.5);: Adds a shadow below the button for a 3D effect.
.icon Styling
.logout-btn .icon {
width: 20px;
height: 20px;
margin-right: 10px;
background: url('https://img.icons8.com/ios-filled/50/ffffff/logout-rounded-left.png') no-repeat center center / contain;
transition: transform 0.4s ease;
}
width: 20px; height: 20px;: Sets the size of the icon.margin-right: 10px;: Adds space between the icon and the text.background: url(...) no-repeat center center / contain;: Sets the icon image, centers it, and ensures it fits within the container.transition: transform 0.4s ease;: Smoothly animates the icon's transformations (like rotation).
.text Styling
.logout-btn .text {
position: relative;
z-index: 1;
transition: transform 0.4s ease;
}
position: relative;: Positions the text relative to its normal position.z-index: 1;: Ensures the text appears above the background effects.transition: transform 0.4s ease;: Smoothly animates the text's movement.
Button Background Effects
.logout-btn::before, .logout-btn::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 140%;
height: 140%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.15), transparent);
transition: all 0.6s ease;
border-radius: 50%;
z-index: 0;
transform: translate(-50%, -50%) scale(0);
}
content: "";: Creates pseudo-elements without any text content.position: absolute;: Positions these elements relative to the button.top: 50%; left: 50%;: Centers the elements within the button.width: 140%; height: 140%;: Makes the elements slightly larger than the button.background: radial-gradient(...);: Creates a radial gradient effect.transition: all 0.6s ease;: Smoothly animates the gradient's appearance.border-radius: 50%;: Rounds the elements to match the button's shape.z-index: 0;: Ensures these elements are behind the text and icon.transform: translate(-50%, -50%) scale(0);: Initially hides the gradient by scaling it down.
Hover Effects
.logout-btn:hover::before {
transform: translate(-50%, -50%) scale(1);
}
.logout-btn:hover .icon {
transform: translateX(-10px) rotate(-360deg);
}
.logout-btn:hover .text {
transform: translateX(10px);
}
.logout-btn:hover {
background: #ff1e1e;
transform: scale(1.08);
}
::before on hover: Expands the radial gradient effect to full size..icon on hover: Moves the icon to the left and rotates it 360 degrees..text on hover: Moves the text slightly to the right..logout-btn on hover: Changes the background color to a brighter red and slightly enlarges the button for a more dynamic effect.
This will give our button an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #121212;
margin: 0;
}
.logout-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 8px 22px;
background: #ff3e3e;
color: #fff;
font-family: 'Poppins', sans-serif;
font-size: 18px;
font-weight: bold;
border: none;
border-radius: 50px;
cursor: pointer;
overflow: hidden;
transition: all 0.3s ease-in-out;
box-shadow: 0 10px 20px rgba(255, 62, 62, 0.5);
}
.logout-btn .icon {
width: 20px;
height: 20px;
margin-right: 10px;
background: url('https://img.icons8.com/ios-filled/50/ffffff/logout-rounded-left.png') no-repeat center center / contain;
transition: transform 0.4s ease;
}
.logout-btn .text {
position: relative;
z-index: 1;
transition: transform 0.4s ease;
}
.logout-btn::before, .logout-btn::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 140%;
height: 140%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.15), transparent);
transition: all 0.6s ease;
border-radius: 50%;
z-index: 0;
transform: translate(-50%, -50%) scale(0);
}
.logout-btn:hover::before {
transform: translate(-50%, -50%) scale(1);
}
.logout-btn:hover .icon {
transform: translateX(-10px) rotate(-360deg);
}
.logout-btn:hover .text {
transform: translateX(10px);
}
.logout-btn:hover {
background: #ff1e1e;
transform: scale(1.08);
} Final Output:
Conclusion:
By following this tutorial, you have successfully created an animated logout button using HTML and CSS. This simple yet effective addition can enhance user experience on your website. Feel free to customize the animation to match your design style.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
