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 |
Floating Action Bar | 5,479 Kb |
Profile Cards | 4,913 Kb |
Guidance Tooltip | 3,917 Kb |
Strengths Profile Dashboard Menu | 4,511 Kb |
Expanding Form | 3,462 Kb |
CSS Coupon | 2,434 Kb |
Animated Notification - Successful Action | 3,210 Kb |
Multiple Off-Canvas Asides | 6,886 Kb |
A Pen by Chris Evans | 2,881 Kb |
Dashboard Widgets | 3,648 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 |
CSS- UI Element States Pseudo-Classes | Tesla809 | 2,206 Kb |
Myprofile | SoufianeAbid | 2,451 Kb |
Pure CSS Menu | Bronsrobin | 3,321 Kb |
Multicolumns 2 | Raphaelgoetter | 1,857 Kb |
Project -Show the Local Weather | Luciano_Britis | 2,583 Kb |
A Pen by lizz | Lizz | 10,068 Kb |
Angular Route | Arun_v606 | 1,837 Kb |
SVG Animation | Pollardld | 3,133 Kb |
Simple Carousel Pure CSS | Dangvanthanh | 4,080 Kb |
The Fantastic Mr Fox | MalZiiirA | 10,435 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!