This demonstration relies upon css3pie in order to work in IE. You can get it at http://css3pie.com/
I have tried to use gradients and box shadow to a cool effect.
It seems like a lot of code for a button, but as it's a class, you can create many buttons on the same page with it.
Hope you like it.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SoM KI Box</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
});
</script>
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:Sans-serif;
}
.greenButton
{
float:left;
margin:1em;
}
.greenButton .outer, .greenButton .inner, .greenButton .outer:hover, .greenButton .inner:hover
{
position:relative;
behavior:url('scripts/PIE.htc');
}
.greenButton .outer, .greenButton .outer:hover
{
width:8em;
height:8em;
padding-top:0.2em;
padding-left:0.2em;
}
.greenButton .inner, .greenButton .inner:hover
{
border-radius:0.5em;
-moz-border-radius:0.5em;
-webkit-border-radius:0.5em;
width:7.8em;
height:5.8em;
padding-top:2em;
text-align:center;
}
.greenButton .outer, .greenButton .outer:hover
{
box-shadow:0 0 0.8em #CCCCCC;
-moz-box-shadow:0 0 0.8em #CCCCCC;
-webkit-box-shadow:0 0 0.8em #CCCCCC;
border-radius:0.62em;
-moz-border-radius:0.62em;
-webkit-border-radius:0.62em;
}
.greenButton .outer
{
background-image:-moz-linear-gradient(90deg, #64cc00, #8DE639);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#64cc00), to(#8DE639));
-pie-background:linear-gradient(90deg, #8DE639, #64cc00);
}
.greenButton .inner
{
background-image:-moz-linear-gradient(90deg, #8DE639, #64cc00);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#8DE639), to(#64cc00));
-pie-background:linear-gradient(90deg, #64cc00, #8DE639);
}
.greenButton .outer:hover
{
background-image:-moz-linear-gradient(90deg, #C80043, #E33972);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#C80043), to(#E33972));
-pie-background:linear-gradient(90deg, #E33972, #C80043);
}
.greenButton .inner:hover
{
background-image:-moz-linear-gradient(90deg, #E33972, #C80043);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#E33972), to(#C80043));
-pie-background:linear-gradient(90deg, #C80043, #E33972);
}
.greenButton a, .greenButton a:link, .greenButton a:hover, .greenButton a:visited, .greenButton a:active
{
color:#FFFFFF;
text-decoration:none;
}
</style>
</head>
<body>
<section id="mainContent">
<figure class="greenButton">
<section class="outer">
<section class="inner">
<a href="getPageContext.php">Get<br />Page<br />Context</a>
</section>
</section>
</figure>
</section>
</body>
</html>
No comments:
Post a Comment