Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

136 lines (118 sloc) 4.863 kb
<!DOCTYPE html>
<meta charset="utf-8">
<title>css3pie testcase</title>
<style type="text/css">
html, body {
background: white;
font-family: sans-serif;
margin: 10px;
fieldset {
padding: 10px 20px 20px;
margin: 20px;
border: solid 1px #ccc;
legend {
padding: 0 10px;
background: white;
margin: 0 0 15px 0;
#myDiv {
margin: 20px 0;
width: 400px;
height: 300px;
color: white;
div.test {
padding: 2em;
margin: 2em 0;
border: 1px solid #CCC;
input[type="submit"], button, {
vertical-align: middle;
color: white;
position: relative;
font-weight: bold;
text-decoration: none !important;
margin: 0 1em 0 0;
border: 1px solid red;
padding: 15px 30px;
overflow: visible;
font-size: 18px;
text-align: center;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #FDECEF;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FDECEF), to(#8E1A2F));
background: -moz-linear-gradient(#FDECEF, #8E1A2F);
-pie-background: linear-gradient(#FDECEF, #8E1A2F);
behavior: url(../../build/;
input[type="submit"].pie_hover, button.pie_hover,,
.ui-button.ui-state-hover {
border-color: green;
background: #B6F4AE;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#B6F4AE), to(#11461E));
background: -moz-linear-gradient(#B6F4AE, #11461E);
-pie-background: linear-gradient(#B6F4AE, #11461E);
.ui-button.ui-state-active, .ui-button.pie_hover.ui-state-active {
border-color: blue;
background: #CBD2FB;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#CBD2FB), to(#04128B));
background: -moz-linear-gradient(#CBD2FB, #04128B);
-pie-background: linear-gradient(#CBD2FB, #04128B);
.ui-button:active, .ui-button:focus, a.ui-button:active, a.ui-button:focus {
outline: 0;
/* For removing gecko's focus styles. Handle focus styles via jQuery ui's focus classes. */
input[type="file"] > input[type="button"]::-moz-focus-inner {
border: 0;
#test2 {
display: block;
width: 162px;
padding: 85px 10px 8px 10px;
background: url(../border.png) no-repeat;
border: 1px #D5E5F2 solid;
border-radius: 20px 0;
-webkit-border-radius: 20px 0;
-moz-border-radius: 20px 0;
behavior: url(../../build/;
position: relative;
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
$(document).ready(function() {
$('input[type="submit"], button,').button();
<div class="test">
<p>This tests that the entire area, not just the text, reacts to hover.</p>
<input type="submit" name="previous" value="Input [type=submit]">
<button name="media-play-pause">Button Element</button>
<a class="link-button" href="#">Anchor [class=link-button]</a>
<div class="test">
<p>This tests that the entire area of the link is clickable.</p>
<a href="#" id="test2">
Landscape model
Jump to Line
Something went wrong with that request. Please try again.