DEV Community

Nikhil Chandra Roy
Nikhil Chandra Roy

Posted on

Ripple button tutorial with bootstrap 5 + mdb

Hello there,
Nomosker.
Today we are going to discuss here ripple button in bootstrap 5 and mdbootstrap.

For uses bootstrap 5 and MDB we first include CSS and js in our HTML page.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
    <!-- MDB -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.css" rel="stylesheet" />
</head>

<body>
<menu>
<section class="section__ripple">
            <button class="btn btn-danger">
                Ripple danger
            </button>
        </section>
</menu>






    <!-- MDB -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.js"></script>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

As you can see a button with ripple effect when click that button, we can do any bootstrap button same effect.
for example:

<button class="btn btn-primary">Ripple Primary</button>
            <button class="btn btn-success">Ripple Success</button>
            <button class="btn btn-secondary">Ripple Secondary</button>
            <button class="btn btn-warning">Ripple Warning</button>
            <button class="btn btn-danger">Ripple Danger</button>
            <button class="btn btn-dark">Ripple Dark</button>
            <button class="btn btn-light">Ripple Light</button>

Enter fullscreen mode Exit fullscreen mode

but what if we want to customize the ripple effect or we need that effect in a different HTML tag instant of a button?

here is one example without a button we using div.

<div class="w-25 ripple bg-primary " style="height: 200px;">

            </div>

Enter fullscreen mode Exit fullscreen mode

and for customize, we can add an attribute like

data-mdb-ripple-color="dark"
data-mdb-ripple-color="#f00"
data-mdb-ripple-duration="5s"


Enter fullscreen mode Exit fullscreen mode

like

 <div class="w-25 ripple bg-primary " data-mdb-ripple-duration="5s" data-mdb-ripple-color="#f00" style="height: 200px;">

            </div>

Enter fullscreen mode Exit fullscreen mode

for a full tutorial about the ripple effect we can follow
mdb ripple tutorial

This is a very short tutorial about ripple, hope next time we will discuss further more about MDB.
Thanks for stay with me, if you like this post don't forget to write your opinion in the comment below.
Thanks.

Discussion (2)

Collapse
brewhousedigital profile image
Brewhouse Digital • Edited on

Great article, Nikhil!
For a little better formatting, add the name of the coding language to your code blocks. something like:

formatting code blocks example

Collapse
nikhilroy2 profile image
Nikhil Chandra Roy Author

thanks for adivce