/*-------------------------------------------------- Button Default Style --------------------------------------------------*/ @import url('https://fonts.googleapis.com/css?family=Montserrat:500'); .awavc-button { border: 1px solid #8A539F; color: #262626; font-family: 'Montserrat', sans-serif; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .adbt_i{ -webkit-transition: all .3s ease-in; -o-transition: all .3s ease-in; transition: all .3s ease-in; } .awavc-button:hover { background: #8A539F; color: #ffffff; } .awavc-button:focus { outline: none; } .awavc-button.awavc-button-1x { font-size: 1.2rem; padding: 3px 20px; } .awavc-button.awavc-button-2x { font-size: 1.4rem; padding: 4px 21px; } .awavc-button.awavc-button-3x { font-size: 1.8rem; padding: 2px 23px; } .awavc-button.awavc-button-4x { font-size: 2.2rem; padding: 3px 28px; } .awavc-button.awavc-button-5x { font-size: 2.6rem; padding: 5px 38px; } .awavc-button.awavc-button-radius { border-radius: 30px; } .awavc-button.primary-bg { background: #8A539F; color: #fff; } .awavc-button.primary-bg:hover { background: #ffffff; color: #8A539F; } /*-------------------------------------------------- Button Border Style --------------------------------------------------*/ .awavc-button.awavc-border-left { position: relative; } .awavc-button.awavc-border-left:before { content: ""; background: #8A539F; position: absolute; top: 0; left: 0; width: 5px; height: 100%; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .awavc-button.awavc-border-left:hover { background: transparent; color: #ffffff; } .awavc-button.awavc-border-left:hover:before { width: 100%; z-index: -1; } .awavc-button.awavc-border-right { position: relative; } .awavc-button.awavc-border-right:before { content: ""; background: #8A539F; position: absolute; top: 0; right: 0; width: 5px; height: 100%; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .awavc-button.awavc-border-right:hover { background: transparent; color: #ffffff; } .awavc-button.awavc-border-right:hover:before { width: 100%; z-index: -1; } .awavc-button.awavc-button-border { border: 3px solid #8A539F; } .awavc-button.awavc-button-border.awavc-button-1x { padding: 2px 20px; } .awavc-button.awavc-button-border.awavc-button-2x { padding: 2px 21px; } .awavc-button.awavc-button-border.awavc-button-3x { padding: 0 23px; } .awavc-button.awavc-button-border.awavc-button-4x { padding: 1px 28px; } .awavc-button.awavc-button-border.awavc-button-5x { padding: 3px 38px; } /*-------------------------------------------------- Button Arrow Style --------------------------------------------------*/ .awavc-button.awavc-button-shade { background: transparent; color: #ffffff; position: relative; border: 0; overflow: hidden; } .awavc-button.awavc-button-shade:before { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: #8A539F; z-index: -2; } .awavc-button.awavc-button-shade:after { content: ""; position: absolute; top: 0; right: -20px; height: 100%; background: #ad86bb; -webkit-transform: skew(20deg, 0); -ms-transform: skew(20deg, 0); transform: skew(20deg, 0); z-index: -1; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .awavc-button.awavc-button-shade.awavc-button-1x { padding: 4px 20px; } .awavc-button.awavc-button-shade.awavc-button-1x:after { width: 57px; } .awavc-button.awavc-button-shade.awavc-button-2x { padding: 5px 21px; } .awavc-button.awavc-button-shade.awavc-button-2x:after { width: 60px; } .awavc-button.awavc-button-shade.awavc-button-3x { padding: 3px 23px; } .awavc-button.awavc-button-shade.awavc-button-3x:after { width: 68px; } .awavc-button.awavc-button-shade.awavc-button-4x { padding: 4px 28px; } .awavc-button.awavc-button-shade.awavc-button-4x:after { width: 78px; } .awavc-button.awavc-button-shade.awavc-button-5x { padding: 6px 38px; } .awavc-button.awavc-button-shade.awavc-button-5x:after { width: 94px; } .awavc-button.awavc-button-shade:hover:after { width: 100%; } .awavc-button.border-line { border: 0; position: relative; } .awavc-button.border-line i.fa { color: #8A539F; } .awavc-button.border-line:before { content: ""; position: absolute; top: 0; left: 0; height: 5px; width: 100%; background: #8A539F; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; z-index: -1; } .awavc-button.border-line:after { content: ""; position: absolute; bottom: 0; left: 0; height: 5px; width: 100%; background: #8A539F; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; z-index: -1; } .awavc-button.border-line:hover { background: transparent; } .awavc-button.border-line:hover i.fa { color: #ffffff; } .awavc-button.border-line:hover:before { height: 100%; } .awavc-button.border-line:hover:after { height: 100%; } .awavc-button.border-line.awavc-button-1x { padding: 4px 20px; } .awavc-button.border-line.awavc-button-2x { padding: 5px 21px; } .awavc-button.border-line.awavc-button-3x { padding: 3px 23px; } .awavc-button.border-line.awavc-button-4x { padding: 4px 28px; } .awavc-button.border-line.awavc-button-5x { padding: 6px 38px; } @media (max-width: 1199px) and (min-width: 992px) { .awavc-button.awavc-button-5x { font-size: 2.6rem; padding: 5px 20px; } .awavc-button.border-line.awavc-button-5x { padding: 6px 20px; } .awavc-button.awavc-button-shade.awavc-button-5x { padding: 6px 20px; } .awavc-button.awavc-button-shade.awavc-button-5x:after { width: 74px; } .awavc-button.awavc-button-shade.awavc-button-5x:hover:after { width: 130%; } }