iobroker.vis-hqwidgets/widgets/hqwidgets/css/hqwidgetsButtons.css

hqwidgets Widgets for ioBroker.vis

/* -------------- Button base --------------------- */
.hq-button-base-normal {
    background-image: -ms-linear-gradient(top, #ADADAD 0%, #333333 100%);
    background-image: -moz-linear-gradient(top, #ADADAD 0%, #333333 100%);
    background-image: -o-linear-gradient(top, #ADADAD 0%, #333333 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ADADAD), color-stop(1, #333333));
    background-image: -webkit-linear-gradient(top, #ADADAD 0%, #333333 100%);
    background-image: linear-gradient(to bottom, #ADADAD 0%, #333333 100%);
    border: 1px solid rgba(0,0,0,0.9) ;
    box-shadow: inset 0 1px 0 0 rgba(128,128,128,0.5),
    0 0 1px 1px rgba(128,128,128,0.8),
    0 0 0 6px rgba(0,0,0,0.06),
    0 0 0 3px rgba(0,0,0,0.1);
}
.hq-button-base-normal:hover {
    background-image: -ms-linear-gradient(top, #E0E0E0 0%, #8F8F8F 100%);
    background-image: -moz-linear-gradient(top, #E0E0E0 0%, #8F8F8F 100%);
    background-image: -o-linear-gradient(top, #E0E0E0 0%, #8F8F8F 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #E0E0E0), color-stop(1, #8F8F8F));
    background-image: -webkit-linear-gradient(top, #E0E0E0 0%, #8F8F8F 100%);
    background-image: linear-gradient(to bottom, #E0E0E0 0%, #8F8F8F 100%);
    border: 1px solid rgba(0,0,0,0.4) ;
    box-shadow: inset 0 1px 0 0 rgba(128,128,128,0.5),
    0 0 1px 1px rgba(128,128,128,0.8),
    0 0 0 6px rgba(0,0,0,0.06),
    0 0 0 3px rgba(0,0,0,0.1);
}
.hq-button-base-on {
    background: rgb(255,214,94);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZDY1ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZWJmMDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  rgba(255,214,94,1) 0%, rgba(254,191,4,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,214,94,1)), color-stop(100%,rgba(254,191,4,1)));
    background: -webkit-linear-gradient(top,  rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%);
    background: -o-linear-gradient(top,  rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%);
    background: -ms-linear-gradient(top,  rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%);
    background: linear-gradient(top,  rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 );
    border: 1px solid rgba(0,0,0,0.4) ;
    box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.5),
    0 0 1px 1px rgba(255,255,255,0.8),
    0 0 0 6px rgba(0,0,0,0.06),
    0 0 0 3px rgba(0,0,0,0.1);
}
.hq-button-base-on:hover {
    background-image: -ms-linear-gradient(top, #FDCB28 0%, #E08600 100%);
    background-image: -moz-linear-gradient(top, #FDCB28 0%, #E08600 100%);
    background-image: -o-linear-gradient(top, #FDCB28 0%, #E08600 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDCB28), color-stop(1, #E08600));
    background-image: -webkit-linear-gradient(top, #FDCB28 0%, #E08600 100%);
    background-image: linear-gradient(to bottom, #FDCB28 0%, #E08600 100%);
    border: 1px solid rgba(0,0,0,0.4) ;
    box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.5),
    0 0 1px 1px rgba(255,255,255,0.8),
    0 0 0 6px rgba(0,0,0,0.06),
    0 0 0 3px rgba(0,0,0,0.1);
}

/* ---------------------- Button outdoor temperature */
.hq-button-base-outtemp {
    background: #e0f3fa; /* Old browsers */
    background: -moz-linear-gradient(top,  #e0f3fa 0%, #b6dffd 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0f3fa), color-stop(100%,#b6dffd)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #e0f3fa 0%,#b6dffd 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #e0f3fa 0%,#b6dffd 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #e0f3fa 0%,#b6dffd 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #e0f3fa 0%,#b6dffd 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0f3fa', endColorstr='#b6dffd',GradientType=0 ); /* IE6-9 */
    border: 1px solid rgba(182,223,253,0.9) ;
    box-shadow: inset 0 1px 0 0 rgba(182,223,253,0.5),
    0 0 1px 1px rgba(182,223,253,0.8),
    0 0 0 6px rgba(182,223,253,0.06),
    0 0 0 3px rgba(182,223,253,0.1);
}
.hq-button-base-outtemp:hover {
    background: #bbe9f9; /* Old browsers */
    background: -moz-linear-gradient(top,  #bbe9f9 0%, #94d1fc 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbe9f9), color-stop(100%,#94d1fc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #bbe9f9 0%,#94d1fc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #bbe9f9 0%,#94d1fc 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #bbe9f9 0%,#94d1fc 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #bbe9f9 0%,#94d1fc 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbe9f9', endColorstr='#94d1fc',GradientType=0 ); /* IE6-9 */
    border: 1px solid rgba(182,223,253,0.9) ;
    box-shadow: inset 0 1px 0 0 rgba(182,223,253,0.5),
    0 0 1px 1px rgba(182,223,253,0.8),
    0 0 0 6px rgba(182,223,253,0.06),
    0 0 0 3px rgba(182,223,253,0.1);
}

/* ---------------------- Button indoor temperature */
.hq-button-base-intemp {
    background: #f6e6b4; /* Old browsers */
    background: -moz-linear-gradient(top,  #f6e6b4 0%, #eaac60 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6e6b4), color-stop(100%,#eaac60)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f6e6b4 0%,#eaac60 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f6e6b4 0%,#eaac60 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f6e6b4 0%,#eaac60 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #f6e6b4 0%,#eaac60 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#eaac60',GradientType=0 ); /* IE6-9 */
    border: 1px solid rgba(232,158,69,0.9) ;
    box-shadow: inset 0 1px 0 0 rgba(232,158,69,0.5),
    0 0 1px 1px rgba(232,158,69,0.8),
    0 0 0 6px rgba(232,158,69,0.06),
    0 0 0 3px rgba(232,158,69,0.1);
}
.hq-button-base-intemp:hover {
    background: #f4d169; /* Old browsers */
    background: -moz-linear-gradient(top,  #f4d169 0%, #e89e45 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4d169), color-stop(100%,#e89e45)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f4d169 0%,#e89e45 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f4d169 0%,#e89e45 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f4d169 0%,#e89e45 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #f4d169 0%,#e89e45 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4d169', endColorstr='#e89e45',GradientType=0 ); /* IE6-9 */
    border: 1px solid rgba(232,158,69,0.9) ;
    box-shadow: inset 0 1px 0 0 rgba(232,158,69,0.5),
    0 0 1px 1px rgba(232,158,69,0.8),
    0 0 0 6px rgba(232,158,69,0.06),
    0 0 0 3px rgba(232,158,69,0.1);
}

/* -------------- Button red --------------------- */
.hq-button-red-normal {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));
    background:-moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    background:-webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    background:-o-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    background:-ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf',GradientType=0);
    background-color:#ededed;
}

.hq-button-red-active {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100));
    background:-moz-linear-gradient(top, #fe1a00 5%, #ce0100 100%);
    background:-webkit-linear-gradient(top, #fe1a00 5%, #ce0100 100%);
    background:-o-linear-gradient(top, #fe1a00 5%, #ce0100 100%);
    background:-ms-linear-gradient(top, #fe1a00 5%, #ce0100 100%);
    background:linear-gradient(to bottom, #fe1a00 5%, #ce0100 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100',GradientType=0);

    background-color:#fe1a00;
}
.hq-button-red-normal, .hq-button-red-active  {
    -moz-box-shadow:inset 0px 1px 0px 0px #333333;
    -webkit-box-shadow:inset 0px 1px 0px 0px #333333;
    box-shadow:inset 0px 1px 0px 0px #333333;

    border:1px solid #dcdcdc;

    display:inline-block;
    color:#777777;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    text-decoration:none;

    text-shadow:0px 1px 0px #ffffff;
}

.hq-button-red-normal:hover  {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed));
    background:-moz-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
    background:-webkit-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
    background:-o-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
    background:-ms-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
    background:linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed',GradientType=0);

    background-color:#dfdfdf;
}
.hq-button-red-active:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00));
    background:-moz-linear-gradient(top, #ce0100 5%, #fe1a00 100%);
    background:-webkit-linear-gradient(top, #ce0100 5%, #fe1a00 100%);
    background:-o-linear-gradient(top, #ce0100 5%, #fe1a00 100%);
    background:-ms-linear-gradient(top, #ce0100 5%, #fe1a00 100%);
    background:linear-gradient(to bottom, #ce0100 5%, #fe1a00 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00',GradientType=0);

    background-color:#ce0100;
}
/* -------------- Button no background --------------------- */

.hq-button-no-background {
    background:none;
}

/* -------------- Button green --------------------- */
.hq-button-green-normal, .hq-button-green-active {
    -moz-box-shadow:inset 3px 2px 7px 0px #d9fbbe;
    -webkit-box-shadow:inset 3px 2px 7px 0px #d9fbbe;
    box-shadow:inset 3px 2px 7px 0px #d9fbbe;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b8e356), color-stop(1, #a5cc52) );
    background:-moz-linear-gradient( center top, #b8e356 5%, #a5cc52 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b8e356', endColorstr='#a5cc52');
    background-color:#b8e356;
    border:1px solid #83c41a;
    display:inline-block;
    color:#ffffff;
}

.hq-button-green-active {
    position:relative;
    top:1px;
}

.hq-button-green-normal:hover,
.hq-button-green-active:hover{
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #a5cc52), color-stop(1, #b8e356) );
    background:-moz-linear-gradient( center top, #a5cc52 5%, #b8e356 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a5cc52', endColorstr='#b8e356');
    background-color:#a5cc52;
}

/* most of them taken here: http://www.sanwebe.com/2014/02/css3-buttons-examples-with-effects-animations*/
/* ---------------------------- Button metall ----------------------------- */
.hq-button-metall-normal {
    /*display: block;*/
    background: #434343;
}
.hq-button-metall-active {
    /*display: block;*/
    background: #434343;
}

.hq-button-metall-normal, .hq-button-metall-active {
    /*display: block;*/
    background-color: #434343;
    background-image: -webkit-linear-gradient(100% 100% 90deg, #515151, #7A7A7A);
    background-image: -moz-linear-gradient(100% 100% 90deg, #515151, #7A7A7A);
    background-image: -o-linear-gradient(100% 100% 90deg, #515151, #7A7A7A);
    background-image: -ms-linear-gradient(100% 100% 90deg, #515151, #7A7A7A);
    background-image: linear-gradient(100% 100% 90deg, #515151, #7A7A7A);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7A7A7A), to(#515151));
    border: none;
    border-top: 3px solid #c2c2c2;
    /*border-radius*/
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
    /*box-shadow*/
    -webkit-box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222;
    -moz-box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222;
    padding: 10px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.2);
    margin-right: 10px;
    text-decoration: none;
    color: #242424;
    background-image: -webkit-radial-gradient(  50%   0%,  8% 50%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
    -webkit-radial-gradient(  50% 100%, 12% 50%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),
    -webkit-radial-gradient(   0%  50%, 50%  7%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
    -webkit-radial-gradient( 100%  50%, 50%  5%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
    -webkit-repeating-radial-gradient(    50% 50%, 100% 100%, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   3%, hsla(0,0%,  0%,.1) 3.5%),
    -webkit-repeating-radial-gradient(    50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%,.1) 7.5%),
    -webkit-repeating-radial-gradient(    50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%),
    -webkit-radial-gradient(    50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);
}

.hq-button-metall-active {
    border-top: 0px solid #dde1e7;
    /*box-shadow*/
    -webkit-box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222,0px 0px 5px #00aeff,0px 0px 50px #00aeff,0px 0px 50px #93d9fa;
    -moz-box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222,0px 0px 5px #00aeff,0px 0px 50px #00aeff,0px 0px 50px #93d9fa;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222,0px 0px 5px #00aeff,0px 0px 50px #00aeff,0px 0px 50px #93d9fa;
    /*transform*/
    -webkit-transform: translateY(4px);
    -moz-transform: translateY(4px);
    -ms-transform: translateY(4px);
    -o-transform: translateY(4px);
    transform: translateY(4px);
}

.hq-button-metall-normal:hover, .hq-button-metall-active:hover {
    color: #00aeff;
    text-shadow: -1px -2px 1px #000;
}

.hq-button-metall-normal:before,
.hq-button-metall-normal:after,
.hq-button-metall-active:before,
.hq-button-metall-active:after {
    content: "";
    top: 0;
    left: 0;
    position: absolute;
    width: inherit;
    height: inherit;
    /*border-radius*/
    -webkit-border-radius: inherit;
    -moz-border-radius: inherit;
    border-radius: inherit;
    /* fake conical gradients */
    background-image: -webkit-radial-gradient(  50%   0%, 10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
    -webkit-radial-gradient(  50% 100%, 10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
    -webkit-radial-gradient(   0%  50%, 50% 10%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
    -webkit-radial-gradient( 100%  50%, 50% 06%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%);
}

.hq-button-metall-normal:before, .hq-button-metall-active:before{
    /*transform*/
    -webkit-transform: rotate( 65deg);
    -moz-transform: rotate( 65deg);
    -ms-transform: rotate( 65deg);
    -o-transform: rotate( 65deg);
    transform: rotate( 65deg);
}
.hq-button-metall-normal:after, .hq-button-metall-active:after {
    /*transform*/
    -webkit-transform: rotate(-65deg);
    -moz-transform: rotate(-65deg);
    -ms-transform: rotate(-65deg);
    -o-transform: rotate(-65deg);
    transform: rotate(-65deg);
}

/* ------------------------------ Glossy buttons -------------------------------------- */
.hq-button-glossy-blue {
    background: #94c4fe;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(31%,#94c4fe), color-stop(100%,#d3f6fe));
    background: -webkit-linear-gradient(top,  #94c4fe 31%,#d3f6fe 100%);
    background: -moz-linear-gradient(top,  #94c4fe 31%, #d3f6fe 100%);
    background: -o-linear-gradient(top,  #94c4fe 31%,#d3f6fe 100%);
    background: -ms-linear-gradient(top,  #94c4fe 31%,#d3f6fe 100%);
    background: linear-gradient(to bottom,  #94c4fe 31%,#d3f6fe 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94c4fe', endColorstr='#d3f6fe',GradientType=0 );
    border: 1px solid #4864a9;
}

.hq-button-glossy-green {
    background: #54bc3e;
    background: -moz-linear-gradient(top,  #54bc3e 0%, #aee850 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#54bc3e), color-stop(100%,#aee850));
    background: -webkit-linear-gradient(top,  #54bc3e 0%,#aee850 100%);
    background: -o-linear-gradient(top,  #54bc3e 0%,#aee850 100%);
    background: -ms-linear-gradient(top,  #54bc3e 0%,#aee850 100%);
    background: linear-gradient(to bottom,  #54bc3e 0%,#aee850 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#54bc3e', endColorstr='#aee850',GradientType=0 );
    border: 1px solid #1d6511;
}

.hq-button-glossy-blue,
.hq-button-glossy-green  {
    width: 100%;
    height: 100%;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;

    color: #000;
    text-shadow: 1px 1px 0px rgba(255,255,255,.5);

    -webkit-box-shadow:  0px 1px 3px 0px rgba(0, 0, 0, .2);
    box-shadow:  0px 1px 3px 0px rgba(0, 0, 0, .2);
}

.hq-button-glossy-blue:hover,
.hq-button-glossy-green:hover {
    -webkit-filter: brightness(.9);
    -moz-filter: brightness(.9);
    -ms-filter: brightness(.9);
    filter: brightness(.9);
}

.hq-button-glossy-blue:before,
.hq-button-glossy-green:before {
    content: "";
    width: calc(100% - 10px);
    height: 50%;

    display: block;
    position: absolute;
    left: 5px;

    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;

    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 8%, rgba(255,255,255,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(8%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%);
    background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
}

/* ---------------- Nice buttons ---------------------------------- */
.hq-button-nice-blue {
    background: #108FE8;
    box-shadow: 0 -2px 0 3px #0d72b8 inset, 0 5px 5px rgba(3, 25, 41, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset;
}
.hq-button-nice-blue:hover {
    background: #333;
    box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset;
}
.hq-button-nice-red {
    background: #E53030;
    box-shadow: 0 -2px 0 3px #c91919 inset, 0 5px 5px rgba(65, 8, 8, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset;
}
.hq-button-nice-red:hover {
    background: #333;
    box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset;
}
.hq-button-nice-green {
    background: #0EC518;
    box-shadow: 0 -2px 0 3px #0b9512 inset, 0 5px 5px rgba(0, 7, 1, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset;
}
.hq-button-nice-green:hover {
    background: #333;
    box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset;
}
.hq-button-nice-yellow {
    background: #FFC334;
    box-shadow: 0 -2px 0 3px #ffb401 inset, 0 5px 5px rgba(103, 73, 0, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset;
}
.hq-button-nice-yellow:hover {
    background: #333;
    box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset;
}
.hq-button-nice-grey {
    background: #555555;
    box-shadow: 0 -2px 0 3px #3b3b3b inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset;
}
.hq-button-nice-grey:hover {
    background: #333;
    box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset;
}
.hq-button-nice-blue, .hq-button-nice-red, .hq-button-nice-green, .hq-button-nice-yellow, .hq-button-nice-grey {
    border: 3px solid #fff;
}

/* ------------------------- Push butons ------------------------------------- */
.hq-button-push-red {
    text-shadow:-1px -1px 0 #A84155;
    background: #D25068;
    border:1px solid #D25068;

    background-image:-webkit-linear-gradient(top, #F66C7B, #D25068);
    background-image:-moz-linear-gradient(top, #F66C7B, #D25068);
    background-image:-ms-linear-gradient(top, #F66C7B, #D25068);
    background-image:-o-linear-gradient(top, #F66C7B, #D25068);
    background-image:linear-gradient(to bottom, #F66C7B, #D25068);

    -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);
    -moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);
    box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);
}

.hq-button-push-green {
    text-shadow:-1px -1px 0 #2C7982;
    background: #3EACBA;
    border:1px solid #379AA4;

    background-image:-webkit-linear-gradient(top, #48C6D4, #3EACBA);
    background-image:-moz-linear-gradient(top, #48C6D4, #3EACBA);
    background-image:-ms-linear-gradient(top, #48C6D4, #3EACBA);
    background-image:-o-linear-gradient(top, #48C6D4, #3EACBA);
    background-image:linear-gradient(top, #48C6D4, #3EACBA);

    -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);
    -moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);
    box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);
}

.hq-button-push-red,
.hq-button-push-green
{
    text-align:center;
    color:#FFF;
    text-decoration:none;
    font-family:'Oswald', Helvetica;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}

.hq-button-push-red:before,
.hq-button-push-green:before
{
    background:#f0f0f0;
    background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D0D0D0), to(#f0f0f0));

    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;

    -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
    -moz-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
    box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;

    position: absolute;
    content: "";
    left: -6px; right: -6px;
    top: -6px; bottom: -10px;
    z-index: -1;
}

.hq-button-push-red:active,
.hq-button-push-green:active
{
    -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset;
    margin-top: 5px;
}
.hq-button-push-red:active:before,
.hq-button-push-green:active:before{
    top: -6px;
    bottom: -11px;
    content: "";
}

.hq-button-push-red:hover {
    background: #F66C7B;
    background-image:-webkit-linear-gradient(top, #D25068, #F66C7B);
    background-image:-moz-linear-gradient(top, #D25068, #F66C7B);
    background-image:-ms-linear-gradient(top, #D25068, #F66C7B);
    background-image:-o-linear-gradient(top, #D25068, #F66C7B);
    background-image:linear-gradient(top, #D25068, #F66C7B);
}

.hq-button-push-green:hover {
    background: #48C6D4;
    background-image:-webkit-linear-gradient(top, #3EACBA, #48C6D4);
    background-image:-moz-linear-gradient(top, #3EACBA, #48C6D4);
    background-image:-ms-linear-gradient(top, #3EACBA, #48C6D4);
    background-image:-o-linear-gradient(top, #3EACBA, #48C6D4);
    background-image:linear-gradient(top, #3EACBA, #48C6D4);
}

.hq-button-base-normal:active,
.hq-button-base-on:active,
.hq-button-base-outtemp:active,
.hq-button-base-intemp:active,
.hq-button-red-normal:active,
.hq-button-red-active:active,
.hq-button-green-normal:active,
.hq-button-green-active:active,
.hq-button-no-background:active
{
    transform: scale(0.95);
}