Wipe Hover Effect

Developer
Travis Arnold
Size
2,975 Kb
Views
28,336
  1. Wipe Hover Effect Previews
  2. Wipe Hover Effect HTML Codes
  3. Wipe Hover Effect CSS Codes

How do I make an wipe hover effect?

Hover button to see the effect.. What is a wipe hover effect? How do you make a wipe hover effect? This script and codes were developed by Travis Arnold on 12 September 2022, Monday.

Wipe Hover Effect Previews
IQ Test

Wipe Hover Effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Wipe Hover Effect</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <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! */ * { box-sizing: border-box;
}
body { padding-top: 100px; text-align: center; background: #F1F1F2;
}
[data-wipe] { display: inline-block; padding: 12px 18px; text-decoration: none; position: relative; border: 2px solid #445561; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.1em; text-align: left; color: #445561; overflow: hidden;
}
[data-wipe]:before, [data-wipe]:after { content: attr(data-wipe); padding-top: inherit; padding-bottom: inherit; white-space: nowrap; position: absolute; top: 0; overflow: hidden; color: #F1F1F2; background: #445561;
}
[data-wipe]:before { left: 0; text-indent: 18px; width: 0;
}
[data-wipe]:after { padding-left: inherit; padding-right: inherit; left: 100%; text-indent: calc(-100% - 36px); transition: 0.2s ease-in-out;
}
[data-wipe]:hover:before { width: 100%; transition: width 0.2s ease-in-out;
}
[data-wipe]:hover:after { left: 0; text-indent: 0; transition: 0s 0.2s ease-in-out;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <a href="#" class="btn" data-wipe="Wipe Hover Effect">Wipe Hover Effect</a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Wipe Hover Effect - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { padding-top: 100px; text-align: center; background: #F1F1F2;
}
[data-wipe] { display: inline-block; padding: 12px 18px; text-decoration: none; position: relative; border: 2px solid #445561; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.1em; text-align: left; color: #445561; overflow: hidden;
}
[data-wipe]:before, [data-wipe]:after { content: attr(data-wipe); padding-top: inherit; padding-bottom: inherit; white-space: nowrap; position: absolute; top: 0; overflow: hidden; color: #F1F1F2; background: #445561;
}
[data-wipe]:before { left: 0; text-indent: 18px; width: 0;
}
[data-wipe]:after { padding-left: inherit; padding-right: inherit; left: 100%; text-indent: calc(-100% - 36px); transition: 0.2s ease-in-out;
}
[data-wipe]:hover:before { width: 100%; transition: width 0.2s ease-in-out;
}
[data-wipe]:hover:after { left: 0; text-indent: 0; transition: 0s 0.2s ease-in-out;
}
Wipe Hover Effect - Script Codes
Wipe Hover Effect - Script Codes
Home Page Home
Developer Travis Arnold
Username souporserious
Uploaded September 12, 2022
Rating 4.5
Size 2,975 Kb
Views 28,336
Do you need developer help for Wipe Hover Effect?

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!

Travis Arnold (souporserious) Script Codes
Name
Animated heading using css and javascript
React Paper Ripple
React Measure Demo
Trix Custom Toolbar
Expose - a responsive jQuery modal plugin
Hamburglar
Segmented Control
Success Message
Parallax Mouse Move
React Circle Media Player
Create amazing captions 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!