3 state pure CSS animated 3D button

Developer
Jay Salvat
Size
3,255 Kb
Views
50,600
  1. 3 state pure CSS animated 3D button Previews
  2. 3 state pure CSS animated 3D button HTML Codes
  3. 3 state pure CSS animated 3D button CSS Codes
  4. 3 state pure CSS animated 3D button JS Codes

How do I make an 3 state pure css animated 3d button?

Customizable pure CSS animated 3D button with Sass + Bourbon.. What is a 3 state pure css animated 3d button? How do you make a 3 state pure css animated 3d button? This script and codes were developed by Jay Salvat on 13 July 2022, Wednesday.

3 state pure CSS animated 3D button Previews
IQ Test

3 state pure CSS animated 3D button - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3 state pure CSS animated 3D button</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a class="button" href="#"> <span>Hover me</span> <span>Click me</span> <span>Thank you!</span>
</a> <script src="js/index.js"></script>
</body>
</html>

3 state pure CSS animated 3D button - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Lobster);
.button span:nth-child(1), .button:hover span:nth-child(2), .button:hover span:nth-child(3), .button:active span:nth-child(3) { color: #fff; background: #0ab; box-shadow: 0 20px 40px rgba(153, 0, 82, 0.6);
}
.button span:nth-child(2), .button span:nth-child(3), .button:hover span:nth-child(1), .button:active span:nth-child(2) { color: #666666; background: #004d55; box-shadow: none;
}
html,
body { height: 100%; font: bold 18px "Lobster", Arial, sans-serif; -webkit-perspective: 500px; -moz-perspective: 500px; perspective: 500px; background-color: #f08; background-image: -webkit-linear-gradient(#f08, #ff4dac); background-image: linear-gradient(#f08, #ff4dac);
}
.button { position: fixed; top: 50%; left: 50%; margin-top: -40px; margin-left: -100px; width: 200px; height: 40px; cursor: pointer; text-decoration: none; text-shadow: 0 1px 1px #004d55; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
}
.button span { display: block; border: 1px solid #004d55; text-align: center; line-height: 40px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease;
}
.button span:nth-child(1) { -webkit-transform-origin: bottom center; -moz-transform-origin: bottom center; -ms-transform-origin: bottom center; -o-transform-origin: bottom center; transform-origin: bottom center; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg);
}
.button span:nth-child(2) { -webkit-transform-origin: top center; -moz-transform-origin: top center; -ms-transform-origin: top center; -o-transform-origin: top center; transform-origin: top center; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg);
}
.button span:nth-child(3) { -webkit-transform-origin: top center; -moz-transform-origin: top center; -ms-transform-origin: top center; -o-transform-origin: top center; transform-origin: top center; -webkit-transform: rotateX(-180deg) translateY(40px) translateZ(40px); -moz-transform: rotateX(-180deg) translateY(40px) translateZ(40px); -ms-transform: rotateX(-180deg) translateY(40px) translateZ(40px); -o-transform: rotateX(-180deg) translateY(40px) translateZ(40px); transform: rotateX(-180deg) translateY(40px) translateZ(40px);
}
.button:hover { -webkit-transform: translateY(-40px); -moz-transform: translateY(-40px); -ms-transform: translateY(-40px); -o-transform: translateY(-40px); transform: translateY(-40px);
}
.button:hover span:nth-child(1) { -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg);
}
.button:hover span:nth-child(2) { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg);
}
.button:hover span:nth-child(3) { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg);
}
.button:active span:nth-child(2) { -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg);
}
.button:active span:nth-child(3) { -webkit-transform-origin: bottom center; -moz-transform-origin: bottom center; -ms-transform-origin: bottom center; -o-transform-origin: bottom center; transform-origin: bottom center; -webkit-transform: rotateX(0deg) translateY(-40px) translateZ(40px); -moz-transform: rotateX(0deg) translateY(-40px) translateZ(40px); -ms-transform: rotateX(0deg) translateY(-40px) translateZ(40px); -o-transform: rotateX(0deg) translateY(-40px) translateZ(40px); transform: rotateX(0deg) translateY(-40px) translateZ(40px);
}

3 state pure CSS animated 3D button - Script Codes JS Codes

/* * Customizable pure CSS animated 3D button * with Sass + Bourbon * * Need standard CSS? * * Click the Eye icon at the top right * corner of the CSS panel in order to * copy/paste the compiled CSS. * * Jay S. * www.jaysalvat.com */
3 state pure CSS animated 3D button - Script Codes
3 state pure CSS animated 3D button - Script Codes
Home Page Home
Developer Jay Salvat
Username jaysalvat
Uploaded July 13, 2022
Rating 3.5
Size 3,255 Kb
Views 50,600
Do you need developer help for 3 state pure CSS animated 3D 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!

Jay Salvat (jaysalvat) Script Codes
Name
Ken Burns effect with Vegas 2
Mona Lisa with pure CSS
Buzz - react 1
Buzz - react 2
Blobs test
Easy Face Detection with jQuery
Apple watch like Mickey watch
Pure CSS Animated Clock
HTM5 picture dropzone
Ezdz quick demo
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!