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) >> Buttons >> Pure CSS3 Button With Reflection


Code Snippet </> Info


Snippet Name: Pure CSS3 Button With Reflection

Description: Add a pure CSS3 button with reflection to your web page.
Example: View Code Demo

Note:

Author: SnapBuilder <snippets@snapbuilder.com>

Last Modified: 2015-08-26 21:38:17

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 Button With Reflection</title> <style> /* Begin HTML5 CSS3 Button With Reflection */ /* == 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:#ffffff; color:#000000;} #content {margin:0; padding:15px 15px 15px 15px;} p { color:#eee; font-family:Verdana, Geneva, sans-serif; font-size:26px; height:50px; line-height:30px; margin-bottom:26px; text-align:center; text-shadow:0 1px 5px hsla(0,0%,0%,.75); width:500px; } a { background:#868686; border:1px solid #666; border:1px solid hsla(0,0%,0%,.4); color:#eee; color:hsla(0,0%,100%,.9); display:block; font-family:sans-serif; font-size:20px; height:50px; line-height:50px; margin-bottom:50px; position:relative; text-align:center; text-decoration:none; text-shadow:0 -1px 1px hsla(0,0%,0%,.25); width:500px; -webkit-border-radius:10px; -webkit-box-reflect:below 3px -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.25) 100%); -webkit-box-shadow:inset 0 1px hsla(0,0%,100%,.25), inset 0 50px 0 -25px hsla(0,0%,100%,.10), inset 0 0 25px hsla(0,0%,100%,.5); -webkit-transition:all .2s ease; } a:hover, a:focus { -webkit-box-shadow:inset 0 1px hsla(0,0%,100%,.25), inset 0 50px 0 -25px hsla(0,0%,100%,.10), inset 0 0 100px hsla(0,0%,100%,.5); } a:active { top:1px; -webkit-box-reflect:below 1px -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.25) 100%); -webkit-transition:all 0 ease; } .blue {background:#2b6fdb;} .green {background:#39bc25;} .red {background:#db2b2b;} .yellow {background:#f2ae30;} </style> </head> <body> <div id="content"> <h3>HTML5 CSS3 Button With Reflection</h3> <p>Please view in Chrome to<br>experience the box-reflect!</p> <p>Hover your mouse over buttons<br />to view onhover color change.</p> <a href="#" class="blue"></a><br /><br /> <a href="#" class="green"></a><br /><br /> <a href="#" class="red"></a><br /><br /> <a href="#" class="yellow"></a><br /><br /> <a href="#" class="">Default button with reflection</a> <br /><br /><br /> [ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_205.html">HTML5 CSS3 Button With Reflection Code Snippet</a> page. ] </div> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library