Animate button transform scale

Developer
François Lesenne
Size
2,625 Kb
Views
32,384
  1. Animate button transform scale Previews
  2. Animate button transform scale HTML Codes
  3. Animate button transform scale CSS Codes
  4. Animate button transform scale JS Codes

How do I make an animate button transform scale?

Button turn the scale overview.. What is a animate button transform scale? How do you make a animate button transform scale? This script and codes were developed by François Lesenne on 12 August 2022, Friday.

Animate button transform scale Previews
IQ Test

Animate button transform scale - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animate button transform scale</title> <link href='http://fonts.googleapis.com/css?family=Jura' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <header class="wrapper animated lightSpeedIn"> <h1>Button turn the scale overview...</h1> <a href="#" class="btn btn-bg-transparent"><strong>Button</a> <a href="#" class="btn btn-bg-color"><strong>Button</strong></a> </header>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Animate button transform scale - Script Codes CSS Codes

*,
*:before,
*:after { box-sizing: border-box; margin: 0;	padding: 0;
}
body { width: 100%; height: 100%; background: #8b9da9;
}
.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both;
}
@-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; }
}
@keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; }
}
.lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;
}
.wrapper { margin: 5% auto; width: 80%; height: auto; text-align:center;
}
h1 { padding: 40px; font-family: ‘Metrophobic’, Arial, serif; font-weight: 600; font-size: 2.5em; color: #fff;
}
.btn { display: inline-block; position: relative; margin: 1rem; cursor: pointer; overflow: visible; text-decoration: none; font-family: ‘Metrophobic’, Arial, serif;	font-weight: 400; font-size: 20px; color: #fff;	-webkit-transition: all 400ms ease-in-out;	transition: all 400ms ease-in-out;
}
.btn.btn-bg-transparent { padding: 1em 2em 1em;	background:transparent;	border: 2px solid #fff; border-radius: 6px; line-height: 1;
}
.btn.btn-bg-transparent:hover { border: 1px solid #EBF0F1; color: #8b9da9;	background: #ecf0f1; background: -webkit-linear-gradient(-45deg, #ecf0f1 0%, #f6f6f6 47%, #ededed 100%); background: -webkit-linear-gradient(135deg, #ecf0f1 0%, #f6f6f6 47%, #ededed 100%); background: linear-gradient(-45deg, #ecf0f1 0%, #f6f6f6 47%, #ededed 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ecf0f1', endColorstr='#ededed',GradientType=1 );	-webkit-transform: scale(1.2);	transform: scale(1.2);
}
.btn.btn-bg-color { padding: 1em 2em 1em;	border: 2px solid #EBF0F1;	border-radius:6px;	line-height: 1; color: #8b9da9; background: #ecf0f1;	background: -webkit-linear-gradient(-45deg, #ecf0f1 0%, #f6f6f6 47%, #ededed 100%);	background: -webkit-linear-gradient(135deg, #ecf0f1 0%, #f6f6f6 47%, #ededed 100%);	background: linear-gradient(-45deg, #ecf0f1 0%, #f6f6f6 47%, #ededed 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ecf0f1', endColorstr='#ededed',GradientType=1 );
}
.btn.btn-bg-color:hover {	background: transparent;	border: 2px solid #fff;	color: #fff;	-webkit-transform: scale(1.2);	transform: scale(1.2);
}

Animate button transform scale - Script Codes JS Codes

// Button turn the scale overview..
// Coding by http://francoislesenne.xyz
Animate button transform scale - Script Codes
Animate button transform scale - Script Codes
Home Page Home
Developer François Lesenne
Username francoislesenne
Uploaded August 12, 2022
Rating 3
Size 2,625 Kb
Views 32,384
Do you need developer help for Animate button transform scale?

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!

François Lesenne (francoislesenne) Script Codes
Name
Animated Pulse background svg
SVG Line Animation background
Original animation of a menu, click on the top right
Level of difficulty with triangle css
Animate menu CSS
Gallery animate transform scale3D
Hi, my first svg drawing
TEXT SUPPORTED BY THE MEDIA
SVG Animate transition
Build a plan in css
Create amazing video scripts 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!