Ripple Button Effect Using Pure CSS

-

Google’s Material Design guidelines introduced the ripple effect, a subtle animation that indicates user action. The ripple effect rapidly gained popularity in web design as a sophisticated visual feedback form that refines user interaction, particularly on buttons. Today, we’ll show you how to create a ripple button effect using nothing but pure CSS.

Your Web Designer Toolbox Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets



DOWNLOAD NOW

Building the Button

The basic structure of our button is quite simple. It’s a single line of HTML:

CLICK ME

This is a standard button element with a class btn-ripple attached to it, which will be our reference when we define the ripple effect in CSS.

Casting Ripples With CSS

/* Styling for the ripple button */ .btn-ripple { border: none; /* Removing the default button border */ border-radius: 6px; /* Giving our button rounded corners */ padding: 12px 16px; /* Providing some padding around the button text */ font-size: 1.2em; /* Increasing the font size of the button text */ cursor: pointer; /* Changing the cursor to a hand icon when hovering over the button */ color: white; /* Making the button text color white */ background-color: #fa6e83; /* Setting the initial button background color */ outline: none; /* Removing the outline from the button */ background-position: center; /* Setting the position of the background image to center */ transition: background 1s; /* Adding a transition to the background color */ } /* Defining the hover state */ .btn-ripple:hover { background: #f94b71 radial-gradient(circle, transparent 1%, #f94b71 1%) center/15000%; /* Creating a radial gradient background on hover */ } /* Defining the active (clicked) state */ .btn-ripple:active { background-color: #f97c85; /* Changing the button color when active */ background-size: 100%; /* Increasing the size of the background image */ transition: background 0s; /* Removing the transition from the background color */>

Let’s break down the CSS setup:

The .btn-ripple class sets up the basic appearance of the button. The background-color is initially set to #FA6E83, a light color, and the background-position is centered to ensure our ripple effect starts from the middle of the button.When you hover over the button, the :hover pseudo-class is activated. It changes the background to a radial gradient that’s centered where the pointer is located, simulating the ripple effect. The gradient starts as transparent (transparent 1%) and transitions to the button color (#F94B71 1%), creating a soft ripple effect.Upon clicking the button, the :active pseudo-class takes effect. It changes the background-color to a darker shade (#F97C85) and expands the background-size to 100%, reinforcing the ripple effect. The transition for the background is also set to 0s, making the effect appear instantaneously when the button is clicked.

The Result

See the Pen Pure CSS Ripple Button Effect by 1stWebDesigner (@firstwebdesigner) on CodePen.0

Final Thoughts

We demonstrated a classic example of how simple CSS can be used to create appealing interactivity in a user interface. But as you strive to refine your UI, it’s critical to remember that each interface element might require different tweaks.

Consider the context in which your buttons are used. A button for submitting form data might benefit from a more subdued ripple effect, while a call-to-action button could be more prominent with a stronger one.

For more intricate animations or synchronizing with other UI events, JavaScript could be leveraged for more granular control. CSS provides a solid base for styling and basic animations, but JavaScript opens up more advanced possibilities.

And of course, customization is key. While we used specific colors for our ripple button here, feel free to experiment with colors, shapes, and transitions that align with your brand and design aesthetic.

By: 1WD Crew
Title: Ripple Button Effect Using Pure CSS
Sourced From: 1stwebdesigner.com/ripple-button-effect-using-pure-css/
Published Date: Thu, 29 Jun 2023 14:45:22 +0000

Comments

Post a Comment

Popular posts from this blog

20+ Best White Paper Templates for Word & InDesign

-
Image
When making white papers to target modern audiences, a good-looking design is a must-have feature. Our collection of white paper templates will help you find the perfect design for your white paper. White papers have been around for many years. Even in today’s digital era, white papers are still one of the best ways of promoting brands and businesses. The ability to provide value to your target audience while also making your business relevant is what makes white papers more effective. Of course, the design of the document is also important to attract your audience. We handpicked a collection of amazing white paper templates to help you find a great layout for your brochure. Whether you’re working on a print document or a digital PDF, these templates are perfect for all kinds of brands, agencies, and businesses. Have a look. Modern Business White Paper Template Having a beautifully formatted template that you can easily edit and customize can be a huge time-saver when creat...
Read more

Elevate Your Brand: Tailored Web Design for Unmatched Success

-
Image
  Ready to Stand Out from the Competition? Is your website truly representing your brand and driving your marketing success? At Exposure By Design, we understand that your website is the cornerstone of all your online activities. That's why we specialize in creating personalized web designs that make your brand shine. Located in the heart of Albion, we work closely with you to craft a website that not only looks great but also performs exceptionally. Our process covers everything from content strategy and SEO keywords to design specs and user experience. Whether you need content writing, page design, e-commerce integration, or other custom features, we’ve got you covered. Experience the difference with a website that’s tailored to your business needs, combining expert design principles with seamless development. Let’s make your digital presence as unique as your brand. #WebDesign #DigitalMarketing #Albion #LocalBusiness #SEO #Ecommerce #ExposureByDesign #OnlineSuccess #UserExp...
Read more

Transform Your Brand with Targeted Content Strategies at Exposure By Design

-
Image
  At Exposure By Design, we specialize in creating internet marketing strategies that connect brands with their customers in meaningful ways. Located right here in Everton Park, we're dedicated to delivering content that resonates with your audience and adds value to their lives. Our approach to content marketing ensures that the right message reaches the right user at the right time, aligning perfectly with your business goals. In today's digital landscape, having a well-planned and executed content strategy is crucial for long-term customer engagement and business success. Ready to elevate your brand with tailored content strategies? Let's make it happen together! #InternetMarketing #ContentStrategy #EvertonPark #LocalBusiness #CustomerEngagement #DigitalMarketing #ExposureByDesign info@exposurebydesign.com.au https://exposurebydesign.com.au https://www.facebook.com/Exposurebydesign/ Related Post : https://posts.gle/SpSZTW
Read more