Neat hover animations on buttons

Developer
Pankaj Parashar
Size
2,697 Kb
Views
62,744
  1. Neat hover animations on buttons Previews
  2. Neat hover animations on buttons HTML Codes
  3. Neat hover animations on buttons CSS Codes

How do I make an neat hover animations on buttons?

What is a neat hover animations on buttons? How do you make a neat hover animations on buttons? This script and codes were developed by Pankaj Parashar on 10 July 2022, Sunday.

Neat hover animations on buttons Previews
IQ Test

Neat hover animations on buttons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Neat hover animations on buttons</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(http://fonts.googleapis.com/css?family=Nunito:300);
body { font-family: "Nunito", sans-serif; font-size: 24px; }
a { text-decoration: none; }
p { text-align: center; }
sup { font-size: 36px; font-weight: 100; line-height: 55px; }
.button
{ text-transform: uppercase; letter-spacing: 2px; text-align: center; color: #0C5; font-size: 24px; font-family: "Nunito", sans-serif; font-weight: 300; margin: 5em auto; position: absolute; top:0; right:0; bottom:0; left:0; padding: 20px 0; width: 220px; height:30px; background: #0D6; border: 1px solid #0D6; color: #FFF; overflow: hidden; transition: all 0.5s;
}
.button:hover, .button:active
{ text-decoration: none; color: #0C5; border-color: #0C5; background: #FFF;
}
.button span
{ display: inline-block; position: relative; padding-right: 0; transition: padding-right 0.5s;
}
.button span:after
{ content: ' '; position: absolute; top: 0; right: -18px; opacity: 0; width: 10px; height: 10px; margin-top: -10px; background: rgba(0, 0, 0, 0); border: 3px solid #FFF; border-top: none; border-right: none; transition: opacity 0.5s, top 0.5s, right 0.5s; transform: rotate(-45deg);
}
.button:hover span, .button:active span
{ padding-right: 30px;
}
.button:hover span:after, .button:active span:after
{ transition: opacity 0.5s, top 0.5s, right 0.5s; opacity: 1; border-color: #0C5; right: 0; top: 50%;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <p>Come roll over me...<br><sup>&darr;</sup></p>
<a href="#" class="button"> <span>Hover Me</span>
</a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Neat hover animations on buttons - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Nunito:300);
body { font-family: "Nunito", sans-serif; font-size: 24px; }
a { text-decoration: none; }
p { text-align: center; }
sup { font-size: 36px; font-weight: 100; line-height: 55px; }
.button
{ text-transform: uppercase; letter-spacing: 2px; text-align: center; color: #0C5; font-size: 24px; font-family: "Nunito", sans-serif; font-weight: 300; margin: 5em auto; position: absolute; top:0; right:0; bottom:0; left:0; padding: 20px 0; width: 220px; height:30px; background: #0D6; border: 1px solid #0D6; color: #FFF; overflow: hidden; transition: all 0.5s;
}
.button:hover, .button:active
{ text-decoration: none; color: #0C5; border-color: #0C5; background: #FFF;
}
.button span
{ display: inline-block; position: relative; padding-right: 0; transition: padding-right 0.5s;
}
.button span:after
{ content: ' '; position: absolute; top: 0; right: -18px; opacity: 0; width: 10px; height: 10px; margin-top: -10px; background: rgba(0, 0, 0, 0); border: 3px solid #FFF; border-top: none; border-right: none; transition: opacity 0.5s, top 0.5s, right 0.5s; transform: rotate(-45deg);
}
.button:hover span, .button:active span
{ padding-right: 30px;
}
.button:hover span:after, .button:active span:after
{ transition: opacity 0.5s, top 0.5s, right 0.5s; opacity: 1; border-color: #0C5; right: 0; top: 50%;
}
Neat hover animations on buttons - Script Codes
Neat hover animations on buttons - Script Codes
Home Page Home
Developer Pankaj Parashar
Username pankajparashar
Uploaded July 10, 2022
Rating 4.5
Size 2,697 Kb
Views 62,744
Do you need developer help for Neat hover animations on buttons?

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!

Pankaj Parashar (pankajparashar) Script Codes
Name
Deconstruction of Twitter Logo
Canvas Polar Clock
3D Pie Chart using amCharts.js
Selection Co-ordinates
The Chili Recipe
Reading Position Indicator
Pure CSS Tags
Todo App using React.js
Arsenal vs Tottenham - Match Day 3
Minimal business card
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!