Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Text & Text Effects >> CSS3 Transition Text Glows on Mouseover


Code Snippet </> Info


Snippet Name: CSS3 Transition Text Glows on Mouseover

Description: Add a CSS3 transition text that glows when the visitors mouse hovers over it.
Example: View Code Demo

Note:

Author: SnapBuilder <snippets@snapbuilder.com>

Last Modified: 2015-08-26 22:53:21

Language: css

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

!DOCTYPE html> <html> <head> <title>HTML5 CSS3 Transition Text Glows on Mouseover</title> <style> /* Begin HTML5 CSS3 Transition Text Glows on Mouseover */ /* == This Script Free To Use Providing This Notice Remains == */ /* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */ /* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */ BODY {font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#000000; color:#ffffff;} #wrapper {margin:0; padding:15px 15px 15px 15px;} .text-glow{ font-size:4em; color:#ffffff; font-family:Arial; } .text-glow:hover, .text-glow:focus .text-glow:active{ -webkit-stroke-width:5.3px; -webkit-stroke-color:#ffffff; -webkit-fill-color:#ffffff; text-shadow:1px 0px 20px yellow; -webkit-transition:width 0.3s; /*Safari & Chrome*/ transition:width 0.3s; -moz-transition:width 0.3s; /* Firefox 4 */ -o-transition:width 0.3s; /* Opera */ } .text-glow a{ -webkit-transition:all 0.3s ease-in; /*Safari & Chrome*/ transition:all 0.3s ease-in; -moz-transition:all 0.3s ease-in; /* Firefox 4 */ -o-transition:all 0.3s ease-in; /* Opera */ text-decoration:none; color:#ffffff; } </style> </head> <body> <div id="wrapper"> <h3 align="center">HTML5 CSS3 Transition Text Glows on Mouseover</h3> <div class="text-glow" align="center"><a href="#">This Text Glows On Mouseover</a></div> <br /><br /> <div align="center"> [ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_210.html">HTML5 CSS3 Transition Text Glows on Mouseover Code Snippet</a> page. ] </div> </div> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library