codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
/*<![CDATA[*/
body, p, div, form, label, input{
/* some reset */
margin:0;
padding:0;
font-family:Verdana, Geneva, sans-serif;
font-size:small;
color:#666;
}
.wrapper{
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
background-color:#dbdbdb;
width:400px;
margin:0 auto;
padding:10px;
margin-top:20px;
}
.box{
width:auto;
height:200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
background-color:#FFF;
border-radius: 8px;
border:solid 1px #CCC;
/*margin:10px;*/
}
.label p.first{
width:auto;
text-align:center;
padding:20px;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #ececec 99%, #f8f8f8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(99%,#ececec), color-stop(100%,#f8f8f8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#ececec 99%,#f8f8f8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#ececec 99%,#f8f8f8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#ececec 99%,#f8f8f8 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%,#ececec 99%,#f8f8f8 100%); /* W3C */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f8f8f8',GradientType=0 ); /* IE6-9 */
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom:solid 1px #FFF;
}
.label p.second{
text-align:center;
width:auto;
padding:20px;
border-top:solid 1px #999;
}
p.agree{
float:left;
width:50%;
}
p.notagree{
float:right;
width:50%;
}
p input{
display:block;
margin:0 auto;
width:145px;
height:40px;
}
.buttonRed{
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ef4949), color-stop(1, #b44040) );
background:-moz-linear-gradient( center top, #ef4949 5%, #b44040 100% );
filter:progid: DXImageTransform.Microsoft.gradient(startColorstr='#ef4949', endColorstr='#b44040');
background-color:#ef4949;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
color:#ffffff;
font-family:arial;
font-size:13px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 2px 0px #9e3434;
border:1px solid #b44040;
}
.buttonGreen {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #a4d04d), color-stop(1, #7bbd34) );
background:-moz-linear-gradient( center top, #a4d04d 5%, #7bbd34 100% );
filter:progid: DXImageTransform.Microsoft.gradient(startColorstr='#a4d04d', endColorstr='#7bbd34');
background-color:#a4d04d;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border:1px solid #669831;
color:#e8f3d2;
font-family:arial;
font-size:13px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 2px 0px #67942d;
}
.buttonGreen:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #7bbd34), color-stop(1, #a4d04d) );
background:-moz-linear-gradient( center top, #7bbd34 5%, #a4d04d 100% );
filter:progid: DXImageTransform.Microsoft.gradient(startColorstr='#7bbd34', endColorstr='#a4d04d');
background-color:#7bbd34;
}
.buttonGreen:active {
position:relative;
top:1px;
}
.buttonRed:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b44040), color-stop(1, #ef4949) );
background:-moz-linear-gradient( center top, #b44040 5%, #ef4949 100% );
filter:progid: DXImageTransform.Microsoft.gradient(startColorstr='#b44040', endColorstr='#ef4949');
background-color:#b44040;
}
.buttonRed:active {
position:relative;
top:1px;
}
/*]]>*/
</style>
</head>
<body>
<div class="wrapper">
<div class="box">
<form class="formBox" >
<div class="label">
<p class="first">
Are you sure about this?
</p>
<p class="second">
Clicking yes, Battlefield 3 will be deleted on you
computer. Do you really want to do this?</p>
</div>
<div class="buttonForm">
<p class="agree">
<input class="buttonGreen" type="submit" value="Yes, I'm sure!" />
</p>
<p class="notagree">
<input class="buttonRed" type="submit" value="Don't do it!" />
</p>
</div>
</form>
</div>
</div>
</body>
</html>
Screenshot del risultato.
Rispondi quotando
( if tanto css==piace!
, per questo speravo in qualche aiuto.