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: 2019-12-09 02:14:29
Language: css
Highlight Mode: css
|
| Copy Codes: Use Free Notepad ++ |
|
Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor
|
|
Copied To Clipboard!
!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 https://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>
|
