#round{
width:100px; /*same as the height*/
height:100px; /*same as the width*/
background-color:#FF7F50;
border:1px solid #ff0000; /*same colour as the background*/
color:#fff;
font-size:1em;
/*set the border-radius at half the size of the width and height*/
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
/*give the button a small drop shadow*/
-webkit-box-shadow: 0 0 10px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 10px rgba(0,0,0, .75);
box-shadow: 2px 2px 15px rgba(0,0,0, .75);
}
/***NOW STYLE THE BUTTON'S HOVER STATE***/
input#round:hover{
background:#c20b0b;
border:1px solid #c20b0b;
/*reduce the size of the shadow to give a pushed effect*/
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
-moz-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
box-shadow: 0px 0px 5px rgba(0,0,0, .75);
}


#square3{
width:130px; /*same as the height*/
height:50px; /*same as the width*/
background-color:#FF7F50;
border:3px solid BLACK; /*same colour as the background*/
color:#fff;
font-size:1em;

/*set the border-radius at half the size of the width and height*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;


/*give the button a small drop shadow */
-webkit-box-shadow: 0 0 10px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 10px rgba(0,0,0, .75);
box-shadow: 2px 2px 15px rgba(0,0,0, .75);


}

#round2{
width:80px; /*same as the height*/
height:80px; /*same as the width*/
background-color:#FF7F50;
border:1px solid #ff0000; /*same colour as the background*/
color:#fff;
font-size:0.9em;
/*set the border-radius at half the size of the width and height*/
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
/*give the button a small drop shadow*/
-webkit-box-shadow: 0 0 10px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 10px rgba(0,0,0, .75);
box-shadow: 2px 2px 15px rgba(0,0,0, .75);
}
/***NOW STYLE THE BUTTON'S HOVER STATE***/
input#round2:hover{
background:#c20b0b;
border:1px solid #c20b0b;
/*reduce the size of the shadow to give a pushed effect*/
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
-moz-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
box-shadow: 0px 0px 5px rgba(0,0,0, .75);
}





#round3{
width:140px; /*same as the height*/
height:140px; /*same as the width*/
background-color:#FF7F50;
border:2px solid #ff0000; /*same colour as the background*/
color:#fff;
font-size:1em;
/*set the border-radius at half the size of the width and height*/
-webkit-border-radius: 70px;
-moz-border-radius: 70px;
border-radius: 70px;
/*give the button a small drop shadow*/
-webkit-box-shadow: 0 0 10px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 10px rgba(0,0,0, .75);
box-shadow: 2px 2px 15px rgba(0,0,0, .75);
}
/***NOW STYLE THE BUTTON'S HOVER STATE***/
input#round3:hover{
background:#c20b0b;
border:1px solid #c20b0b;
/*reduce the size of the shadow to give a pushed effect*/
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
-moz-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
box-shadow: 0px 0px 5px rgba(0,0,0, .75);
}







#square{
width:120px; /*same as the height*/
height:180px; /*same as the width*/
background-color:#FF7F50;
border:3px solid BLACK; /*same colour as the background*/
color:#fff;
font-size:1em;

/*set the border-radius at half the size of the width and height*/

/*give the button a small drop shadow */
-webkit-box-shadow: 0 0 10px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 10px rgba(0,0,0, .75);
box-shadow: 2px 2px 15px rgba(0,0,0, .75);


}
/***NOW STYLE THE BUTTON'S HOVER STATE***/
input#square:hover{
background:#c20b0b;
border:1px solid #c20b0b;
/*reduce the size of the shadow to give a pushed effect*/
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
-moz-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
box-shadow: 0px 0px 5px rgba(0,0,0, .75);
}




#square2{
width:130px; /*same as the height*/
height:180px; /*same as the width*/
background-color:#FF7F50;
border:3px solid BLACK; /*same colour as the background*/
color:#fff;
font-size:1em;

/*set the border-radius at half the size of the width and height*/
-webkit-border-radius: 70px;
-moz-border-radius: 70px;
border-radius: 70px;


/*give the button a small drop shadow */
-webkit-box-shadow: 0 0 10px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 10px rgba(0,0,0, .75);
box-shadow: 2px 2px 15px rgba(0,0,0, .75);


}
/***NOW STYLE THE BUTTON'S HOVER STATE***/
input#square2:hover{
background:#c20b0b;
border:1px solid #c20b0b;
/*reduce the size of the shadow to give a pushed effect*/
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
-moz-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
box-shadow: 0px 0px 5px rgba(0,0,0, .75);
}














