15 กันยายน 2557

การสร้าง ปุ่ม submit ในรูปแบบสวยงาม ด้วย style css

input[type="submit"] {
   border: 1px solid #0596AF;
   color: #fff;
    display:inline-block;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
   height: 40px;
   margin-bottom: 30px;
   padding: 0px 25px;
   -moz-appearance: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer;
    background: #06B8D7;
    background: -webkit-linear-gradient(#06B8D7, #05aac6);
    background: -moz-linear-gradient(#06B8D7, #05aac6);
    background: -ms-linear-gradient(#06B8D7, #05aac6);
    background: -o-linear-gradient(#06B8D7, #05aac6);
    background: -webkit-gradient(#06B8D7, #05aac6);
    background: linear-gradient(#06B8D7, #05aac6);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);   
}

input[type="submit"]:hover {
    background: -webkit-linear-gradient(#06C0E1, #05aac6);
    background: -moz-linear-gradient(#06C0E1, #05aac6);
    background: -ms-linear-gradient(#06C0E1, #05aac6);
    background: -o-linear-gradient(#06C0E1, #05aac6);
    background: -webkit-gradient(#06C0E1, #05aac6);
    background: linear-gradient(#06C0E1, #05aac6);
}

input[type="submit"]:active {
    -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);   
}

10 กันยายน 2557