<h1 class="title">Soft Ripples Effect</h1>
<div class="btn-container">
<h1 class="info">default</h1>
<button class="btn btn--blue btn--default">click</button>
<button class="btn btn--white btn--default">click</button>
</div>
<div class="btn-container">
<h1 class="info">custom</h1>
<button class="btn btn--red btn--custom">click</button>
<button class="btn btn--yellow btn--custom">click</button>
</div>
<div class="support">
<a href="https://twitter.com/DevLoop01" target="_blank"><i class="fab fa-twitter-square"></i></a>
<a href="https://github.com/devloop01/softripple-js" target="_blank"><i class="fab fa-github"></i></a>
</div>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #e9e9e9;
overflow: hidden;
}
.title,
.info {
font-size: 1.85rem;
font-family: "Montserrat";
color: #bbbbbb;
white-space: nowrap;
margin-bottom: 2rem;
}
.btn-container {
margin: 1rem 0;
.info {
text-align: center;
margin: 0;
margin-bottom: 10px;
font-size: 1.25rem;
}
}
.btn {
border: none;
width: 150px;
height: 50px;
border-radius: 10px;
font-family: "Montserrat";
font-weight: 700;
font-size: 0.9rem;
margin: 10px;
cursor: pointer;
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.008),
0 6.7px 5.3px rgba(0, 0, 0, 0.012), 0 12.5px 10px rgba(0, 0, 0, 0.015),
0 22.3px 17.9px rgba(0, 0, 0, 0.018), 0 41.8px 33.4px rgba(0, 0, 0, 0.022),
0 100px 80px rgba(0, 0, 0, 0.03);
&.btn--blue {
background: #445fe7;
color: #fff;
}
&.btn--white {
background: #f6f6f6;
color: #000000;
}
&.btn--red {
background: #ff3e3e;
color: #ffffff;
}
&.btn--yellow {
background: #fff128;
color: #000000;
}
&::-moz-focus-inner {
border: none;
}
&:focus {
outline: none;
}
}
// @media only screen and (max-width: 500px) {
// .btn-container {
// grid-template-columns: 1fr;
// grid-template-rows: auto;
// }
// }
.support {
position: absolute;
right: 10px;
bottom: 10px;
padding: 10px;
display: flex;
a {
margin: 0 10px;
color: #333333;
font-size: 1.8rem;
backface-visibility: hidden;
transition: all 150ms ease;
&:hover {
transform: scale(1.1);
}
}
}
View Compiled
// Yes. You can add the ripple in any element
// Even the <BODY>
// ---------- UNCOMMENT BELOW CODE AND CLICK ANYWHERE ------------
// SoftRipple(document.body);
const defaultButtons = document.querySelectorAll(".btn--default");
const customButtons = document.querySelectorAll(".btn--custom");
SoftRipple(defaultButtons);
// You can use the options to customize some effects.
let rippleOptions = {
rippleColor: "#fff",
transitionDuration: 1, // minimum is 0.4 seconds and max is 2 seconds. Defaults to 0.8 seconds
rippleWidth: 7, // minimum is 2 and max is 8. Defaults to 4
rippleMaxSize: 150, // minimum is 50 and max is 200. Defaults to 100
randomSize: true, // defaults to false
randomColor: true, // defaults to false
overrideDefaults: false // set this to true and cutomize without any contrains
};
// you can pass in the options as the second argument
SoftRipple(customButtons, rippleOptions)
