Animated Button - Material
How do I make an animated button - material?
Button with a background animation upon click using a pseudo element with an animated box-shadow.. What is a animated button - material? How do you make a animated button - material? This script and codes were developed by Chris Evans on 27 December 2022, Tuesday.
Animated Button - Material - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Button - Material</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"/>
<div class="wrapper"> <div class="container"> <p>Living in a Material World, and...</p> <button class="animated-button"><span>I am a Material Girl</span></button> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
</body>
</html>
Animated Button - Material - Script Codes CSS Codes
body { background-color: #333; font-family: 'Open Sans', sans-serif; color: #FFF; font-weight: 500; font-size: 1.25em;
}
.wrapper { display: -webkit-flex; display: flex; justify-content: center; position: fixed; top: 50%; left: 50%; transform: translatex(-50%) translatey(-100%);
}
.wrapper .container { position: relative; flex: 0 1 320px;
}
.wrapper .container > p { text-align: center; width: 320px; padding: 1em;
}
button.animated-button { position: absolute; z-index: 1; left: 50%; transform: translatex(-20%); margin-left: -80px; width: 280px; padding: 2.5em; overflow: hidden; border: none; transition: box-shadow .25s ease; box-shadow: 0 0 0 0 #333;
}
button.animated-button:after { z-index: 2; content: ''; outline: none; border: none; transform: translatey(-50%); left: -10px; position: absolute; background: #20759a; height: 300px; width: 300px; border-radius: 50%; cursor: pointer;
}
button.animated-button:not(:active):after { animation: iris 1.25s ease; outline: none;
}
button.animated-button:not(:active):hover { box-shadow: 0 0 5px 2.5px #262626;
}
button.animated-button:focus { outline: none;
}
button.animated-button > span { font-family: 'Open Sans', sans-serif; position: absolute; top: 50%; left: 50%; transform: translatex(-50%) translatey(-50%); z-index: 3; color: #FFF; font-weight: 500; font-size: 1.5em; pointer-events: none;
}
@keyframes iris { 0% { background-color: #0e3545; box-shadow: inset 0 0 0 280px #20759a; } 100% { background-color: #20759a, 20%; box-shadow: inset 0 0 0 0 #20759a; }
}
![Animated Button - Material - Script Codes](http://shots.codepen.io/anitorious/pen/ENXvvM-512.jpg)
Developer | Chris Evans |
Username | anitorious |
Uploaded | December 27, 2022 |
Rating | 3 |
Size | 3,190 Kb |
Views | 10,120 |
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!
Name | Size |
Dashboard Module Management | 9,257 Kb |
Guidance Tooltip | 3,917 Kb |
Multiple Off-Canvas Asides | 6,886 Kb |
CSS Drawing - Life Ring | 2,476 Kb |
Solar System | 3,883 Kb |
Natural Form Editing | 2,741 Kb |
Single Field List Filter | 3,377 Kb |
Profile Cards | 4,913 Kb |
Expanding Form | 3,462 Kb |
A Forked Sky Full of Stars - Canvas Adaptation, Credit to JLNLJN | 3,297 Kb |
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!
Name | Username | Size |
Next Word Predictor | Rfalor | 2,776 Kb |
Fun animations with CSS3 | Minimalmonkey | 2,360 Kb |
404 Page | Saransh | 2,666 Kb |
AOR site logo | Thatbram | 2,527 Kb |
Fading Navigation Bar | J-w-v | 2,805 Kb |
BabyStore | Pablo-Ai | 3,807 Kb |
A Pen by Eka Risyana | Risyana | 3,705 Kb |
React Template | Isac | 1,241 Kb |
Portfolio Page | KaylaMT | 1,983 Kb |
A Pen by Jason Kinney | Jason-kinney | 1,980 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!