/* Author: Roland Oth, igumbi.com Description: SCSS for the igumbi online booking tool buttons. get the SASS File at https://www.igumbi.net/stylesheets/sellerci.scss for the color gradients. */ /*igumbigreen*/ $glowcolor:#bdd73c; $buttoncolor:#AFD421; input, textarea, select { -webkit-transition: background-color 1s linear; -webkit-transition: box-shadow 1.5s linear; &:focus { background-color:#fff9c5; border:1px solid $glowcolor; box-shadow:0 0 8px $glowcolor; outline: none; } } .bookbutton, .finalbutton { cursor: pointer; display: table-cell; width:60px; height:32px; vertical-align: middle; margin-top:10px; color:#555555; text-align:center; -webkit-border-radius:5px; -moz-border-radius:5px; background-color: $buttoncolor; border:1px solid darken($buttoncolor,5%); background: -moz-linear-gradient( top, lighten($buttoncolor,15%), $buttoncolor, darken($buttoncolor,5%)); background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, lighten($buttoncolor,15%)), color-stop(0.5, $buttoncolor), color-stop(1.0, darken($buttoncolor,5%))); &:hover { border:1px solid darken($buttoncolor, 10%); background: -moz-linear-gradient( top, lighten($buttoncolor,5%), $buttoncolor, darken($buttoncolor,10%)); background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, lighten($buttoncolor,5%)), color-stop(0.5, $buttoncolor), color-stop(1.0, darken($buttoncolor,10%))); } &:active { border:1px solid darken($buttoncolor, 10%); background-color: darken($buttoncolor,5%); background: -moz-linear-gradient( top, darken($buttoncolor,10%), $buttoncolor, lighten($buttoncolor,5%)); background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, darken($buttoncolor,10%)), color-stop(0.5, $buttoncolor), color-stop(1.0, lighten($buttoncolor,5%))); } $grey:#bbb; &.disabled, &[disabled] { border: 1px solid darken($grey,30%); background-color: $grey; background: -moz-linear-gradient(top, lighten($grey,10%), $grey, darken($grey,10%)); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, lighten($grey,10%)), color-stop(0.5, $grey), color-stop(1, darken($grey,10%))); } }