diff --git a/CSS text hover effect/README.md b/CSS text hover effect/README.md new file mode 100644 index 0000000..7a3dd5a --- /dev/null +++ b/CSS text hover effect/README.md @@ -0,0 +1,8 @@ +## Multicolor underline hover effect + +![image](https://user-images.githubusercontent.com/92115707/196000815-8f2a291c-ae81-45c5-97a5-d948050ce664.png) + +A cool multicolor underline hover effect + +Use it to highlight important term or quote. + diff --git a/CSS text hover effect/index.html b/CSS text hover effect/index.html new file mode 100644 index 0000000..f053f25 --- /dev/null +++ b/CSS text hover effect/index.html @@ -0,0 +1,17 @@ + + + + + + + + hover effect + + +
+

+ There were a variety of ways to win the game. James had played it long enough to know most of them and he could see what his opponent was trying to do. There was a simple counterattack that James could use and the game should be his. +

+
+ + \ No newline at end of file diff --git a/CSS text hover effect/style.css b/CSS text hover effect/style.css new file mode 100644 index 0000000..b17c01f --- /dev/null +++ b/CSS text hover effect/style.css @@ -0,0 +1,33 @@ +body{ + background-color: #0093E9; + background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%); + margin: 0; + height: 100vh; + overflow: hidden; + font-family: 'Monsterrat',sans-serif; +} +.container{ + padding: 7px; + margin: 240px auto; + width: 70%; + border: 2px solid white; + border-radius: 5px; +} +p{ + color: white; + text-align: center; + line-height: 1.5; +} +.effect{ + background-image: linear-gradient(90deg,red,blue); + background-size: 0% 4px; + background-repeat: no-repeat; + background-position: left bottom; + text-decoration: none; + font-weight: bold; + color: white; + transition: background-size 300ms linear; +} +.effect:hover{ + background-size: 100% 4px; +} \ No newline at end of file