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: 2019-12-09 00:22:52
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 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 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:#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>
|
