{"id":676,"date":"2024-02-26T23:10:12","date_gmt":"2024-02-26T23:10:12","guid":{"rendered":"https:\/\/www.cssportal.com\/blog\/?p=676"},"modified":"2024-02-28T23:23:57","modified_gmt":"2024-02-28T23:23:57","slug":"10-different-css-animated-links","status":"publish","type":"post","link":"https:\/\/www.cssportal.com\/blog\/10-different-css-animated-links\/","title":{"rendered":"10 Different CSS Animated Links"},"content":{"rendered":"<p>CSS animations stand out as a powerful tool to enhance user experience and add a touch of creativity to websites. Among the many elements that can be animated, links are particularly interesting due to their pivotal role in navigation and user interaction. Animating links can not only improve the visual appeal of a website but also make the interface more intuitive and engaging for users.<\/p>\n<p>In this blog post, we&#39;ll explore 10 different CSS animations for links. These examples will range from subtle hover effects to more complex animations, offering a variety of styles to suit different design needs. Whether you&#39;re a seasoned web developer or a beginner looking to spruce up your projects, these animated link effects can provide inspiration and practical techniques to take your web design to the next level.<\/p>\n<p>Each example will include a code snippet and an explanation to help you understand how the animation works and you&#8217;ll also get to see to a preview of each animation by hovering over the link. OK, let&#8217;s get started with our collection of CSS animated links.<\/p>\n<hr>\n<h2>1. Underline Slide<\/h2>\n<div class=\"headerblog\">CSS<\/div>\n<pre><code class=\"language-css\">a.slide-underline {\r\n  position: relative;\r\n  text-decoration: none;\r\n  color: #000;\r\n}\r\n\r\na.slide-underline::after {\r\n  content: &#39;&#39;;\r\n  position: absolute;\r\n  width: 0;\r\n  height: 2px;\r\n  bottom: 0;\r\n  left: 0;\r\n  background-color: #3498db;\r\n  transition: width 0.3s;\r\n}\r\n\r\na.slide-underline:hover::after {\r\n  width: 100%;\r\n}\r\n<\/code><\/pre>\n<style>\n.sample-links {display:block;text-align:center;text-transform: uppercase;font-size:3em;padding:30px 0}\n<\/style>\n<style>a.slide-underline{position:relative;text-decoration:none;color:#000}a.slide-underline::after{content:'';position:absolute;width:0;height:2px;bottom:0;left:0;background-color:#3498db;transition:width 0.3s}a.slide-underline:hover::after{width:100%}<\/style>\n<div class=\"code-block\">\n<div class=\"header\">Result<\/div>\n<div class=\"sample-links\"><a class=\"slide-underline\" href=\"javascript:void(0)\">Hover over Me<\/a><\/div>\n<\/div>\n<p><strong>Explanation:<\/strong><br \/>\nThis animation creates a sliding underline effect when hovering over a link. The <code>::after<\/code> pseudo-element is used to generate the underline, which initially has a width of <code>0<\/code>. On hover, the width transitions to <code>100%<\/code>, creating a sliding effect. The transition is smooth thanks to the <code>transition<\/code> property, making the underline appear to grow from left to right beneath the text.<\/p>\n<hr>\n<h2 id=\"2-color-fade\">2. Color Fade<\/h2>\n<div class=\"headerblog\">CSS<\/div>\n<pre><code class=\"language-css\">a.color-fade {\r\n  text-decoration: none;\r\n  color: #000;\r\n  transition: color 0.3s ease-out;\r\n}\r\n\r\na.color-fade:hover {\r\n  color: #e74c3c;\r\n}\r\n<\/code><\/pre>\n<style>a.color-fade{text-decoration:none;color:#000;transition:color 0.3s ease-out}a.color-fade:hover{color:#e74c3c}<\/style>\n<div class=\"code-block\">\n<div class=\"header\">Result<\/div>\n<div class=\"sample-links\"><a class=\"color-fade\" href=\"javascript:void(0)\">Hover over Me<\/a><\/div>\n<\/div>\n<p><strong>Explanation:<\/strong><br \/>\nThis effect changes the color of the link on hover, creating a smooth transition from one color to another. The <code>transition<\/code> property is used to animate the color change over 0.3 seconds, providing a subtle yet effective visual cue that the link is interactive.<\/p>\n<hr>\n<div class=\"text-center mb-20 mt-20\">\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<!-- CSS Responsive -->\n<ins class=\"adsbygoogle\"\n     style=\"display:block\"\n     data-ad-client=\"ca-pub-1356719463849900\"\n     data-ad-slot=\"5275015068\"\n     data-ad-format=\"horizontal\"\n     data-full-width-responsive=\"true\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n<\/div>\n<div class=\"adblock-message bg-main-50 rounded p-10 mb-20\">  \n\t<div class=\"d-flex align-items-center justify-content-between\">\n\t  <span class=\"text-gray-400\">If this site has been useful, we\u2019d love your support! Consider buying us a coffee to keep things going strong!<\/span>\n\t  <div class=\"buymeacoffee\">\n\t\t<a target=\"_blank\" href=\"https:\/\/buymeacoffee.com\/rpjs\"><img decoding=\"async\" width=\"180\" src=\"\/assets\/images\/coffee.png\"><\/a>\n\t  <\/div>\n\t<\/div>\n<\/div>\n<h2>3. Gradient Background Swipe<\/h2>\n<div class=\"headerblog\">CSS<\/div>\n<pre><code class=\"language-css\">a.gradient-swipe {\r\n  position: relative;\r\n  text-decoration: none;\r\n  color: #fff;\r\n  background: linear-gradient(45deg, #e74c3c, #3498db);\r\n  -webkit-background-clip: text;\r\n  color: transparent;\r\n  transition: background-position 0.5s, color 0.5s;\r\n  background-size: 200% 100%;\r\n  background-position: right bottom;\r\n}\r\n\r\na.gradient-swipe:hover {\r\n  background-position: left bottom;\r\n}\r\n<\/code><\/pre>\n<style>a.gradient-swipe{position:relative;text-decoration:none;color:#fff;background:linear-gradient(45deg,#e74c3c,#3498db);-webkit-background-clip:text;color:transparent;transition:background-position 0.5s,color 0.5s;background-size:200% 100%;background-position:right bottom}a.gradient-swipe:hover{background-position:left bottom}<\/style>\n<div class=\"code-block\">\n<div class=\"header\">Result<\/div>\n<div class=\"sample-links\"><a class=\"gradient-swipe\" href=\"javascript:void(0)\">Hover over Me<\/a><\/div>\n<\/div>\n<p><strong>Explanation:<\/strong><br \/>\nThis animation adds a dynamic swipe effect to the link&#39;s background gradient, making the text color transition simultaneously. Initially, the gradient is clipped to the text using <code>-webkit-background-clip: text<\/code>, rendering the text itself transparent to let the gradient show through. Upon hovering, the <code>background-position<\/code> shifts, creating the illusion of the gradient swiping across the text. The transition for both the background position and the text color ensures a smooth effect, highlighting the link with a colorful and engaging visual cue. This effect is particularly eye-catching and can be used to draw attention to specific calls to action or important links on a webpage.<\/p>\n<hr>\n<h2 id=\"4-text-shadow-pop\">4. Text Shadow Pop<\/h2>\n<div class=\"headerblog\">CSS<\/div>\n<pre><code class=\"language-css\">a.shadow-pop {\r\n  text-decoration: none;\r\n  color: #000;\r\n  transition: text-shadow 0.3s ease-in-out;\r\n}\r\n\r\na.shadow-pop:hover {\r\n  text-shadow: 1px 1px 2px #3498db;\r\n}\r\n<\/code><\/pre>\n<style>a.shadow-pop{text-decoration:none;color:#000;transition:text-shadow 0.3s ease-in-out}a.shadow-pop:hover{text-shadow:1px 1px 2px #3498db}<\/style>\n<div class=\"code-block\">\n<div class=\"header\">Result<\/div>\n<div class=\"sample-links\"><a class=\"shadow-pop\" href=\"javascript:void(0)\">Hover over Me<\/a><\/div>\n<\/div>\n<p><strong>Explanation:<\/strong><br \/>\nOn hover, this animation adds a shadow to the text, making it appear as if it pops out of the page. The <code>text-shadow<\/code> property creates the shadow effect, and the transition ensures the shadow appears smoothly, enhancing the link&#39;s prominence and interactivity.<\/p>\n<hr>\n<h2 id=\"5-border-bottom-reveal\">5. Border Bottom Reveal<\/h2>\n<div class=\"headerblog\">CSS<\/div>\n<pre><code class=\"language-css\">a.border-reveal {\r\n  position: relative;\r\n  text-decoration: none;\r\n  color: #000;\r\n}\r\n\r\na.border-reveal::after {\r\n  content: &#39;&#39;;\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 2px;\r\n  bottom: 0;\r\n  left: 0;\r\n  background-color: #3498db;\r\n  transform: scaleX(0);\r\n  transition: transform 0.3s ease-in-out;\r\n}\r\n\r\na.border-reveal:hover::after {\r\n  transform: scaleX(1);\r\n}\r\n<\/code><\/pre>\n<style>a.border-reveal{position:relative;text-decoration:none;color:#000}a.border-reveal::after{content:'';position:absolute;width:100%;height:2px;bottom:0;left:0;background-color:#3498db;transform:scaleX(0);transition:transform 0.3s ease-in-out}a.border-reveal:hover::after{transform:scaleX(1)}<\/style>\n<div class=\"code-block\">\n<div class=\"header\">Result<\/div>\n<div class=\"sample-links\"><a class=\"border-reveal\" href=\"javascript:void(0)\">Hover over Me<\/a><\/div>\n<\/div>\n<p><strong>Explanation:<\/strong><br \/>\nThis animation reveals a border underneath the link on hover. The <code>::after<\/code> pseudo-element creates the border, which initially has a <code>scaleX<\/code> value of <code>0<\/code>, making it invisible. Upon hovering, the border scales to its full width (<code>scaleX(1)<\/code>), creating a reveal effect. The transition provides a smooth scaling animation.<\/p>\n<hr>\n<h2 id=\"6-3d-flip\">6. 3D Flip<\/h2>\n<div class=\"headerblog\">CSS<\/div>\n<pre><code class=\"language-css\">a.flip {\r\n  display: inline-block;\r\n  text-decoration: none;\r\n  color: #000;\r\n  perspective: 1000px;\r\n  transition: transform 0.5s;\r\n}\r\n\r\na.flip:hover {\r\n  transform: rotateY(180deg);\r\n}\r\n<\/code><\/pre>\n<style>a.flip{display:inline-block;text-decoration:none;color:#000;perspective:1000px;transition:transform 0.5s}a.flip:hover{transform:rotateY(180deg)}<\/style>\n<div class=\"code-block\">\n<div class=\"header\">Result<\/div>\n<div class=\"sample-links\"><a class=\"flip\" href=\"javascript:void(0)\">Hover over Me<\/a><\/div>\n<\/div>\n<p><strong>Explanation:<\/strong><br \/>\nThe 3D flip animation makes the link perform a half rotation along the Y-axis on hover, creating a flipping effect. The <code>perspective<\/code> property adds depth to the rotation, and the <code>transform<\/code> property is used to apply the rotation. The transition ensures the flip is smooth and noticeable.<\/p>\n<hr>\n<h2 id=\"7-pulse-glow\">7. Pulse Glow<\/h2>\n<div class=\"headerblog\">CSS<\/div>\n<pre><code class=\"language-css\">a.pulse-glow:hover {\r\n  text-decoration: none;\r\n  animation: pulse 1.5s infinite;\r\n}\r\n\r\n@keyframes pulse {\r\n  0% {\r\n    box-shadow: 0 0 0 0px rgba(52, 152, 219, 0.5);\r\n  }\r\n  100% {\r\n    box-shadow: 0 0 0 10px rgba(52, 152, 219, 0);\r\n  }\r\n}\r\n<\/code><\/pre>\n<style>a.pulse-glow:hover{text-decoration:none;animation:pulse 1.5s infinite}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,152,219,.5)}100%{box-shadow:0 0 0 10px rgba(52,152,219,0)}}<\/style>\n<div class=\"code-block\">\n<div class=\"header\">Result<\/div>\n<div class=\"sample-links\"><a class=\"pulse-glow\" href=\"javascript:void(0)\">Hover over Me<\/a><\/div>\n<\/div>\n<p><strong>Explanation:<\/strong><br \/>\nThis animation creates a pulsing glow effect around the link. The <code>@keyframes<\/code> rule defines the pulse animation, which varies the <code>box-shadow<\/code> to create a glowing effect that expands and fades. The animation is set to run infinitely, drawing attention to the link continuously.<\/p>\n<hr>\n<div class=\"text-center mb-20 mt-20\">\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<!-- CSS Responsive -->\n<ins class=\"adsbygoogle\"\n     style=\"display:block\"\n     data-ad-client=\"ca-pub-1356719463849900\"\n     data-ad-slot=\"5275015068\"\n     data-ad-format=\"horizontal\"\n     data-full-width-responsive=\"true\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n<\/div>\n<div class=\"adblock-message bg-main-50 rounded p-10 mb-20\">  \n\t<div class=\"d-flex align-items-center justify-content-between\">\n\t  <span class=\"text-gray-400\">If this site has been useful, we\u2019d love your support! Consider buying us a coffee to keep things going strong!<\/span>\n\t  <div class=\"buymeacoffee\">\n\t\t<a target=\"_blank\" href=\"https:\/\/buymeacoffee.com\/rpjs\"><img decoding=\"async\" width=\"180\" src=\"\/assets\/images\/coffee.png\"><\/a>\n\t  <\/div>\n\t<\/div>\n<\/div>\n<h2 id=\"8-wavy-underline\">8. Background Slide<\/h2>\n<div class=\"headerblog\">CSS<\/div>\n<pre><code class=\"language-css\">a.background-slide {\r\n  display: inline-block;\r\n  text-decoration: none;\r\n  color: #fff;\r\n  padding: 10px 20px;\r\n  position: relative;\r\n  background-color: #3498db;\r\n  transition: color 0.5s;\r\n  overflow: hidden;\r\n  z-index: 1;\r\n}\r\n\r\na.background-slide::before {\r\n  content: &#39;&#39;;\r\n  position: absolute;\r\n  top: 0;\r\n  left: -100%;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-color: #e74c3c;\r\n  transition: left 0.5s;\r\n  z-index: -1;\r\n}\r\n\r\na.background-slide:hover::before {\r\n  left: 0;\r\n}\r\n\r\na.background-slide:hover {\r\n  color: #000;\r\n}\r\n<\/code><\/pre>\n<style>a.background-slide{display:inline-block;text-decoration:none;color:#fff;padding:10px 20px;position:relative;background-color:#3498db;transition:color 0.5s;overflow:hidden;z-index:1}a.background-slide::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background-color:#e74c3c;transition:left 0.5s;z-index:-1}a.background-slide:hover::before{left:0}a.background-slide:hover{color:#000}<\/style>\n<div class=\"code-block\">\n<div class=\"header\">Result<\/div>\n<div class=\"sample-links\"><a class=\"background-slide\" href=\"javascript:void(0)\">Hover over Me<\/a><\/div>\n<\/div>\n<p><strong>Explanation:<\/strong><br \/>\nThis CSS snippet creates a sliding background effect for a link. The link initially displays with a primary background color. A pseudo-element (<code>::before<\/code>) is used to create an overlay with a different background color, which starts off-screen to the left of the link. Upon hovering, this overlay slides in from the left to cover the original background completely, changing the link&#39;s visual appearance. The <code>color<\/code> transition ensures that the text color changes appropriately to remain visible against the new background color. This effect adds a dynamic visual element to interactions, making the link more noticeable and enhancing the user experience on the webpage.<\/p>\n<hr>\n<h2 id=\"9-circle-reveal\">9. Circle Reveal<\/h2>\n<div class=\"headerblog\">CSS<\/div>\n<pre><code class=\"language-css\">a.circle-reveal {\r\n  position: relative;\r\n  text-decoration: none;\r\n  color: #000;\r\n  overflow: hidden;\r\n  transition: color 0.3s;\r\n  z-index: 1;\r\n}\r\n\r\na.circle-reveal::before {\r\n  content: &#39;&#39;;\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-color: #3498db;\r\n  border-radius: 50%;\r\n  transform: translate(-50%, -50%) scale(0);\r\n  transition: transform 0.3s ease-in-out;\r\n  z-index: -1;\r\n}\r\n\r\na.circle-reveal:hover::before {\r\n  transform: translate(-50%, -50%) scale(1);\r\n}\r\n\r\na.circle-reveal:hover {\r\n  color: #fff;\r\n}\r\n<\/code><\/pre>\n<style>a.circle-reveal{position:relative;text-decoration:none;color:#000;overflow:hidden;transition:color 0.3s;z-index:1;}a.circle-reveal::before{content:'';position:absolute;top:50%;left:50%;width:100%;height:100%;background-color:#3498db;border-radius:50%;transform:translate(-50%,-50%) scale(0);transition:transform 0.3s ease-in-out;z-index: -1;}a.circle-reveal:hover::before{transform:translate(-50%,-50%) scale(1)}a.circle-reveal:hover{color:#fff}<\/style>\n<div class=\"code-block\">\n<div class=\"header\">Result<\/div>\n<div class=\"sample-links\"><a class=\"circle-reveal\" href=\"javascript:void(0)\">Hover over Me<\/a><\/div>\n<\/div>\n<p><strong>Explanation:<\/strong><br \/>\nThis animation reveals a circular background on hover, changing the link&#39;s color to ensure readability against the new background. The <code>::before<\/code> pseudo-element creates the circle, which scales from <code>0<\/code> to <code>1<\/code> on hover, creating a reveal effect. The transition effects both the transformation and the color change, making the interaction smooth and visually appealing.<\/p>\n<hr>\n<h2 id=\"10-vertical-flip\">10. Vertical Flip<\/h2>\n<div class=\"headerblog\">CSS<\/div>\n<pre><code class=\"language-css\">a.vertical-flip {\r\n  display: inline-block;\r\n  text-decoration: none;\r\n  color: #000;\r\n  perspective: 1000px;\r\n  transition: transform 0.5s;\r\n}\r\n\r\na.vertical-flip:hover {\r\n  transform: rotateX(180deg);\r\n}\r\n<\/code><\/pre>\n<style>a.vertical-flip{display:inline-block;text-decoration:none;color:#000;perspective:1000px;transition:transform 0.5s}a.vertical-flip:hover{transform:rotateX(180deg)}<\/style>\n<div class=\"code-block\">\n<div class=\"header\">Result<\/div>\n<div class=\"sample-links\"><a class=\"vertical-flip\" href=\"javascript:void(0)\">Hover over Me<\/a><\/div>\n<\/div>\n<p><strong>Explanation:<\/strong><br \/>\nSimilar to the 3D flip effect, this animation rotates the link along the X-axis, creating a vertical flipping effect. The <code>perspective<\/code> property adds depth to the flip, while the <code>transform<\/code> property applies the rotation. The smooth transition makes the flip visually striking and engaging.<\/p>\n<hr>\n<p>These 10 CSS animated link effects offer a range of creative possibilities to enhance the interactivity and aesthetic appeal of web projects. By incorporating these animations, web developers and designers can create more engaging and visually interesting websites. Remember, while animations can add a layer of polish and interactivity, they should be used judiciously to ensure they complement the user experience rather than detract from it.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS animations stand out as a powerful tool to enhance user experience and add a touch of creativity to websites. Among the many elements that can be animated, links are particularly interesting due to their pivotal role in navigation and user interaction. Animating links can not only improve the visual appeal of a website but [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":677,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-676","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","wpautop"],"_links":{"self":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/676","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/comments?post=676"}],"version-history":[{"count":2,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/676\/revisions"}],"predecessor-version":[{"id":679,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/676\/revisions\/679"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/media\/677"}],"wp:attachment":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/media?parent=676"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/categories?post=676"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/tags?post=676"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}