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) >> Forms and Inputs >> Input Box Glow Effect

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


Author: SnapBuilder <>

Last Modified: 2019-12-09 00:33:37

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
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 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="">Input Box Glow Effect</a> page. ] </div> </body> </html>

[ Snippet Options ]


© 2002 -  Snap Builder Public Codes Library