Create a Material Design ripple effect without JS
Goodbye JavaScript 👋
Okay, so this one will be real quick to implement. I know most of you already know how to create a great ripple effect on buttons, menus and other div elements using JavaScript (JS). Well, initially I was one of those who was scared of JS as a language to bring out interactivity on the front-end. I used to think “Why do we even need such a language which had lots of declarations, loops, functions and what not while making just the front-end of a website?” . Yeah, I was so wrong and wrong about this. Why not just eliminate the need of JS for a moment and focus more on our beautiful CSS?
What will I make? 🤔
This:
Not this:
Yeah, that button doesn’t look really cool. It’s okay, you’re not using a single line of JS in this project and you need to compromise that. This is the only point, no JS only CSS, and uh, of course HTML…
What is a Material Design❔
Honestly, this design theme is brought to you by Google years back at their Google I/O 2014 event. Now you’re using this theme on your Android smartphones, some websites and yes, all other ‘Googly’ things from sometime. It’s like some flat elements on top of a website or app, but it’s not limited to that.
What exactly ‘Material’ means?
Well, if we were to believe Envato,
Google’s Material design considers material to be a homogeneous digital “fabric” created with pixels. Users can tap, swipe, or pinch this material fabric and it will move according to user interaction.
You can learn more about the same in Daniel Hollick’s blog post or refer to Google Design publication.
What will I need? 🛠️
- H̸a̸m̸m̸e̸r̸ ̸a̸n̸d̸ ̸w̸r̸e̸n̸c̸h̸
- Your already wonderful HTML and CSS skills.
- A text editor (I’ll be using Atom just because for my last tutorial on Flutter I used VS Code…)
Shall we…ripple?
Let’s do what we had done before. Create a folder, add two files namely index.html and style.css. Start with HTML. I hope you’re already familiar with Atom’s shortcuts. I think this one is really handy:
Now we have the most basic structure of a HTML file you can think of. A head, a title, a meta and the body tag. First, we gonna link our CSS file in this. That means, using <link rel=”stylesheet” href=”style.css”> inside our <head>. Give it a suitable <title> like Material Ripple Effect.
We’ll now add a class, say container in the <body> . Just like this:
Inside this container class, we’ll add a button element. Don’t forget to add a class like class=”btn ripple” . Both the btn and ripple will be used individually in our styling.
At last, this will be our final HTML code:
Let’s hover to styling. All the materialistic magic will happen here. I’ll only write what all you need to make the button materialistic on click. So, your style.css file should have the following:
- Container:
displayproperty set toflexto make it of same length regardless of the content. - Ripple:
transformproperty set totranslate3dto define a 3D translation. - Ripple-after: this is where the ripple effect ends. We can show something like a text but it doesn’t make sense here. Therefore the
contenthas been set to"".
background-image's value has been set to theradial-gradientfunction which takes in acircleas itsshape,#fffor white as thestart-colorandlast-colorastransparent 10.01%.transitionis used along withtransformwith its corresponding timing andopacity.
If that felt too overwhelming for you in first go, try to implement the same again and use the documentation links to dive deeper in those elements. Obviously, there is some more code other than this. Take a look at our final style.css file:
That’s it! No JS! Run the .html in your favorite web browser and see for yourself. You’ll have a container and a button with Material ripple effect!
Where to next? 🤔
You can experiment more with the .container, .ripple, .ripple:after and .ripple:active:after in your style sheet. Or if you want to be more like a ninja 🐱👤, you can tell me how to start the ripple from different places on the button. Like, if I click on lower left side of the button, the ripple should originate from there.
The source code for this project is hosted on GitHub (and not GitLab 😉):
You can now see LIVE DEMO here, thanks to GitHub Pages.
Liked this story? Feel free to clap and motivate me to write more and better. Did I missed something? Any suggestions? The comment box below serves the exact purpose!
✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.
