<div class="field"> <input type="text" placeholder="Name" class="gredient_input" /> </div> <div class="field"> <input type="text" placeholder="Email" class="inset_input" /> </div> <div class="field"> <input type="submit" value="Submit" class="blue_button" /> </div> <div class="field"> <input type="button" value="Cancel" class="white_button" /> </div>
body { padding-top: 30px; padding-left: 30px } .field { clear: both; margin-bottom: 10px } .gredient_input { border: 1px solid rgba(0, 0, 0, 0.16); height: 25px; padding: 5px 10px 5px 5px; font-size: 15px; /*border-radius*/ -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.02) 0%, rgba(255, 255, 255, 0.02) 50%); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.02) 0%, rgba(255, 255, 255, 0.02) 50%); background-image: linear-gradient(top, rgba(0, 0, 0, 0.02) 0%, rgba(255, 255, 255, 0.02) 50%); width: 200px } .inset_input { border: 1px solid rgba(0, 0, 0, 0.16); height: 25px; padding: 5px 10px 5px 5px; font-size: 15px; /*border-radius*/ -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px1; background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.02) 0%, rgba(255, 255, 255, 0.02) 50%); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.02) 0%, rgba(255, 255, 255, 0.02) 50%); background-image: linear-gradient(top, rgba(0, 0, 0, 0.02) 0%, rgba(255, 255, 255, 0.02) 50%); width: 200px; /*box-shadow*/ -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1) } .inset_input:focus { border: 1px solid #999 !important; /*box-shadow*/ -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important } .blue_button { border: solid 1px #328cca; height: 40px; font-size: 20px; /*border-radius*/ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; color: #fff; background-image: -moz-linear-gradient(top, #3798db, #2c7cd2); background-image: -o-linear-gradient(top, #3798db, #2c7cd2); background-image: -ms-linear-gradient(top, #3798db, #2c7cd2); background-image: -webkit-linear-gradient(top, #3798db, #2c7cd2); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3798db), color-stop(1, #2c7cd2)); filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr=#3798db, EndColorStr=#2c7cd2)"; background-image: linear-gradient(top, #3798db, #2c7cd2); width: 215px; background-color: #2b96f1; /*box-shadow*/ -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); cursor: pointer } .blue_button:hover { background-image: -moz-linear-gradient(top, #3fadf9, #3493f9); background-image: -o-linear-gradient(top, #3fadf9, #3493f9); background-image: -webkit-linear-gradient(top, #3fadf9, #3493f9); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3fadf9), color-stop(1, #3493f9)); filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr=#3fadf9, EndColorStr=#3493f9)"; background-image: linear-gradient(top, #3fadf9, #3493f9) } .white_button { border: 1px solid #bbb; height: 40px; font-size: 20px; /*border-radius*/ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; color: #000; background-image: -moz-linear-gradient(top, #fff, #f1f1f1); background-image: -o-linear-gradient(top, #fff, #f1f1f1); background-image: -webkit-linear-gradient(top, #fff, #f1f1f1); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #f1f1f1)); filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr=#fff, EndColorStr=#f1f1f1)"; background-image: linear-gradient(top, #fff, #f1f1f1); width: 215px; /*box-shadow*/ -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); cursor: pointer }