Skip to content

Instantly share code, notes, and snippets.

@jansabbe

jansabbe/index.html

Created May 29, 2011 11:45
Show Gist options
  • Save jansabbe/997680 to your computer and use it in GitHub Desktop.
Save jansabbe/997680 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 buttons that work on IE8 using PIE.js
Raw
index.html
<!DOCTYPE HTML>
<html>
<head>
<title>Css button preview</title>
<meta http-equiv="X-UA-Compatible" content="IE=100" >
<!--[if lt IE 10]>
<script type="text/javascript" src="PIE.js"></script>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
if (window.PIE) {
$('input[type="button"]').each(function() {
PIE.attach(this);
});
}
$('input[type="button"]').mousedown(function() {$(this).addClass('active')});
$('input[type="button"]').mouseup(function() {$(this).removeClass('active')});
$('input[type="button"]').mouseleave(function() {$(this).removeClass('active')});
});
</script>
<style type="text/css">
input[type='button'] {
background: -moz-linear-gradient(#fff,#ddd);
background: -webkit-gradient(linear,0 0,0 bottom, from(#fff),to(#ddd));
background: linear-gradient(#fff,#ddd);
-pie-background: linear-gradient(#fff,#ddd);
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border: solid 1px #999;
padding:3px 5px;
color: #333;
text-shadow: 0px 1px 1px white;
}
input[type='button']:hover {
background: -moz-linear-gradient(#f1f1f1,#ddd);
background: -webkit-gradient(linear,0 0,0 bottom, from(#f1f1f1),to(#ddd));
background: linear-gradient(#f1f1f1,#ddd);
-pie-background: linear-gradient(#f1f1f1,#ddd);
}
input[type='button']:active,input[type='button'].active {
background: -moz-linear-gradient(#ccc,#ddd);
background: -webkit-gradient(linear,0 0,0 bottom, from(#ccc),to(#ddd));
background: linear-gradient(#ccc,#ddd);
-pie-background: linear-gradient(#ccc,#ddd);
text-align:center;
}
input[type='button'].default {
font-weight:bold;
-webkit-box-shadow: #ccc 0px 0px 3px;
-moz-box-shadow: #ccc 0px 0px 3px;
box-shadow: #ccc 0px 0px 3px;
}
input[type='button'][disabled] {
color:#999;
}
input[type='button'][disabled]:hover {
background: -moz-linear-gradient(#fff,#ddd);
background: -webkit-gradient(linear,0 0,0 bottom, from(#fff),to(#ddd));
background: linear-gradient(#fff,#ddd);
-pie-background: linear-gradient(#fff,#ddd);
}
.big {
font-size:25px;
}
.small {
font-size:9px;
}
</style>
</head>
<body>
<p>
<input type="button" value="Normal button"></input>
<input type="button" value="Default button" class="default"></input>
<input type="text" value="Text"></input>
</p>
<p>
<input type="button" value="Big" class="big"></input>
<input type="button" value="Big" class="default big"></input>
</p>
<p>
<input type="button" value="Small" class="small"></input>
<input type="button" value="Small" class="default small"></input>
</p>
<p>
<input type="button" value="Normal button with lots of text"></input>
<input type="button" value="Default button with lots of text" class="default"></input>
</p>
<p>
<input type="button" value="Disabled" disabled></input>
<input type="button" value="Disabled" class="default" disabled></input>
</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment