update ano 3 link

README.md

@@ -1,2 +1,7 @@
 
-> for css learning and html javascript
+> for css learning and html javascript
+
+#### how to use
+1. install vscode
+2. install live server extension
+3. open code and go live ....

index.html

@@ -18,6 +18,9 @@
             <li><a class="slidinglink" href="#">Sliding Link</a></li>
             <li><a href="#" class="swappinlink" data-replace="See"><span>Go</span></a></li>
             <li><a href="#" class="growinglink"> Cool </a></li>
+            <li><a href="#" class="colorswapping"> Color Swapping </a></li>
+            <li><a href="#" class="rainbowlink"> Rainbow Underline</a></li>
+            <li><a href="#" class="passinglink"> Passing Underline</a></li>
         </ul>
         
      </div>

styles/style.css

@@ -100,4 +100,98 @@ a {
 .growinglink:hover::before {
     bottom: 0;
     height: 100%;
+}
+
+/* r2l color swapping link */
+.colorswapping {
+    background-image: linear-gradient(
+        to right,
+        #54b3d6,
+        #54b3d6 50%,
+        #000 50%
+    );
+    background-size: 200% 100%;
+    background-clip: text;
+    background-position: -100%;
+    display: inline-block;
+    padding: 5px 0;
+    position: relative;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    transition: all 0.3s ease-in-out;
+}
+
+.colorswapping:before {
+    content: '';
+    background: #54b3d6;
+    display: block;
+    position: absolute;
+    bottom: 0px;
+    left: 0;
+    width: 0;
+    height: 2px;
+    transition: all 0.3s ease-in-out;
+}
+
+.colorswapping:hover {
+    background-position: 0;
+}
+
+.colorswapping:hover::before {
+    width: 100%;
+}
+
+/* the rainbow link */
+
+
+.rainbowlink {
+    color: inherit;
+    text-decoration: none;
+}
+
+.rainbowlink {
+    background:
+        linear-gradient(
+            to right,
+            rgba(100, 200, 200, 1),
+            rgba(100, 200, 200, 1)
+        ),
+        linear-gradient(
+            to right,
+            rgba(255, 0, 0, 1),
+            rgba(255, 0, 180, 1),
+            rgba(0, 100, 200, 1)
+    );
+    background-size: 100% 3px, 0 3px;
+    background-position: 100% 100%, 0 100%;
+    background-repeat: no-repeat;
+    transition: background-size 400ms;                              
+}
+  
+.rainbowlink:hover {
+    background-size: 0 3px, 100% 3px;
+}
+
+/* passing underline */
+.passinglink {
+    position: relative;
+}
+
+.passinglink::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 4px;
+    border-radius: 4px;
+    background-color: aqua;
+    bottom: 0;
+    left: 0;
+    transform-origin: right;
+    transform: scaleX(0);
+    transition: transform .3s ease-in-out;
+}
+
+.passinglink:hover::before {
+    transform-origin: left;
+    transform: scaleX(1);
 }