134 lines
4.0 KiB
CSS
134 lines
4.0 KiB
CSS
/* --------------- buttons styles --------------- */
|
|
.butn,
|
|
.btn {
|
|
padding: 12px 30px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
display: -webkit-inline-box;
|
|
display: -ms-inline-flexbox;
|
|
display: inline-flex;
|
|
text-align: center;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center; }
|
|
.butn span,
|
|
.btn span {
|
|
font-size: 14px;
|
|
position: relative;
|
|
z-index: 2;
|
|
text-transform: capitalize; }
|
|
.butn small,
|
|
.btn small {
|
|
font-size: 12px;
|
|
position: relative;
|
|
z-index: 2;
|
|
text-transform: capitalize; }
|
|
.butn.butn-gard::before,
|
|
.btn.butn-gard::before {
|
|
position: absolute;
|
|
content: "";
|
|
left: 0;
|
|
top: 0;
|
|
width: 150%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
background: -webkit-gradient(linear, left top, right top, color-stop(10%, #0c3df4), color-stop(45%, #02b5ff), color-stop(#02b5ff), to(#0c3df4));
|
|
background: -webkit-linear-gradient(left, #0c3df4 10%, #02b5ff 45%, #02b5ff, #0c3df4);
|
|
background: -o-linear-gradient(left, #0c3df4 10%, #02b5ff 45%, #02b5ff, #0c3df4);
|
|
background: linear-gradient(to right, #0c3df4 10%, #02b5ff 45%, #02b5ff, #0c3df4);
|
|
-webkit-transition: all 0.3s ease;
|
|
-o-transition: all 0.3s ease;
|
|
transition: all 0.3s ease; }
|
|
.butn.butn-gard:hover::before,
|
|
.btn.butn-gard:hover::before {
|
|
left: -50%; }
|
|
.butn.dark-butn,
|
|
.btn.dark-butn {
|
|
background: #000; }
|
|
.butn.dark-butn span,
|
|
.butn.dark-butn small,
|
|
.btn.dark-butn span,
|
|
.btn.dark-butn small {
|
|
color: #fff; }
|
|
.butn.butn-blue6,
|
|
.btn.butn-blue6 {
|
|
background: var(--color-blue6); }
|
|
.butn.butn-blue6 span,
|
|
.butn.butn-blue6 small,
|
|
.btn.butn-blue6 span,
|
|
.btn.butn-blue6 small {
|
|
color: #fff; }
|
|
.butn.blue5-3Dbutn,
|
|
.btn.blue5-3Dbutn {
|
|
background: var(--color-blue5);
|
|
-webkit-box-shadow: 0px 4px 0px 0px var(--color-blue4);
|
|
box-shadow: 0px 4px 0px 0px var(--color-blue4);
|
|
-webkit-filter: drop-shadow(0 13px 20px #07397235);
|
|
filter: drop-shadow(0 13px 20px #07397235);
|
|
font-size: 12px; }
|
|
.butn.blue5-3Dbutn span,
|
|
.butn.blue5-3Dbutn small,
|
|
.btn.blue5-3Dbutn span,
|
|
.btn.blue5-3Dbutn small {
|
|
color: #fff; }
|
|
.butn.sm-butn,
|
|
.btn.sm-butn {
|
|
padding: 10px 25px; }
|
|
.butn.sm-butn span,
|
|
.btn.sm-butn span {
|
|
font-size: 12px; }
|
|
.butn:hover,
|
|
.btn:hover {
|
|
background: var(--color-main);
|
|
border-color: transparent !important; }
|
|
.butn:hover span,
|
|
.btn:hover span {
|
|
color: #fff; }
|
|
.butn.hover-darkBlue:hover,
|
|
.btn.hover-darkBlue:hover {
|
|
background: var(--color-darkBlue);
|
|
border-color: transparent !important; }
|
|
.butn.hover-darkBlue:hover span,
|
|
.butn.hover-darkBlue:hover small,
|
|
.btn.hover-darkBlue:hover span,
|
|
.btn.hover-darkBlue:hover small {
|
|
color: #fff; }
|
|
.butn.hover-blue2:hover,
|
|
.btn.hover-blue2:hover {
|
|
background: var(--color-blue2);
|
|
border-color: transparent !important; }
|
|
.butn.hover-blue2:hover span,
|
|
.butn.hover-blue2:hover small,
|
|
.btn.hover-blue2:hover span,
|
|
.btn.hover-blue2:hover small {
|
|
color: #fff; }
|
|
.butn.hover-blue4:hover,
|
|
.btn.hover-blue4:hover {
|
|
background: var(--color-blue4);
|
|
border-color: transparent !important; }
|
|
.butn.hover-blue4:hover span,
|
|
.butn.hover-blue4:hover small,
|
|
.btn.hover-blue4:hover span,
|
|
.btn.hover-blue4:hover small {
|
|
color: #fff; }
|
|
.butn.hover-blue5:hover,
|
|
.btn.hover-blue5:hover {
|
|
background: var(--color-blue5);
|
|
border-color: transparent !important; }
|
|
.butn.hover-blue5:hover span,
|
|
.butn.hover-blue5:hover small,
|
|
.btn.hover-blue5:hover span,
|
|
.btn.hover-blue5:hover small {
|
|
color: #fff; }
|
|
.butn.hover-lightBlue:hover,
|
|
.btn.hover-lightBlue:hover {
|
|
background: var(--color-lightBlue);
|
|
border-color: transparent !important; }
|
|
.butn.hover-lightBlue:hover span,
|
|
.butn.hover-lightBlue:hover small,
|
|
.btn.hover-lightBlue:hover span,
|
|
.btn.hover-lightBlue:hover small {
|
|
color: var(--color-darkBlue); }
|