awesome-bootstrap-buttons.css

/*==========================================================
    Project Name: Bootstrap Awesome Button Library
    Created By: Noor Alam
    Envato Profile: https://codcanyen.net/user/noor-alam
    Facebook Profile: https://web.facebook.com/halimstor
    Author status: Available for freelance hire
    Website: http://awesomebootstrap.net
    Description: Bootstrap Awesome Button Library is an extended Bootstrap button library. 
    Version: v1.0
    Licence: MIT
============================================================*/
/*Bootstrap Awesome Button css
========================== */
/*btn-default-hLeft*/

.btn {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.btn:hover {
    box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.16), 0 3px 15px 0 rgba(0, 0, 0, 0.16);
}
/*btn-default-hLeft*/
.btn.btn-hLeft {
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border-color: #ccc;
    color: #333;
    z-index: 11;
}
.btn.btn-hLeft:after {
    width: 0;
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
.btn.btn-hLeft:before {
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    height: 100%;
    bottom: 0;
    right: 0;
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    width: 0;
}
.btn:hover.btn-hLeft:after {
    width: 100%;
}
/*btn-default-hRight*/

.btn.btn-hRight {
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border-color: #ccc;
    color: #333;
    z-index: 11;
}
.btn.btn-hRight:after {
    width: 0;
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
.btn.btn-hRight:before {
    width: 0;
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    height: 100%;
    bottom: 0;
    right: 0;
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
.btn:hover.btn-hRight:before {
    width: 100%;
}
/*btn-default-hUp*/

.btn.btn-hUp {
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border-color: #ccc;
    color: #333;
    z-index: 11;
}
.btn.btn-hUp:after {
    width: 0;
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
.btn.btn-hUp:before {
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    width: 100%;
    bottom: 0;
    right: 0;
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    height: 0
}
.btn:hover.btn-hUp:before {
    height: 100%;
}
/*btn-default-hDown*/

.btn.btn-hDown {
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border-color: #ccc;
    color: #333;
    z-index: 11;
}
.btn.btn-hDown:before {
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    height: 100%;
    bottom: 0;
    right: 0;
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    width: 0;
}
.btn.btn-hDown:after {
    height: 0;
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
.btn:hover.btn-hDown:after {
    height: 100%;
}
/*btn-default-hCenter*/

.btn.btn-hCenter {
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border-color: #ccc;
    color: #333;
    z-index: 11;
}
.btn.btn-hCenter:before {
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    height: 100%;
    bottom: 0;
    right: 0;
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    width: 0;
}
.btn.btn-hCenter:after {
    -webkit-transform: scale(0);
    transform: scale(0);
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
.btn:hover.btn-hCenter:after {
    -webkit-transform: scale(1);
    transform: scale(1);
}
/*btn-default-hRotLeft*/

.btn.btn-hRotLeft {
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border-color: #ccc;
    color: #333;
    z-index: 11;
}
.btn.btn-hRotLeft:before {
    width: 0;
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    height: 100%;
    bottom: 0;
    right: 0;
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
.btn.btn-hRotLeft:after {
    height: 200%;
    left: -90%;
    top: 10%;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    width: 100%;
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
.btn:hover.btn-hRotLeft:after {
    left: 0;
    top: 0;
    -webkit-transform: rotate(0);
    transform: rotate(0);
}
/*btn-default-hRotRight*/

.btn.btn-hRotRight {
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border-color: #ccc;
    color: #333;
    z-index: 11;
}
.btn.btn-hRotRight:before {
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    height: 100%;
    bottom: 0;
    right: 0;
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    width: 0;
}
.btn.btn-hRotRight:after {
    height: 200%;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    -webkit-transform: skewX(90deg);
    transform: skewX(90deg);
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}
.btn:hover.btn-hRotRight:after {
    -webkit-transform: skewX(0);
    transform: skewX(0);
}
/*btn-default-hskewDown*/

.btn.btn-hskewDown {
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border-color: #ccc;
    color: #333;
    z-index: 11;
}
.btn.btn-hskewDown:before {
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    height: 100%;
    bottom: 0;
    right: 0;
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    width: 0;
}
.btn.btn-hskewDown:after {
    -webkit-transform: skewY(90deg);
    transform: skewY(90deg);
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
.btn:hover.btn-hskewDown:after {
    -webkit-transform: skewY(0);
    transform: skewY(0);
}
/*btn -hDivideX*/

.btn.btn-hDivideX {
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border-color: #ccc;
    color: #333;
    z-index: 11;
}
.btn.btn-hDivideX:after {
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    height: 100%;
    top: 0;
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    left: -50%;
    width: 50%;
}
.btn.btn-hDivideX:before {
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    height: 100%;
    bottom: 0;
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    right: -50%;
    width: 50%;
}
.btn:hover.btn-hDivideX:after {
    left: 0;
}
.btn:hover.btn-hDivideX:before {
    right: 0;
}
/*btn -hDivideOutX*/

.btn.btn-hDivideOutX {
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border-color: #ccc;
    color: #333;
    z-index: 11;
}
.btn.btn-hDivideOutX:after {
    width: 50%;
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
.btn.btn-hDivideOutX:before {
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    height: 100%;
    bottom: 0;
    right: 0;
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    width: 50%;
}
.btn:hover.btn-hDivideOutX:after {
    left: -50%
}
.btn:hover.btn-hDivideOutX:before {
    right: -50%;
}
/*btn -hDivideY*/

.btn.btn-hDivideY {
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border-color: #ccc;
    color: #333;
    z-index: 11;
}
.btn.btn-hDivideY:after {
    height: 50%;
    top: -60%;
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    width: 100%;
    left: 0;
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
.btn.btn-hDivideY:before {
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    width: 100%;
    right: 0;
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    height: 50%;
    Bottom: -60%;
}
.btn:hover.btn-hDivideY:after {
    top: 0;
}
.btn:hover.btn-hDivideY:before {
    bottom: 0;
}
/*btn -hDivideOutY*/

.btn.btn-hDivideOutY {
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border-color: #ccc;
    color: #333;
    z-index: 11;
}
.btn.btn-hDivideOutY:after {
    height: 50%;
    top: 0;
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    width: 100%;
    left: 0;
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
.btn.btn-hDivideOutY:before {
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    width: 100%;
    right: 0;
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    height: 50%;
    Bottom: 0;
}
.btn:hover.btn-hDivideOutY:after {
    top: -60%;
}
.btn:hover.btn-hDivideOutY:before {
    bottom: -60%;
}
/*btn -hRolling*/

.btn.btn-hRolling {
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border-color: #ccc;
    color: #333;
    z-index: 11;
}
.btn.btn-hRolling:before {
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    height: 100%;
    bottom: 0;
    right: 0;
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    width: 0;
}
.btn.btn-hRolling:after {
    -webkit-transform: scale(0) rotate(720deg);
    transform: scale(0) rotate(720deg);
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
.btn:hover.btn-hRolling:after {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
}
/*btn -hBorderTop*/

.btn.btn-hBorderTop {
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border-color: #ccc;
    color: #333;
    z-index: 11;
}
.btn.btn-hBorderTop:before {
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    height: 100%;
    bottom: 0;
    right: 0;
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    width: 0;
}
.btn.btn-hBorderTop {
    border-radius: 0
}
.btn.btn-hBorderTop:after {
    height: 4px;
    width: 0;
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    top: 0;
    left: 0;
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
.btn:hover.btn-hBorderTop:after {
    width: 100%;
}
/*btn -hBorderBottom*/

.btn.btn-hBorderBottom {
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border-color: #ccc;
    color: #333;
    z-index: 11;
}
.btn.btn-hBorderBottom:after {
    width: 0;
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
.btn.btn-hBorderBottom {
    border-radius: 0;
}
.btn.btn-hBorderBottom:before {
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    bottom: 0;
    right: 0;
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    height: 4px;
    width: 0;
}
.btn:hover.btn-hBorderBottom:before {
    width: 100%;
}
/*btn -hBorderTopBottom*/

.btn.btn-hBorderTopBottom {
    border-radius: 0;
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border-color: #ccc;
    color: #333;
    z-index: 11;
}
.btn.btn-hBorderTopBottom:before {
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    bottom: 0;
    right: 0;
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    height: 4px;
    width: 0;
}
.btn.btn-hBorderTopBottom:after {
    height: 4px;
    width: 0;
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    top: 0;
    left: 0;
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
.btn:hover.btn-hBorderTopBottom:after {
    width: 100%;
}
.btn:hover.btn-hBorderTopBottom:before {
    width: 100%;
}
/*btn -hBorderTopLeft*/

.btn.btn-hBorderTopLeft {
    border-radius: 0;
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border-color: #ccc;
    color: #333;
    z-index: 11;
}
.btn.btn-hBorderTopLeft:before {
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    height: 0;
    width: 4px;
    left: 0;
    top: 0;
}
.btn.btn-hBorderTopLeft:after {
    height: 4px;
    width: 0;
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    top: 0;
    left: 0;
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
.btn:hover.btn-hBorderTopLeft:after {
    width: 100%;
}
.btn:hover.btn-hBorderTopLeft:before {
    height: 100%;
}
/*btn -hBorderTopRight*/

.btn.btn-hBorderTopRight {
    border-radius: 0;
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border-color: #ccc;
    color: #333;
    z-index: 11;
}
.btn.btn-hBorderTopRight:before {
    height: 0;
    width: 4px;
    right: 0;
    top: 0;
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
.btn.btn-hBorderTopRight:after {
    height: 4px;
    left: inherit;
    right: 0;
    top: 0;
    width: 0;
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
.btn:hover.btn-hBorderTopRight:before {
    height: 100%;
}
.btn:hover.btn-hBorderTopRight:after {
    width: 100%;
}
/*btn -hBBottomRight*/

.btn.btn-hBBottomRight {
    border-radius: 0;
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border-color: #ccc;
    color: #333;
    z-index: 11;
}
.btn.btn-hBBottomRight:before {
    height: 0;
    width: 4px;
    right: 0;
    bottom: 0;
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
.btn.btn-hBBottomRight:after {
    height: 4px;
    left: inherit;
    top: inherit;
    right: 0;
    bottom: 0;
    width: 0;
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
.btn:hover.btn-hBBottomRight:after {
    width: 100%;
}
.btn:hover.btn-hBBottomRight:before {
    height: 100%;
}
/*btn -hBBottomLeft*/

.btn.btn-hBBottomLeft {
    border-radius: 0;
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border-color: #ccc;
    color: #333;
    z-index: 11;
}
.btn.btn-hBBottomLeft:before {
    height: 0;
    width: 4px;
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    bottom: 0;
    left: 0;
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
.btn.btn-hBBottomLeft:after {
    height: 4px;
    left: 0;
    bottom: 0;
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    width: 0;
    z-index: -1;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
.btn:hover.btn-hBBottomLeft:after {
    width: 100%;
}
.btn:hover.btn-hBBottomLeft:before {
    height: 100%;
}
/*btn -hXeffect1*/

.btn.btn-hXeffect1 {
    border-radius: 0;
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border-color: #ccc;
    color: #333;
    z-index: 11;
}
.btn.btn-hXeffect1:before {
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    bottom: -80px;
    height: 200px;
    right: -20px;
    -webkit-transform: rotate(41deg);
    transform: rotate(41deg);
    width: 0;
    z-index: -1;
}
.btn.btn-hXeffect1:after {
    height: 200px;
    left: -20px;
    top: -80px;
    -webkit-transform: rotate(41deg);
    transform: rotate(41deg);
    width: 0;
    z-index: -1;
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
.btn:hover.btn-hXeffect1:after {
    width: 40%;
}
.btn:hover.btn-hXeffect1:before {
    width: 36%;
}
/*btn -hXeffect2*/

.btn.btn-hXeffect2 {
    border-radius: 0;
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border-color: #ccc;
    color: #333;
    z-index: 11;
}
.btn.btn-hXeffect2:before {
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    bottom: -25px;
    height: 100px;
    right: -8px;
    -webkit-transform: rotate(-38deg);
    transform: rotate(-38deg);
    width: 0;
    z-index: -1;
}
.btn.btn-hXeffect2:after {
    height: 100px;
    left: -8px;
    top: -25px;
    -webkit-transform: rotate(-38deg);
    transform: rotate(-38deg);
    width: 0;
    z-index: -1;
    position: absolute;
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    content: "";
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
.btn:hover.btn-hXeffect2:after {
    width: 40%;
}
.btn:hover.btn-hXeffect2:before {
    width: 40%;
}
/*btn -hskewY*/

.btn.btn-hskewY {
    border-radius: 0;
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border-color: #ccc;
    color: #333;
    z-index: 11;
}
.btn.btn-hskewY:before {
    background: #e6e6e6 none repeat scroll 0 0;
    bottom: 0;
    color: #333;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    -webkit-transform: skewY(20deg);
    transform: skewY(20deg);
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    width: 100%;
    z-index: -1;
}
.btn:hover.btn-hskewY:before {}
/*btn -hTilesIn
.btn.btn-hTilesIn{ 
    background-color: #fff;
    border-color: #ccc;
    color: #333;
    z-index:11;
}
.btn.btn-hTilesIn::after {
  background-color: #e6e6e6;
  border-color: #adadad;
  color: #333;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: all 0.5s ease 0s;
  width: 100%;
  z-index: -1;
}

.btn:hover.btn-hTilesIn:after{
}

*/
/*-----------
Button color set-up
----------------*/
/*Button info*/

.btn.btn-info {
    background-color: #46b8da;
    border-color: #46b8da;
    color: #fff;
}
.btn.btn-info:after {
    background-color: #118baf;
    border-color: #269abc;
    color: #fff;
}
.btn.btn-info:before {
    background-color: #118baf;
    border-color: #269abc;
    color: #fff;
}
/*Button primary*/

.btn.btn-primary {
    background-color: #337ab7;
    border-color: #2e6da4;
    color: #fff;
}
.btn.btn-primary:after {
    background-color: #286090;
    border-color: #204d74;
    color: #fff;
}
.btn.btn-primary:before {
    background-color: #286090;
    border-color: #204d74;
    color: #fff;
}
/*Button Success*/

.btn.btn-success {
    background-color: #5cb85c;
    border-color: #5cb85c;
    color: #fff;
}
.btn.btn-success:after {
    background-color: #2e882e;
    border-color: #398439;
    color: #fff;
}
.btn.btn-success:before {
    background-color: #2e882e;
    border-color: #398439;
    color: #fff;
}
/*Button warning*/

.btn.btn-warning {
    background-color: #f0ad4e;
    border-color: #eea236;
    color: #fff;
}
.btn.btn-warning:after {
    background-color: #d68513;
    border-color: #d58512;
    color: #fff;
}
.btn.btn-warning:before {
    background-color: #d68513;
    border-color: #d58512;
    color: #fff;
}
/*Button danger*/

.btn.btn-danger {
    background-color: #d9534f;
    border-color: #d43f3a;
    color: #fff;
}
.btn.btn-danger:after {
    background-color: #b41f1b;
    border-color: #ac2925;
    color: #fff;
}
.btn.btn-danger:before {
    background-color: #b41f1b;
    border-color: #ac2925;
    color: #fff;
}
/*Button dark*/

.btn.btn-dark {
    background-color: #000;
    border-color: #000;
    color: #fff;
}
.btn:hover.btn-dark:after {
    background-color: #333;
    border-color: #111;
    color: #fff;
}
.btn:hover.btn-dark:before {
    background-color: #333;
    border-color: #111;
    color: #fff;
}
.btn.btn-hDivideOutX.btn-dark,
.btn.btn-hDivideOutY.btn-dark {
    color: #000;
}
.btn.btn-hDivideOutX.btn-dark:hover,
.btn.btn-hDivideOutY.btn-dark:hover {
    color: #fff;
}
/*Button light*/

.btn.btn-light {
    background-color: #fff;
    border-color: #000;
    color: #000;
}
.btn:hover.btn-light:after {
    background-color: #eee;
    border-color: #000;
    color: #000;
}
.btn:hover.btn-light:before {
    background-color: #eee;
    border-color: #000;
    color: #000;
}
/*Button tr*/

.btn.btn-tr {
    background-color: transparent;
    border-color: #000;
    color: #000;
}
.btn:hover.btn-tr:after {
    background-color: #fff;
    border-color: #000;
    color: #000;
}
.btn:hover.btn-tr:before {
    background-color: #fff;
    border-color: #000;
    color: #000;
}
/*Button tr rad*/

.btn.btn-tr-danger {
    background-color: rgba(255, 0, 0, 0.20);
    border-color: #000;
    color: #000;
}
.btn.btn-tr-danger:hover {
    color: #fff;
}
.btn.btn-tr-danger:hover:after {
    background-color: #ff0000;
    border-color: #adadad;
    content: "";
    color: #333;
    position: absolute;
}
.btn.btn-tr-danger:hover:before {
    background-color: #ff0000;
    border-color: #adadad;
    content: "";
    color: #333;
    position: absolute;
}
.btn.btn-hBorderTop.btn-tr-danger:hover,
.btn.btn-hBorderBottom.btn-tr-danger:hover,
.btn.btn-hBorderTopBottom.btn-tr-danger:hover,
.btn.btn-hBorderTopLeft.btn-tr-danger:hover,
.btn.btn-hBorderTopRight.btn-tr-danger:hover,
.btn.btn-hBBottomRight.btn-tr-danger:hover,
.btn.btn-hBBottomLeft.btn-tr-danger:hover {
    color: #000
}
.btn.btn-hXeffect2.btn-tr-danger:hover:before,
.btn.btn-hXeffect2.btn-tr-danger:hover:after,
.btn.btn-hDivideOutY.btn-tr-danger:before,
.btn.btn-hDivideOutX.btn-tr-danger:before,
.btn.btn-hDivideOutY.btn-tr-danger:after,
.btn.btn-hDivideOutX.btn-tr-danger:after {
    background-color: #ff0000;
}
.btn.btn-hDivideOutY.btn-tr-danger,
.btn.btn-hDivideOutX.btn-tr-danger {
    color: #fff;
}
.btn.btn-hDivideOutY.btn-tr-danger:hover,
.btn.btn-hDivideOutX.btn-tr-danger:hover {
    color: #000;
}
.btn.btn-hXeffect1.btn-tr-danger:hover {
    color: #000;
}
/*Button tr info*/

.btn.btn-tr-info {
    background-color: rgba(91, 192, 222, 0.20);
    border-color: #118baf;
    color: #000;
}
.btn.btn-tr-info:hover {
    color: #fff;
}
.btn.btn-tr-info:hover:after {
    background-color: #46b8da;
    border-color: #118baf;
    content: "";
    color: #333;
    position: absolute;
}
.btn.btn-tr-info:hover:before {
    background-color: #46b8da;
    border-color: #118baf;
    content: "";
    color: #333;
    position: absolute;
}
.btn.btn-hBorderTop.btn-tr-info:hover,
.btn.btn-hBorderBottom.btn-tr-info:hover,
.btn.btn-hBorderTopBottom.btn-tr-info:hover,
.btn.btn-hBorderTopLeft.btn-tr-info:hover,
.btn.btn-hBorderTopRight.btn-tr-info:hover,
.btn.btn-hBBottomRight.btn-tr-info:hover,
.btn.btn-hBBottomLeft.btn-tr-info:hover {
    color: #000
}
.btn.btn-hDivideOutY.btn-tr-info:before,
.btn.btn-hDivideOutX.btn-tr-info:before,
.btn.btn-hDivideOutY.btn-tr-info:after,
.btn.btn-hDivideOutX.btn-tr-info:after {
    background-color: #46b8da;
}
.btn.btn-hDivideOutY.btn-tr-info,
.btn.btn-hDivideOutX.btn-tr-info {
    color: #fff;
}
.btn.btn-hDivideOutY.btn-tr-info:hover,
.btn.btn-hDivideOutX.btn-tr-info:hover {
    color: #000;
}
/*Button tr primary*/

.btn.btn-tr-primary {
    background-color: rgba(51, 122, 183, 0.20);
    border-color: #286090;
    color: #000;
}
.btn.btn-tr-primary:hover {
    color: #fff;
}
.btn.btn-tr-primary:hover:after {
    background-color: #337ab7;
    border-color: #286090;
    content: "";
    color: #333;
    position: absolute;
}
.btn.btn-tr-primary:hover:before {
    background-color: #337ab7;
    border-color: #286090;
    content: "";
    color: #333;
    position: absolute;
}
.btn.btn-hDivideOutX.btn-tr-primary:before,
.btn.btn-hDivideOutY.btn-tr-primary:before {
    background: #337ab7;
}
.btn.btn-hDivideOutX.btn-tr-primary,
.btn.btn-hDivideOutY.btn-tr-primary {
    color: #fff;
}
.btn.btn-hDivideOutX.btn-tr-primary:hover,
.btn.btn-hDivideOutY.btn-tr-primary:hover {
    color: #000;
}
.btn.btn-hDivideOutX.btn-tr-primary:after,
.btn.btn-hDivideOutY.btn-tr-primary:after {
    background: #337ab7;
}
/*Button tr success*/

.btn.btn-tr-success {
    background-color: rgba(92, 184, 92, 0.20);
    border-color: #2e882e;
    color: #000;
}
.btn.btn-tr-success:hover {
    color: #fff;
}
.btn.btn-tr-success:hover:after {
    background-color: #5cb85c;
    border-color: #2e882e;
    content: "";
    color: #333;
    position: absolute;
}
.btn.btn-tr-success:hover:before {
    background-color: #5cb85c;
    border-color: #2e882e;
    content: "";
    color: #333;
    position: absolute;
}
.btn.btn-hDivideOutX.btn-tr-success,
.btn.btn-hDivideOutY.btn-tr-success {
    color: #fff
}
.btn.btn-hDivideOutX.btn-tr-success:hover,
.btn.btn-hDivideOutY.btn-tr-success:hover {
    color: #000
}
.btn.btn-hDivideOutX.btn-tr-success:before,
.btn.btn-hDivideOutX.btn-tr-success:after,
.btn.btn-hDivideOutY.btn-tr-success:before,
.btn.btn-hDivideOutY.btn-tr-success:after {
    background: rgba(92, 184, 92, 0.80) none repeat scroll 0 0;
}
/*Button tr black*/

.btn.btn-tr-dark {
    background-color: rgba(0, 0, 0, 0.10);
    border-color: #000;
    color: #000;
}
.btn.btn-tr-dark:hover {
    color: #888;
}
.btn.btn-tr-dark:hover:after {
    background-color: rgba(0, 0, 0, 0.80);
    border-color: #111;
    content: "";
    color: #333;
    position: absolute;
}
.btn.btn-tr-dark:hover:before {
    background-color: rgba(0, 0, 0, 0.80);
    border-color: #111;
    content: "";
    color: #333;
    position: absolute;
}
.btn.btn-tr-dark:hover {
    color: #fff;
}
.btn.btn-hBorderTop.btn-tr-dark:hover,
.btn.btn-hBorderBottom.btn-tr-dark:hover,
.btn.btn-hBorderTopBottom.btn-tr-dark:hover,
.btn.btn-hBorderTopRight.btn-tr-dark:hover,
.btn.btn-hBBottomRight.btn-tr-dark:hover,
.btn.btn-hBBottomLeft.btn-tr-dark:hover,
.btn.btn-hBorderTopLeft.btn-tr-dark:hover {
    color: #000;
}
.btn.btn-hDivideOutY.btn-tr-dark:before,
.btn.btn-hDivideOutX.btn-tr-dark:before {
    background: rgba(0, 0, 0, 0.10);
    color: #fff;
}
.btn.btn-hDivideOutY.btn-tr-dark:after,
.btn.btn-hDivideOutX.btn-tr-dark:after {
    background: rgba(0, 0, 0, 0.10);
    ;
}
.btn.btn-hDivideOutX.btn-tr-dark,
.btn.btn-hDivideOutY.btn-tr-dark {
    color: #fff;
}
.btn.btn-hDivideOutY.btn-tr-dark:hover,
.btn.btn-hDivideOutX.btn-tr-dark:hover {
    color: #000;
}
/*Button tr white*/

.btn.btn-tr-light {
    background-color: rgba(255, 255, 255, 0.20);
    border-color: #fff;
    color: #fff;
}
.btn.btn-tr-light:hover {
    color: #000;
}
.btn.btn-tr-light:hover:after {
    background-color: rgba(255, 255, 255, 0.80);
    border-color: #ccc;
    content: "";
    color: #333;
    position: absolute;
}
.btn.btn-tr-light:hover:before {
    background-color: rgba(255, 255, 255, 0.80);
    border-color: #ccc;
    content: "";
    color: #333;
    position: absolute;
}
.btn.btn-hDivideOutX.btn-tr-light,
.btn.btn-hDivideOutY.btn-tr-light {
    color: #000;
}
.btn.btn-hDivideOutX.btn-tr-light:hover,
.btn.btn-hDivideOutY.btn-tr-light:hover,
.btn.btn-hBorderTop.btn-tr-light:hover,
.btn.btn-hBorderBottom.btn-tr-light:hover,
.btn.btn-hBBottomRight.btn-tr-light:hover,
.btn.btn-hBBottomLeft.btn-tr-light:hover,
.btn.btn-hBorderTopRight.btn-tr-light:hover,
.btn.btn-hBorderTopLeft.btn-tr-light:hover,
.btn.btn-hBorderTopBottom.btn-tr-light:hover {
    color: #fff;
}
.btn.btn-hXeffect1.btn-tr-light:hover,
.btn.btn-hXeffect2.btn-tr-light:hover {
    color: #888;
}