CSS Text Hover Effect: using CSS, we can make lots of Amazing things like this hover effect. This effect is nothing, you can make a lot of advanced things by using the CSS which you will never have thought about. You have seen such type of effect in many places before. After seeing, you think like to make something like that. Trust me, it’s quite easy. Just you have to focus.
I think this is a cool text hover effect mostly built-in CSS. & little bit HTML. There is the source code of this Amazing hover effect, As you can see above. You can use it on your website’s text, link or menu etc. You can modify this code according to your choice or need. Using CSS, we can make lots of Amazing things like this hover effect.
Amazing CSS Text Hover Effect Checkout Below:
I have Created two files, first “text-hover.html” & second “style.css”. you can create just one file using “<style>”tag in HTML file. So, there is no need to create two files.
You May like
Free Bootstrap Login Form Source Code
Simple HTML & CSS Dropdown Menu Source Code
text-hover.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!doctype html> <!-- Code By WebDevTrick ( https://webdevtrick.com ) --> <html> <head> <meta charset="utf-8"> <title>CSS Text Hover Animation | Web Dev Trick</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="svg-wrapper"> <svg height="60" width="320" xmlns="http://www.w3.org/2000/svg"> <rect class="shape" height="60" width="320" /> <div class="text">WEBDEVTRICK</div> </svg> </div> </body> </html> |
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
/** code by WebDevTrick (https://webdevtrick.com) **/ html, body { background: rgb(20,20,20); text-align: center; height: 100%; overflow: hidden; } .svg-wrapper { position: relative; top: 50%; transform: translateY(-50%); margin: 0 auto; width: 320px; } .shape { stroke-dasharray: 140 540; stroke-dashoffset: -474; stroke-width: 8px; fill: transparent; stroke:red; border-bottom: 5px solid black; transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s; } .text { font-family: 'Roboto Condensed'; font-size: 22px; line-height: 32px; letter-spacing: 8px; color: #fff; top: -48px; position: relative; } .svg-wrapper:hover .shape { stroke-width: 2px; stroke-dashoffset: 0; stroke-dasharray: 760; } |
This is source code of CSS text hover effect. Copy these codes Enjoy. Hope you enjoyed & learned from this article, if this article useful for you, then you can increase our morale by sharing. Have you any questions or want to say something? Don’t worry you can comment below. Thanks for Visiting.
Hi there! This is my 1st comment here so I just wanted to
give a quick shout out and tell you I really
enjoy reading through your posts. Can you recommend any other blogs/websites/forums that cover the same topics?
Thanks for your time!
thank you, you can visit CSS-Tricks.com