Material design - button rainbow circle

Developer
Kunuk Nykjær
Size
3,652 Kb
Views
22,264
  1. Material design - button rainbow circle Previews
  2. Material design - button rainbow circle HTML Codes
  3. Material design - button rainbow circle CSS Codes
  4. Material design - button rainbow circle JS Codes

How do I make an material design - button rainbow circle?

Material design - button rainbow circle effect using box-shadow. What is a material design - button rainbow circle? How do you make a material design - button rainbow circle? This script and codes were developed by Kunuk Nykjær on 23 September 2022, Friday.

Material design - button rainbow circle Previews
IQ Test

Material design - button rainbow circle - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Material design - button rainbow circle</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <button class="md-rainbow" onclick="viewModel.click(event, this)"> <div>Click</div>
</button> <script src='http://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Material design - button rainbow circle - Script Codes CSS Codes

html,
body { height: 100%;
}
body { font: 20px sans-serif; margin: 0; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.md-rainbow { -webkit-transition: font-size .1s; transition: font-size .1s; color: white; background: -webkit-radial-gradient(#ff8c00, #ffa500); background: radial-gradient(#ff8c00, #ffa500); position: relative; width: 200px; height: 200px; border: 1px solid currentColor; border-radius: 4px; cursor: pointer; overflow: hidden; font: inherit; outline: none; -webkit-tap-highlight-color: transparent; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.md-rainbow:focus, .md-rainbow:action { outline: none;
}
.md-rainbow:hover { background: -webkit-radial-gradient(rgba(255, 140, 0, 0.9), rgba(255, 165, 0, 0.9)); background: radial-gradient(rgba(255, 140, 0, 0.9), rgba(255, 165, 0, 0.9));
}
.md-rainbow > div { text-transform: uppercase; width: 100%;
}
.md-circle-effect { border-radius: 50%; position: absolute;
}
.box-shadow-0 { box-shadow: 0 0 0 3px rgba(255, 51, 51, 0.5), 0 0 0 6px rgba(255, 102, 102, 0.5), 0 0 0 9px rgba(255, 153, 153, 0.5), 0 0 0 12px rgba(255, 204, 204, 0.5);
}
.box-shadow-1 { box-shadow: 0 0 0 3px rgba(255, 255, 51, 0.5), 0 0 0 6px rgba(255, 255, 102, 0.5), 0 0 0 9px rgba(255, 255, 153, 0.5), 0 0 0 12px rgba(255, 255, 204, 0.5);
}
.box-shadow-2 { box-shadow: 0 0 0 3px rgba(51, 255, 51, 0.5), 0 0 0 6px rgba(102, 255, 102, 0.5), 0 0 0 9px rgba(153, 255, 153, 0.5), 0 0 0 12px rgba(204, 255, 204, 0.5);
}
.box-shadow-3 { box-shadow: 0 0 0 3px rgba(51, 255, 255, 0.5), 0 0 0 6px rgba(102, 255, 255, 0.5), 0 0 0 9px rgba(153, 255, 255, 0.5), 0 0 0 12px rgba(204, 255, 255, 0.5);
}
.box-shadow-4 { box-shadow: 0 0 0 3px rgba(51, 51, 255, 0.5), 0 0 0 6px rgba(102, 102, 255, 0.5), 0 0 0 9px rgba(153, 153, 255, 0.5), 0 0 0 12px rgba(204, 204, 255, 0.5);
}
.box-shadow-5 { box-shadow: 0 0 0 3px rgba(255, 51, 255, 0.5), 0 0 0 6px rgba(255, 102, 255, 0.5), 0 0 0 9px rgba(255, 153, 255, 0.5), 0 0 0 12px rgba(255, 204, 255, 0.5);
}
.animate-md { -webkit-animation: animate-material-design 1s ease-in forwards; animation: animate-material-design 1s ease-in forwards;
}
@-webkit-keyframes animate-material-design { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0.5; } 100% { -webkit-transform: scale(10); transform: scale(10); opacity: 0; }
}
@keyframes animate-material-design { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0.5; } 100% { -webkit-transform: scale(10); transform: scale(10); opacity: 0; }
}

Material design - button rainbow circle - Script Codes JS Codes

var viewModel = (function() { var button = document.querySelector('.md-rainbow'), boxShadowIndex = 0; return { click: function(event, element) { var md = document.createElement('div'); var size = 10; var center = { x: event.pageX - element.offsetLeft - size / 2, y: event.pageY - element.offsetTop - size / 2 } md.style.width = size + 'px'; md.style.height = size + 'px'; md.style.left = center.x + 'px'; md.style.top = center.y + 'px'; md.classList.add('md-circle-effect'); // Rotate between the n color effects boxShadowIndex = (boxShadowIndex + 1) % 6; md.classList.add('box-shadow-' + boxShadowIndex); md.classList.add('animate-md'); button.appendChild(md); button.classList.add('active'); setTimeout(function() { // cleanup DOM button.removeChild(md); button.classList.remove('active'); }, 2000); } };
}());
if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { // FastClick FastClick.attach(document.body); // Demo viewModel.click({ pageX: window.innerWidth / 2, pageY: window.innerHeight / 2 }, document.querySelector('.md-rainbow')); }, false);
}
Material design - button rainbow circle - Script Codes
Material design - button rainbow circle - Script Codes
Home Page Home
Developer Kunuk Nykjær
Username kunukn
Uploaded September 23, 2022
Rating 4
Size 3,652 Kb
Views 22,264
Do you need developer help for Material design - button rainbow circle?

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!

Kunuk Nykjær (kunukn) Script Codes
Name
Responsive Cross design
Signature_Pad throttle version
Some math dances
LIMITLESS
Typewriters had been invented - animation
Google and Microsoft theme colors
Signature Pad - demo
The building blocks
Angular material design getting started
PaperJS example - drawing tool
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!