Material button pure CSS

Developer
Gregor Adams
Size
3,594 Kb
Views
64,768
  1. Material button pure CSS Previews
  2. Material button pure CSS HTML Codes
  3. Material button pure CSS CSS Codes

How do I make an material button pure css?

Works in google Chrome. (NOT PRACTICAL, !!!DO NOT USE) Material design round button with click-tracking-ripple in pure CSS. What is a material button pure css? How do you make a material button pure css? This script and codes were developed by Gregor Adams on 20 June 2022, Monday.

Material button pure CSS Previews
IQ Test

Material button pure CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>material button pure CSS </title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<button class="button primary" type="button"> <div class="icon">♥</div> <div class="ripples"> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> <div class="ripple" tabindex="-1"></div> </div>
</button>
<button class="button secondary" type="button"> <div class="icon">★</div> <div class="ripples"> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> <div class="ripple" tabindex="-1"> </div> </div>
</button>
</body>
</html>

Material button pure CSS - Script Codes CSS Codes

.button { position: relative; height: 56px; width: 56px; -webkit-box-flex: 0; -ms-flex: 0 0 56px; flex: 0 0 56px; display: inline-block; padding: 0; margin: 4px; border: 0; border-radius: 100%; overflow: hidden; font-size: 34px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}
.button.primary { background: #E91E63; color: white;
}
.button.primary .ripple:before { background: white;
}
.button.secondary { background: #e0e0e0; color: black;
}
.button.secondary .ripple:before { background: black;
}
.button .icon { position: absolute; top: 0; right: 0; bottom: 0; left: 0; line-height: 56px; pointer-events: none;
}
.button .ripples { -ms-flex-flow: row wrap; flex-flow: row wrap; display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 100%; -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC");
}
.button .ripple { -webkit-appearance: none; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0; border: 0; background: none; -webkit-box-flex: 0; -ms-flex: 0 0 12.5%; flex: 0 0 12.5%; padding-bottom: 12.5%;
}
.button .ripple:focus { outline: 0;
}
.button .ripple:before { content: ''; display: block; position: absolute; top: 50%; left: 50%; margin: -56px; height: 112px; width: 112px; border-radius: 100%; -webkit-transform: scale(0); transform: scale(0); opacity: 0.2; pointer-events: none;
}
.button .ripple:focus:before { -webkit-animation: grow 1s; animation: grow 1s;
}
@-webkit-keyframes grow { 0% { -webkit-transform: scale(0); transform: scale(0); } 70% { -webkit-transform: scale(1); transform: scale(1); opacity: 0.2; } 100% { -webkit-transform: scale(2); transform: scale(2); opacity: 0; }
}
@keyframes grow { 0% { -webkit-transform: scale(0); transform: scale(0); } 70% { -webkit-transform: scale(1); transform: scale(1); opacity: 0.2; } 100% { -webkit-transform: scale(2); transform: scale(2); opacity: 0; }
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100vh; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
Material button pure CSS - Script Codes
Material button pure CSS - Script Codes
Home Page Home
Developer Gregor Adams
Username pixelass
Uploaded June 20, 2022
Rating 4.5
Size 3,594 Kb
Views 64,768
Do you need developer help for Material button pure CSS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Gregor Adams (pixelass) Script Codes
Name
Google dots animation
Material design upload button with progress
3D Particle Heart
Text stroke helpers for SCSS
Diagonal scroll
Fractal curve generator
Morphing search input
Numbers cube counter
SVG sine wave
Flat webpage concept
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!