diff --git a/README.md b/README.md
index 691d6ed..d38233e 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,7 @@
-> for css learning and html javascript
\ No newline at end of file
+> for css learning and html javascript
+
+#### how to use
+1. install vscode
+2. install live server extension
+3. open code and go live ....
\ No newline at end of file
diff --git a/index.html b/index.html
index 4f325f8..919c32a 100644
--- a/index.html
+++ b/index.html
@@ -18,6 +18,9 @@
Sliding Link
Go
Cool
+ Color Swapping
+ Rainbow Underline
+ Passing Underline
diff --git a/styles/style.css b/styles/style.css
index 869fd0b..0f80f7d 100644
--- a/styles/style.css
+++ b/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);
}
\ No newline at end of file