Tronic247 Material

Ripple effect

Edit this page

Usage

Add class ripple-e to the element you want to add the ripple effect.


<div class="background-light-grey ripple-e dark-ripple" style="height: 200px;width: 200px;"></div>

Ripple colors

Light
Secondary
Success
Danger
Dark

<div class="background-primary ripple-e light-ripple" style="height: 200px;width: 200px;">Light</div>
<div class="background-light-grey ripple-e secondary-ripple" style="height: 200px;width: 200px;">Secondary</div>
<div class="background-light-grey ripple-e success-ripple" style="height: 200px;width: 200px;">Success</div>
<div class="background-light-grey ripple-e danger-ripple" style="height: 200px;width: 200px;">Danger</div>
<div class="background-light-grey ripple-e dark-ripple" style="height: 200px;width: 200px;">Dark</div>

Center ripple

Add the class center-ripple.


<div class="ripple-e dark-ripple center-ripple" style="height: 200px;width: 200px;"></div>

Custom ripple color


<div class="ripple-e" style="height: 200px;width: 200px;--ripple-color: #e4e0124a;"></div>