Learn step-by-step how to design and implement an engaging ripple effect button for your website using HTML and CSS.
Table of Contents
In the world of web design, buttons play a crucial role in guiding users through websites smoothly. However, in an era where engaging users is paramount, standard buttons may not always grab attention effectively. This is where the concept of ripple effect buttons comes in.
Ripple effect buttons offer a dynamic twist to traditional ones by visually responding to user interactions. Each click generates a ripple-like animation, bringing interactivity and delight to users. In this guide, we'll explore how to create an engaging button using HTML and CSS. Whether you're a beginner or an experienced developer, mastering ripple effect buttons can enhance your web design skills and boost user engagement on your site. Let's get started!
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 ripple button.
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 each part of the HTML code:
1. <!DOCTYPE html>: This declaration specifies the document type and version of HTML being used, which is HTML5 in this case.
2. <html lang="en">: This tag defines the beginning of the HTML document and sets the language to English ("en").
3. <head>: This section contains meta-information about the document, such as its title, character encoding, and any external resources like stylesheets or scripts.
- <meta charset="UTF-8">: This meta tag specifies the character encoding of the document, which is UTF-8, allowing for the display of characters from various languages and symbols.
- <meta http-equiv="X-UA-Compatible" content="IE=edge">: This meta tag tells Internet Explorer to use the latest rendering engine available.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: This meta tag sets the viewport properties, ensuring that the webpage is displayed properly on different devices by adjusting the width to the device's width and setting the initial scale to 1.0.
- <title>Ripple Button</title>: This sets the title of the webpage, which typically appears in the browser's title bar or tab.
- <link rel="stylesheet" href="styles.css">: This line links an external CSS (Cascading Style Sheets) file named "styles.css" to the HTML document. This file contains styling rules that define the appearance of the button on the page.
4. <body>: This section contains the main content of the webpage.
- <input type="checkbox" id="btn" />: This creates a checkbox input element with the ID "btn". Users can check or uncheck this checkbox.
- <label for="btn">Toggle me</label>: This creates a label element associated with the checkbox. Clicking on the label will toggle the checkbox. The "for" attribute specifies which input element the label is associated with, in this case, the checkbox with the ID "btn". The text "Toggle me" is the visible label text.
This is the basic structure of our ripple 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 ripple button is in place, the next step is to add styling to the website using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our ripple effect. Let's break down each part of the CSS code:
1. html: Styles applied to the HTML element.
- box-sizing: border-box;: Ensures that padding and border are included in the element's total width and height.
- height: 100%;: Sets the height of the HTML element to 100% of the viewport height.
- font-size: 10px;: Sets the default font size for the document to 10 pixels.
2. *, *::before, *::after: Styles applied to all elements, their before and after pseudo-elements.
- box-sizing: inherit;: Inherits the box-sizing property from the parent, ensuring consistent sizing behavior across all elements.
3. body: Styles applied to the body element.
- display: flex;: Sets the display property to flex, allowing for a flexible layout of child elements.
- align-items: center;: Aligns flex items along the cross-axis (vertically) at the center.
- justify-content: center;: Aligns flex items along the main-axis (horizontally) at the center.
- min-height: 100vh;: Sets the minimum height of the body to 100% of the viewport height.
- background: #1f1d2b;: Sets the background color of the body to a dark shade (#1f1d2b).
4. input[type=checkbox]: Styles applied to checkbox input elements.
- height: 0;: Sets the height of the checkbox to 0.
- width: 0;: Sets the width of the checkbox to 0.
- visibility: hidden;: Hides the checkbox element.
5. input[type=checkbox]:checked + label:after: Styles applied to the label element that comes immediately after a checked checkbox.
- transform: scale(4.2);: Scales up the pseudo-element after the label to create a ripple effect when the checkbox is checked.
6. label: Styles applied to label elements.
- outline: none;: Removes the default outline styling.
- -webkit-user-select: none;, -moz-user-select: none;, -ms-user-select: none;, user-select: none;: Disables text selection.
- color: #000;: Sets the text color to black.
- font-family: "Lato", sans-serif;: Specifies the font family for the text.
- font-size: 2.5rem;: Sets the font size to 2.5 times the default font size.
- letter-spacing: 0.04rem;: Sets the letter spacing between characters.
- padding: 1.5rem 3rem;: Sets the padding around the label text.
- cursor: pointer;: Changes the cursor to a pointer when hovering over the label.
- border-radius: 0.4rem;: Rounds the corners of the label.
- border: 0.3rem solid #000;: Sets a solid black border around the label.
- background: #fff;: Sets the background color of the label to white.
- position: relative;: Sets the positioning context for child elements.
- overflow: hidden;: Clips any content that overflows the label's boundaries.
- box-shadow: 0 3px 0 0 #000;: Adds a shadow effect below the label.
7. label::after: Styles applied to the pseudo-element after the label.
- content: "";: Adds empty content to the pseudo-element.
- position: absolute;: Positions the pseudo-element absolutely within the label.
- width: 100%; height: 100%; top: 0; left: 0;: Sets the size and position of the pseudo-element to cover the entire label.
- transform: scale(0);: Initially scales the pseudo-element to 0, hiding it.
- transition: transform 0.3s ease-in;: Specifies a smooth transition effect for the transform property.
- mix-blend-mode: difference;: Sets the blend mode for the pseudo-element.
- background: radial-gradient(circle at center, #fff 24%, #000 25%, #000 100%);: Creates a radial gradient background for the pseudo-element, simulating a ripple effect.
8. label:active: Styles applied to the label when it's in an active state (being clicked).
- top: 3px;: Shifts the label 3 pixels down when clicked.
- box-shadow: none;: Removes the shadow effect when clicked.
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.
html {
box-sizing: border-box;
height: 100%;
font-size: 10px;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #1f1d2b;
}
input[type=checkbox] {
height: 0;
width: 0;
visibility: hidden;
}
input[type=checkbox]:checked + label:after {
transform: scale(4.2);
}
label {
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #000;
font-family: "Lato", sans-serif;
font-size: 2.5rem;
letter-spacing: 0.04rem;
padding: 1.5rem 3rem;
cursor: pointer;
border-radius: 0.4rem;
border: 0.3rem solid #000;
background: #fff;
position: relative;
overflow: hidden;
box-shadow: 0 3px 0 0 #000;
}
label::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transform: scale(0);
transition: transform 0.3s ease-in;
mix-blend-mode: difference;
background: radial-gradient(circle at center, #fff 24%, #000 25%, #000 100%);
}
label:active {
top: 3px;
box-shadow: none;
} Final Output:
Conclusion:
By following this tutorial, you have successfully created a ripple effect button using HTML and CSS. Experiment with different styles and animations to tailor the button to your website's design and enhance user engagement. Happy coding!
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 😊
