Amazing animated CSS Ghost Button

Developer
Faizan Asad
Size
2,029 Kb
Views
30,360
  1. Amazing animated CSS Ghost Button Previews
  2. Amazing animated CSS Ghost Button HTML Codes
  3. Amazing animated CSS Ghost Button CSS Codes

How do I make an amazing animated css ghost button?

By Faizan Asad. What is a amazing animated css ghost button? How do you make a amazing animated css ghost button? This script and codes were developed by Faizan Asad on 04 July 2022, Monday.

Amazing animated CSS Ghost Button Previews
IQ Test

Amazing animated CSS Ghost Button - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Amazing animated CSS Ghost Button</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<button class="button" type="button" data-hover="DOWNLOAD" data-active="IT'S FREE"><span>HOVER HERE</span></button>
</body>
</html>

Amazing animated CSS Ghost Button - Script Codes CSS Codes

*,
*:before,
*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
body { text-align: center; background: #00C8FF;
}
/* .button */
.button { display: inline-block; position: relative; margin: 1em; padding: 0.67em; border: 2px solid #FFF; overflow: hidden; text-decoration: none; font-size: 2em; outline: none; color: #FFF; background: transparent; font-family: 'raleway', sans-serif;
}
.button span { -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; transition: 0.6s; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s;
}
.button:before,
.button:after { content: ''; position: absolute; top: 0.67em; left: 0; width: 100%; text-align: center; opacity: 0; -webkit-transition: .4s,opacity .6s; -moz-transition: .4s,opacity .6s; -o-transition: .4s,opacity .6s; transition: .4s,opacity .6s;
}
/* :before */
.button:before { content: attr(data-hover); -webkit-transform: translate(-150%,0); -moz-transform: translate(-150%,0); -ms-transform: translate(-150%,0); -o-transform: translate(-150%,0); transform: translate(-150%,0);
}
/* :after */
.button:after { content: attr(data-active); -webkit-transform: translate(150%,0); -moz-transform: translate(150%,0); -ms-transform: translate(150%,0); -o-transform: translate(150%,0); transform: translate(150%,0);
}
/* Span on :hover and :active */
.button:hover span,
.button:active span { opacity: 0; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); -ms-transform: scale(0.3); -o-transform: scale(0.3); transform: scale(0.3);
}
/* We show :before pseudo-element on :hover and :after pseudo-element on :active
*/
.button:hover:before,
.button:active:after { opacity: 1; -webkit-transform: translate(0,0); -moz-transform: translate(0,0); -ms-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0); -webkit-transition-delay: .4s; -moz-transition-delay: .4s; -o-transition-delay: .4s; transition-delay: .4s;
}
/* We hide :before pseudo-element on :active
*/
.button:active:before { -webkit-transform: translate(-150%,0); -moz-transform: translate(-150%,0); -ms-transform: translate(-150%,0); -o-transform: translate(-150%,0); transform: translate(-150%,0); -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s;
}
Amazing animated CSS Ghost Button - Script Codes
Amazing animated CSS Ghost Button - Script Codes
Home Page Home
Developer Faizan Asad
Username faizanasad
Uploaded July 04, 2022
Rating 3
Size 2,029 Kb
Views 30,360
Do you need developer help for Amazing animated CSS Ghost Button?

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!

Faizan Asad (faizanasad) Script Codes
Name
Blog sign
Blogger email sign up form
Stunning Animated CSS3 Download Button
Facebook nav
Snake Game
Envato
Amazing Tag Cloud
Amazing CSS Menu with Notification Badges
Awesome CSS Footer Social Buttons
Bing Clone Only HTML
Create amazing marketing copy 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!