Animated Button - Material

Developer
Chris Evans
Size
3,190 Kb
Views
10,120
  1. Animated Button - Material Previews
  2. Animated Button - Material HTML Codes
  3. Animated Button - Material CSS Codes

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 Previews
IQ Test

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
Animated Button - Material - Script Codes
Home Page Home
Developer Chris Evans
Username anitorious
Uploaded December 27, 2022
Rating 3
Size 3,190 Kb
Views 10,120
Do you need developer help for Animated Button - Material?

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!

Chris Evans (anitorious) Script Codes
Name
Strengths Profile Dashboard Menu
Floating Action Bar
Multiple Off-Canvas Asides
A Pen by Chris Evans
Solar System
3D Interface
Single Field List Filter
Natural Form Editing
CSS Drawing - Life Ring
CSS Coupon
Create amazing sales emails 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!