Gradient-ui-button-material
How do I make an gradient-ui-button-material?
What is a gradient-ui-button-material? How do you make a gradient-ui-button-material? This script and codes were developed by TabSpace on 22 November 2022, Tuesday.
Gradient-ui-button-material - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>gradient-ui-button-material</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .ui-button{ position:relative; width: 200px; height: 50px; overflow: hidden; border-radius:5px; border: 1px solid #000; background-image:linear-gradient(to bottom right, rgba(0,0,0,0.3), rgba(255,255,255,0.5)); background-repeat:no-repeat; background-color:transparent; font-size:24px;
}
.ui-button::before{ content:''; display:block; position:absolute; left:70%; top:80%; opacity:1; width:0; height:0; border-radius:50%; background-color:rgba(0,0,0,.2); transform:translateX(-50%) translateY(-50%); animation: wave linear 5s infinite;
}
.ui-button span{ position:relative; display: inline-block; width:100%; text-align:center; line-height:50px;
}
@keyframes wave{ 0% { opacity:1; } 40%{ width:200px; height:200px; } 45% { opacity:1; width:400px; height:400px; } 55%{ opacity:0; } 100%{ opacity:0; width:400px; height:400px; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="ui-button"><span>BUTTON</span></div>
</body>
</html>
Gradient-ui-button-material - Script Codes CSS Codes
.ui-button{ position:relative; width: 200px; height: 50px; overflow: hidden; border-radius:5px; border: 1px solid #000; background-image:linear-gradient(to bottom right, rgba(0,0,0,0.3), rgba(255,255,255,0.5)); background-repeat:no-repeat; background-color:transparent; font-size:24px;
}
.ui-button::before{ content:''; display:block; position:absolute; left:70%; top:80%; opacity:1; width:0; height:0; border-radius:50%; background-color:rgba(0,0,0,.2); transform:translateX(-50%) translateY(-50%); animation: wave linear 5s infinite;
}
.ui-button span{ position:relative; display: inline-block; width:100%; text-align:center; line-height:50px;
}
@keyframes wave{ 0% { opacity:1; } 40%{ width:200px; height:200px; } 45% { opacity:1; width:400px; height:400px; } 55%{ opacity:0; } 100%{ opacity:0; width:400px; height:400px; }
}
Developer | TabSpace |
Username | tabspace |
Uploaded | November 22, 2022 |
Rating | 3 |
Size | 2,287 Kb |
Views | 16,192 |
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 |
Gradient-purecss-card | 2,391 Kb |
Gradient-mask-text | 1,884 Kb |
Gift Card | 13,575 Kb |
Gradient-ticket | 1,501 Kb |
Win8 loading | 1,988 Kb |
Gradient-demo-card | 1,560 Kb |
Gradient-mask-image | 1,603 Kb |
Gradient-demo-wave-fx | 1,942 Kb |
Gradient-ui-button-mark-fx | 1,881 Kb |
Gradient-ticket-transparent | 1,589 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 |
Wrap_Test | Mscfourn | 7,503 Kb |
Bootstrap 3 Price Table | Honglio | 2,655 Kb |
Material design - button rainbow circle | Kunukn | 3,652 Kb |
Simple Weather App | Cmwebby | 0 Kb |
CSS Org Chart | Appirio-ux | 3,882 Kb |
Tester1 | Sasquatchbrawley | 2,001 Kb |
Airbnb Homepage | SindhujaD | 2,480 Kb |
IbrahimJabbari-Effect21 | Ibrahimjabbari | 1,882 Kb |
Addthis_button | Esambino | 1,691 Kb |
Cloud upload | Jaflo | 2,774 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!