CSS animated button

Developer
Mark Robbins
Size
2,172 Kb
Views
26,312
  1. CSS animated button Previews
  2. CSS animated button HTML Codes
  3. CSS animated button CSS Codes

How do I make an css animated button?

Playing with button hover effects. What is a css animated button? How do you make a css animated button? This script and codes were developed by Mark Robbins on 06 September 2022, Tuesday.

CSS animated button Previews
IQ Test

CSS animated button - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS animated button</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Some buttons</h1> <p>
I've not tested these cross browser yet...
</p>
<button class="light"> Hover over me
</button>
<button class="bounce"> Hover over me
</button>
<button class="letters"> Hover over me
</button>
</body>
</html>

CSS animated button - Script Codes CSS Codes

body{ font-family: Arial,Helvetica,sans-serif; color:#555; background:#ddd;
}
button{ padding: 0.8em 0em; width:350px; background: #ff6e00; border-radius:15px; border:0; color:#fff; font-size:1.2em; font-family: Arial,Helvetica,sans-serif; font-weight:bold; cursor:pointer; margin:1em 2em; text-transform:uppercase;
}
.light{
background: -moz-linear-gradient(-45deg, #ff6e00 0%, #ff6e00 40%, #ffffff 50%, #ff6e00 60%, #ff6e00 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ff6e00), color-stop(40%,#ff6e00), color-stop(50%,#ffffff), color-stop(60%,#ff6e00), color-stop(100%,#ff6e00));
background: -webkit-linear-gradient(-45deg, #ff6e00 0%,#ff6e00 40%,#ffffff 50%,#ff6e00 60%,#ff6e00 100%);
background: -o-linear-gradient(-45deg, #ff6e00 0%,#ff6e00 40%,#ffffff 50%,#ff6e00 60%,#ff6e00 100%);
background: -ms-linear-gradient(-45deg, #ff6e00 0%,#ff6e00 40%,#ffffff 50%,#ff6e00 60%,#ff6e00 100%);
background: linear-gradient(135deg, #ff6e00 0%,#ff6e00 40%,#ffffff 50%,#ff6e00 60%,#ff6e00 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff6e00', endColorstr='#ff6e00',GradientType=1 );
background-repeat: no-repeat;
background-position:0px;
background-size:300%;
}
.light:hover{ animation:light 1s; -webkit-animation:light 1s;
}
@keyframes light { 0% { background-position:-600px; } 100% { background-position:0px; }
}
@-webkit-keyframes light { 0% { background-position:-600px; } 100% { background-position:0px; }
}
.bounce:hover{ animation:bounce 1s; -webkit-animation:bounce 1s;
}
@keyframes bounce { 0% { border-radius:15px; } 20% { border-radius:30px; } 60% { border-radius:0px; transform:scale(1.1); -ms-transform:scale(1.1); /* IE 9 */ -webkit-transform:scale(1.1); /* Safari and Chrome */ } 90% { transform:scale(0.98); -ms-transform:scale(0.98); /* IE 9 */ -webkit-transform:scale(0.98); /* Safari and Chrome */ } 100% { border-radius:15px; }
}
@-webkit-keyframes bounce { 0% { border-radius:15px; } 20% { border-radius:30px; } 60% { border-radius:0px; transform:scale(1.1); -ms-transform:scale(1.1); /* IE 9 */ -webkit-transform:scale(1.1); /* Safari and Chrome */ } 90% { transform:scale(0.98); -ms-transform:scale(0.98); /* IE 9 */ -webkit-transform:scale(0.98); /* Safari and Chrome */ } 100% { border-radius:15px; }
}
.letters{ white-space:nowrap; overflow:hidden; transition: letter-spacing 3s; -webkit-transition: letter-spacing 3s; /* Safari */ transition-delay: 0.5s; -webkit-transition-delay: 0.5s;
}
.letters:hover{ letter-spacing:15.5px; transition-delay: 0s; -webkit-transition-delay: 0s;
}
CSS animated button - Script Codes
CSS animated button - Script Codes
Home Page Home
Developer Mark Robbins
Username M_J_Robbins
Uploaded September 06, 2022
Rating 3.5
Size 2,172 Kb
Views 26,312
Do you need developer help for CSS animated 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!

Mark Robbins (M_J_Robbins) Script Codes
Name
X-wing
Punched Card Coding - Slides
CSS triangles for email
SVG email test
SVG email test v2.0
TEDC15 London - slides
3D iPhone CSS controls no JS
Animated images off pixel art
CSS Slider Puzzle Game
Xmas email test
Create amazing SEO content 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!