Animated Gradient Ghost Button Concept
How do I make an animated gradient ghost button concept?
Ghost button. Animated gradient borders and text. Transparent background. CSS line drawing animation. Clip-path frame. No SVG. Pure CSS.. What is a animated gradient ghost button concept? How do you make a animated gradient ghost button concept? This script and codes were developed by Arsen Zbidniakov on 13 October 2022, Thursday.
Animated Gradient Ghost Button Concept Previews
Animated Gradient Ghost Button Concept - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Gradient Ghost Button Concept</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a href="https://codepen.io/ARS" target="_blank"><span>button</span></a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>Animated Gradient Ghost Button Concept - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Squada+One);
body { background: #344557 url(https://unsplash.imgix.net/photo-1423683249427-8ca22bd873e0?fit=crop&fm=jpg&h=700&q=75&w=1050) 0 0 no-repeat; background-size: cover;
}
body:after { content: ''; background: rgba(52, 69, 87, 0.85);
}
a { display: block; width: 220px; height: 70px; z-index: 1;
}
a:after { content: ''; background: linear-gradient(120deg, #6559ae, #ff7159, #6559ae); background-size: 400% 400%; -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 4px 66px, 4px 100%, 100% 100%, 100% 0%, 0% 0%); -moz-animation: gradient 3s ease-in-out infinite, border 1s forwards ease-in-out reverse; -webkit-animation: gradient 3s ease-in-out infinite, border 1s forwards ease-in-out reverse; animation: gradient 3s ease-in-out infinite, border 1s forwards ease-in-out reverse;
}
a > span { display: block; background: linear-gradient(120deg, #6559ae, #ff7159, #6559ae); background-size: 400% 400%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -moz-animation: gradient 3s ease-in-out infinite; -webkit-animation: gradient 3s ease-in-out infinite; animation: gradient 3s ease-in-out infinite;
}
/* helpers */
.absolute-centering, body:after, a, a:after { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;
}
.text-formatting, a { text-transform: uppercase; text-decoration: none; text-align: center; letter-spacing: 2px; line-height: 70px; font-family: 'Squada One', cursive; font-size: 28px;
}
/* motion */
@-moz-keyframes gradient { 0% { background-position: 14% 0%; } 50% { background-position: 87% 100%; } 100% { background-position: 14% 0%; }
}
@-webkit-keyframes gradient { 0% { background-position: 14% 0%; } 50% { background-position: 87% 100%; } 100% { background-position: 14% 0%; }
}
@keyframes gradient { 0% { background-position: 14% 0%; } 50% { background-position: 87% 100%; } 100% { background-position: 14% 0%; }
}
@-moz-keyframes border { 0% { -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 4px 66px, 4px 100%, 100% 100%, 100% 0%, 0% 0%); } 25% { -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 216px 66px, 216px 100%, 100% 100%, 100% 0%, 0% 0%); } 50% { -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 4px, 216px 4px, 216px 4px, 216px 4px, 100% 0%, 0% 0%); } 75% { -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 0%, 0% 0%); } 100% { -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 0% 100%); }
}
@-webkit-keyframes border { 0% { -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 4px 66px, 4px 100%, 100% 100%, 100% 0%, 0% 0%); } 25% { -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 216px 66px, 216px 100%, 100% 100%, 100% 0%, 0% 0%); } 50% { -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 4px, 216px 4px, 216px 4px, 216px 4px, 100% 0%, 0% 0%); } 75% { -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 0%, 0% 0%); } 100% { -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 0% 100%); }
}
@keyframes border { 0% { -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 4px 66px, 4px 100%, 100% 100%, 100% 0%, 0% 0%); } 25% { -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 216px 66px, 216px 100%, 100% 100%, 100% 0%, 0% 0%); } 50% { -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 4px, 216px 4px, 216px 4px, 216px 4px, 100% 0%, 0% 0%); } 75% { -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 0%, 0% 0%); } 100% { -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 0% 100%); }
}
Animated Gradient Ghost Button Concept - Script Codes JS Codes
/*
Pure CSS experiment with gradient borders and text on transparent background.
Background photo by http://unsplash.com
*/
| Developer | Arsen Zbidniakov |
| Username | ARS |
| Uploaded | October 13, 2022 |
| Rating | 4.5 |
| Size | 3,590 Kb |
| Views | 12,144 |
Do you need developer help for Animated Gradient Ghost Button Concept?
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!
Arsen Zbidniakov (ARS) Script Codes
| Name | Size |
| ELEKS Digital Production | 9,176 Kb |
| Page Transition Loader | 7,268 Kb |
| Long Shadows for Font Awesome | 3,424 Kb |
| GSAP Text Animation | 2,777 Kb |
| Infinity Morph | 2,974 Kb |
| Understanding CSS clip | 8,794 Kb |
| Timer | 2,845 Kb |
| Split Showcase | 3,789 Kb |
| IPhone lockscreen | 3,923 Kb |
| Apple Devices Mockup | 2,484 Kb |
Create amazing love letters 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!
Similar Scripts & Codes
| Name | Username | Size |
| Pomodoro Clock | Osycon | 3,705 Kb |
| CardMove | Thompsonemerson | 3,699 Kb |
| Midterm dry run | Jds317 | 1,649 Kb |
| The Fantastic Mr Fox | MalZiiirA | 10,435 Kb |
| A Different Type of Gallery | DonPage | 2,950 Kb |
| Process Accordion | Devilskitchen | 31,432 Kb |
| Flat design iframe | Damienpm | 1,819 Kb |
| Large canvas mousemove experiment | Jibbon | 2,885 Kb |
| CSS Patterns | Alyda | 3,953 Kb |
| Preloader | Rikki_Sixx | 2,815 Kb |
Do you want hide your ip address?
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!