No JavaScript needed! Discover the art of Pure CSS Animation for buttons. Elevate your front-end skills with our easy-to-follow tutorial for captivating UI.
Table of Contents
Welcome to the realm of Pure CSS Animated Buttons! In this tutorial, we'll embark on a journey to elevate your web design game without the need for JavaScript. CSS animations offer a lightweight and seamless way to add interactive elements to your website, enhancing user experience and engagement.
In the following sections, we'll explore three distinct CSS-only button animations. Whether you're a seasoned developer or just starting with front-end design, these tutorials will guide you through the process step by step.
So, fasten your seatbelt and get ready to bring your web pages to life with stylish and captivating Pure CSS Animated Buttons!
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 animated buttons.
After creating the files just paste the following 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 code step by step:
1. <!DOCTYPE html>: This declaration defines the document type and version of HTML being used. In this case, it's HTML5.
2. <html lang="en">: The opening tag for the HTML document, specifies the language attribute as "en" for English.
3. <head>: This section contains meta-information about the document, including character set, viewport settings, and external resources.
- <meta charset="UTF-8">: Sets the character encoding to UTF-8, which supports a wide range of characters.
- <meta http-equiv="X-UA-Compatible" content="IE=edge">: Provides instructions to Internet Explorer to use the latest rendering engine available.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: Defines the viewport settings for responsive design on various devices.
- <title>3 Different Animated Buttons</title>: Sets the title of the web page.
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" />: Links an external stylesheet for the Simple Line Icons library.
- <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200&display=swap" rel="stylesheet" />: Links an external stylesheet for the Roboto Mono font with a specific weight.
- <link rel="stylesheet" href="styles.css">: Links an external stylesheet named "styles.css," presumably containing additional styles for the page.
4. <body>: The main content of the HTML document.
5. Three <button> elements with different class attributes:
- <button type="button" class="simple">Simple</button>: A button with the class "simple."
- <button type="button" class="fill">Fill</button>: A button with the class "fill."
- <button type="button" class="slide">: A button with the class "slide" containing a <div> with the text "Slide" and an <i> (icon) element with the class "icon-arrow-right."
6. </body>: The closing tag for the body section.
7. </html>: The closing tag for the HTML document.
This is the basic structure of our animated buttons using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the buttons is in place, the next step is to add styling and animation to the buttons using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to animate our buttons. Let's break down the code and understand each part:
1. Global Styles:
- html, body: Sets some basic styles for the HTML and body elements.
- margin: 0;: Removes default margins.
- display: flex;: Uses flexbox layout.
- justify-content: center;: Centers content horizontally.
- flex-direction: column;: Arranges content in a column.
- align-items: center;: Centers content vertically.
- min-height: 100vh;: Sets the minimum height to 100% of the viewport height.
- font-family: "Roboto Mono", monospace;: Applies the "Roboto Mono" font family to text.
- button: Styles for all buttons on the page.
- margin: 50px;: Adds a margin around all buttons.
- font-family: inherit;: Inherits the font family from the parent, which is "Roboto Mono" in this case.
2. Simple Button Styles (simple class):
- Defines a simple button style with no animation.
- font-size: 20px;, font-weight: 200;, letter-spacing: 1px;: Sets font properties.
- padding: 13px 50px 13px;: Sets padding.
- outline: 0;, border: 1px solid black;: Removes outline and adds a 1px solid black border.
- cursor: pointer;: Changes the cursor to a pointer.
- position: relative;: Establishes a positioning context.
- background-color: rgba(0, 0, 0, 0);: Sets a transparent background.
- ::after pseudo-element: Adds a background layer with specific styles.
- content: "";: Creates an empty content box.
- background-color: #dcbaff;: Sets the background color.
- width: 100%;, height: 100%;: Makes it cover the entire button.
- z-index: -1;: Places it behind the button content.
- position: absolute;: Positions it absolutely relative to the button.
- top: 7px;, left: 7px;: Adds a slight offset.
3. Fill Button Styles (fill class):
- Similar to the Simple button but with additional hover effects.
- transition: 0.2s;: Adds a smooth transition effect.
- ::after pseudo-element: Same as in the Simple button but with a different background color.
- :hover::after: Modifies the pseudo-element on hover, changing its position.
4. Slide Button Styles (slide class):
- Similar structure to Simple and Fill buttons but with a slide-in effect.
- transition: transform 1;: Applies a transition to the transform property.
- .slide i: Styles for an icon inside the button.
- opacity: 0;: Makes the icon initially invisible.
- transition: transform 1;: Applies a transition to the transform property.
- .slide div: Styles for a div inside the button.
- transition: transform 0.8s;: Applies a transition to the transform property.
- .slide:hover div: Modifies the div inside on hover, translating it to the left.
- :after pseudo-element: Similar to the Simple and Fill buttons with a different background color.
- :hover i: Modifies the icon on hover, making it visible and translating it to the left.
This will give our animated buttons 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.
html,
body {
margin: 0;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
min-height: 100vh;
font-family: "Roboto Mono", monospace;
}
button {
margin: 50px;
font-family: inherit;
}
/* End of Page styling */
/* Simple button styling -- No animation */
.simple {
font-size: 20px;
font-weight: 200;
letter-spacing: 1px;
padding: 13px 50px 13px;
outline: 0;
border: 1px solid black;
cursor: pointer;
position: relative;
background-color: rgba(0, 0, 0, 0);
}
.simple::after {
content: "";
background-color: #dcbaff;
width: 100%;
z-index: -1;
position: absolute;
height: 100%;
top: 7px;
left: 7px;
}
/* End of Simple Button */
/* Fill button styling */
.fill {
font-size: 20px;
font-weight: 200;
letter-spacing: 1px;
padding: 13px 50px 13px;
outline: 0;
border: 1px solid black;
cursor: pointer;
position: relative;
background-color: rgba(0, 0, 0, 0);
}
.fill::after {
content: "";
background-color: #ffe54c;
width: 100%;
z-index: -1;
position: absolute;
height: 100%;
top: 7px;
left: 7px;
transition: 0.2s;
}
.fill:hover::after {
top: 0px;
left: 0px;
}
/* End of Fill Button */
/* Slide button styling */
.slide {
font-size: 20px;
font-weight: 200;
letter-spacing: 1px;
padding: 13px 30px 13px;
outline: 0;
border: 1px solid black;
cursor: pointer;
position: relative;
background-color: rgba(0, 0, 0, 0);
}
.slide i {
opacity: 0;
font-size: 13px;
position: absolute;
right: 10px;
top: 21px;
transition: transform 1;
}
.slide div {
transition: transform 0.8s;
}
.slide:hover div {
transform: translateX(-6px);
}
.slide::after {
content: "";
background-color: #66f2d5;
width: 100%;
z-index: -1;
position: absolute;
height: 100%;
top: 7px;
left: 7px;
}
.slide:hover i {
opacity: 1;
transform: translateX(-6px);
} Final Output:
Conclusion:
Congratulations on completing the exploration of Pure CSS Animated Buttons! By now, you've gained valuable insights into the world of CSS animations, learning how to breathe life into your web elements without relying on external scripts.
Thank you for joining us on this CSS adventure. May your websites shine with creativity and user-friendly animations!
Code by: Joe Bocock
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 😊
