Ripple button tutorial with bootstrap 5 + mdb

#bootstrap #mdb #html #css

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>

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>

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>

and for customize, we can add an attribute like

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

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

            </div>

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.