Home Web Design Material Button With Ripple Click Effect Using CSS and JavaScript

Material Button With Ripple Click Effect Using CSS and JavaScript

January 25, 2020

5065

How we can create a material design button with a spreading circle click effect? Solution: See this Material Button With Ripple Click Effect Using CSS and JavaScript.

Previously I have shared some material design programs, this is a material button UI design with ripple click. Basically, the material design has a cleaner design and consistent look to Websites and apps across different platforms, using bold and colorful graphics. And the ripple effect is a click effect, which like ripple drop spreading in water and expanding. The material design button contains this type of ripple click effect for an attractive UI design.

Today you will learn to create CSS and JavaScript based material design buttons. Basically, there are 3 buttons and each button has a different style. The first button is normal with a background color, the second button does not have a background color it only with border, and the last button does not have any background color or border. All these buttons have the same ripple click effect, when will click on anywhere in the button a circular overlay shape will expand from there.

So, Today I am sharing Material Button With Ripple Click Effect Using CSS and JavaScript. There the HTML CSS and JS have equal contribution to the program. I have used CSS for styling and JavaScript for functioning. This button has minimal and attractive UI design, you can use it on your website or web app.

If you are thinking now how this material design buttons actually are, then see the preview given below.

Preview Of CSS JavaScript Material UI Buttons

See this video preview to getting an idea of how these buttons look like.

https://webdevtrick.com/wp-content/uploads/material-design-button.mp4?_=1

Live Demo

Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.

Material Button With Ripple Click Effect Source Code

Before sharing source code, let’s talk about it. First I have created 3 buttons using HTML <button> tag. In two buttons I have put inline CSS and gave color values using CSS variables. There I have placed variables using inline CSS, because of changing values later according to the action. Also in the HTML file, I have linked external files like CSS and JS.

Now using CSS I have placed all the elements in the right place, as you can see in the preview. There I have used CSS variables to store and pass data easily. I have used :before and :after commands to create the click effect, and it’s values handling by JavaScript. Also, I have used clip-path command to make circular expand click, and transition for animation effect and delay.

JavaScript handling here the ripple click effect in program. There used JS .setProperty command for set the position and start the click effect from that position. And it changing CSS values using the variables. Left all other things you will understand after getting the codes, I can’t explain all in writing.

For creating this program you have to create 3 files. First file for HTML, second file for CSS, and the third file for JavaScript. Follow the steps to creating this program without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!-- Code By Webdevtrick ( https://webdevtrick.com ) -->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Material Buttons | Webdevtrick.com</title>
  <link rel="stylesheet" href="style.css">

</head>
<body>

<button>
  Button
</button>

<button style="--background: none; --color: hsl(265, 100%, 48%); --border: hsl(265, 100%, 48%);">
  Button
</button>

<button style="--background: none; --color: hsl(265, 100%, 48%);">
  Button
</button>

<script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Material Buttons | Webdevtrick.com</title>

</head>

<body>

Button

</button>

Button

</button>

Button

</button>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap");
*,
*:before,
*:after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: hsl(0, 0%, 5%);
  background: hsl(0, 0%, 98%);
  font-family: "Roboto", sans-serif;
}
body > * + * {
  margin-block-start: 2.5rem;
}

button {
  --top: 50%;
  --left: 50%;
  --size: 100%;
  --background: hsl(265, 100%, 50%);
  --color: hsl(265, 100%, 100%);
  --border: none;
  color: var(--color);
  background: var(--background);
  border: 1px solid var(--border);
  font-family: inherit;
  padding: 0.6rem 1.25rem;
  font-size: 0.9rem;
  border-radius: 5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  overflow: hidden;
  position: relative;
  outline: none;
}

button:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: currentColor;
  border-radius: inherit;
  opacity: 0;
}
button:focus:before,
button:hover:before {
  opacity: 0.1;
}

button:after {
  content: "";
  position: absolute;
  top: var(--top);
  left: var(--left);
  transform: translate(-50%, -50%);
  width: var(--size);
  height: var(--size);
  background: currentColor;
  clip-path: circle(0%);
  opacity: 0.3;
  border-radius: inherit;
}

button:active:after {
  clip-path: circle(100%);
  opacity: 0;
  transition: clip-path 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53), opacity 0.4s ease-in-out;
  transition-delay: -0.1s, 0.5s;
}

/* Code By Webdevtrick ( https://webdevtrick.com ) */

@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap");

*:before,

*:after {

box-sizing: border-box;

padding: 0;

margin: 0;

}

body {

min-height: 100vh;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

color: hsl(0, 0%, 5%);

background: hsl(0, 0%, 98%);

font-family: "Roboto", sans-serif;

}

body > * + * {

margin-block-start: 2.5rem;

}

button {

--top: 50%;

--left: 50%;

--size: 100%;

--background: hsl(265, 100%, 50%);

--color: hsl(265, 100%, 100%);

--border: none;

color: var(--color);

background: var(--background);

border: 1px solid var(--border);

font-family: inherit;

padding: 0.6rem 1.25rem;

font-size: 0.9rem;

border-radius: 5px;

font-weight: 500;

text-transform: uppercase;

letter-spacing: 1px;

overflow: hidden;

position: relative;

outline: none;

}

button:before {

content: "";

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: currentColor;

border-radius: inherit;

opacity: 0;

}

button:focus:before,

button:hover:before {

opacity: 0.1;

}

button:after {

content: "";

position: absolute;

top: var(--top);

left: var(--left);

transform: translate(-50%, -50%);

width: var(--size);

height: var(--size);

background: currentColor;

clip-path: circle(0%);

opacity: 0.3;

border-radius: inherit;

}

button:active:after {

clip-path: circle(100%);

opacity: 0;

transition: clip-path 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53), opacity 0.4s ease-in-out;

transition-delay: -0.1s, 0.5s;

}

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

// Code By Webdevtrick ( https://webdevtrick.com )
const buttons = document.querySelectorAll('button');

function handleClick(e) {
  const { layerX, layerY } = e;
  const { width, height } = this.getBoundingClientRect();

  this.style.setProperty('--top', `${(layerY / height) * 100}%`);
  this.style.setProperty('--left', `${(layerX / width) * 100}%`);

  // for the size consider the distance from the farthest angle
  const dx = layerX > width / 2 ? layerX : width - layerX;
  const dy = layerY > height / 2 ? layerY : height - layerY;
  const size = Math.sqrt(dx ** 2 + dy ** 2) * 2;
  this.style.setProperty('--size', `${size}px`);
}

buttons.forEach(button => {
  button.addEventListener('mousedown', handleClick);
});

// Code By Webdevtrick ( https://webdevtrick.com )

const buttons = document.querySelectorAll('button');

function handleClick(e) {

const { layerX, layerY } = e;

const { width, height } = this.getBoundingClientRect();

this.style.setProperty('--top', `${(layerY / height) * 100}%`);

this.style.setProperty('--left', `${(layerX / width) * 100}%`);

// for the size consider the distance from the farthest angle

const dx = layerX > width / 2 ? layerX : width - layerX;

const dy = layerY > height / 2 ? layerY : height - layerY;

const size = Math.sqrt(dx ** 2 + dy ** 2) * 2;

this.style.setProperty('--size', `${size}px`);

}

buttons.forEach(button => {

button.addEventListener('mousedown', handleClick);

});

That’s It. Now you have successfully created Material Button With Ripple Click Effect Using CSS and JavaScript. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.