Button Hover Animation

Developer
Chris Ota
Size
3,006 Kb
Views
28,336
  1. Button Hover Animation Previews
  2. Button Hover Animation HTML Codes
  3. Button Hover Animation CSS Codes
  4. Button Hover Animation JS Codes

How do I make an button hover animation?

Random button animation created in a single HTML element for fun.. What is a button hover animation? How do you make a button hover animation? This script and codes were developed by Chris Ota on 15 September 2022, Thursday.

Button Hover Animation Previews
IQ Test

Button Hover Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Button Hover Animation</title> <link href='https://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a href="http://www.dribbble.com/chrisota" title="Chris Ota Dribbble"><i class="fa fa-dribbble"></i> Dribbble</a> <script src="js/index.js"></script>
</body>
</html>

Button Hover Animation - Script Codes CSS Codes

*, *:before, *:after { box-sizing: border-box;
}
html, body { height: 100%; width: 100%;
}
body { background: #222; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: 'Noto Sans', sans-serif;
}
a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; text-decoration: none; cursor: pointer; border: 1px solid #EE3769; border-radius: 8px; height: 2.8em; width: 10em; padding: 0; outline: none; overflow: hidden; color: #EE3769; -webkit-transition: color 0.3s 0.1s ease-out; transition: color 0.3s 0.1s ease-out; text-align: center; line-height: 250%;
}
a::before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; content: ''; border-radius: 50%; display: block; width: 20em; height: 20em; line-height: 20em; left: -5em; text-align: center; -webkit-transition: box-shadow 0.5s ease-out; transition: box-shadow 0.5s ease-out; z-index: -1;
}
a:hover { color: #fff;
}
a:hover::before { box-shadow: inset 0 0 0 10em #ee3769;
}

Button Hover Animation - Script Codes JS Codes

// This is improper. It sould be written with the button element. Will recode later!
Button Hover Animation - Script Codes
Button Hover Animation - Script Codes
Home Page Home
Developer Chris Ota
Username chrisota
Uploaded September 15, 2022
Rating 4.5
Size 3,006 Kb
Views 28,336
Do you need developer help for Button Hover Animation?

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!

Chris Ota (chrisota) Script Codes
Name
Origami Penguin
Slide-Up Folder Tabs
Pure HTML and CSS Accordion
Simple Toggle Switch
Vertical Progress Navigation
Single HTML Element Icons
Single Element Knob
Lego Man
Sticky Nav Bar
Mobile Table with Comparison View
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!