Code Snippet </> Info
Snippet Name: Input Box Glow Effect
Description: Instantly add glow colors to your form input boxes with this nifty glow effect.
Example: View Code Demo
Note:
Author: SnapBuilder <snippets@snapbuilder.com>
Last Modified: 2019-12-09 00:33:37
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>
<head>
<title>Input Box Glow Effect</title>
<style>
/* Begin Input Box Glow Effect */
/* This Script Free To Use Providing This Notice Remains */
/* This Script Has Been Found In The https://snapbuilder.com Free Public Codes Library */
body {font-family:verdana,arial,ms sans serif; font-size:90%;color:#000000;background:#e6e6e6;text-shadow:0px 1px 0px rgba(0,0,0,0.4);}
input {font-size:18px;font-family: helvetica;}
input {outline:none;transition: all 0.25s ease-in-out;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;border:1px solid rgba(0,0,0, 0.2);color:#dddddd;background-color:#eeeeee;padding:3px;}
input:focus {box-shadow:0 0 15px #007730;-webkit-box-shadow:0 0 15px #007730;-moz-box-shadow:0 0 15px #007730;border:1px solid #007730;background-color:#ffffff;}
</style>
</head>
<body>
<div>Click your mouse inside the input box to see the input box glow effect.</div>
<br />
<div class="input-glow">
User Name: <input type="text" class="input-glow" name="username" placeholder="username">
</div>
<br /><br />
<div id="link">
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_149.html">Input Box Glow Effect</a> page. ]
</div>
</body>
</html>
|
