Viewing File: /home/maglabs/etascom/wp-content/themes/agenzio/assets/scss/elements/buttons.scss
button, .button {
color: #fff;
@extend .ft-theme-default;
padding: 0 30px;
line-height: 60px;
border-radius: 0;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
position: relative;
cursor: pointer;
border: none;
height: auto;
display: inline-flex;
align-items: center;
text-align: center;
background-color: $link_color;
justify-content: center;
overflow: hidden;
z-index: 1;
font-family: Outfit;
font-size: 14px;
font-style: normal;
font-weight: 500;
text-decoration: unset;
text-transform: unset;
.pxl-icon {
width: 20px;
height: 2px;
background-color: #fff;
margin-left: 9px;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
transform-origin: left;
transform: scaleX(1);
}
&:hover, &:focus, &:active {
outline: medium none;
text-decoration: none;
color: #fff;
background-color: $primary_color;
padding: 0 44px 0 45px;
.pxl-icon {
transform: scaleX(0);
width: 0;
margin-left: 0;
}
}
}
.btn-submit {
font-size: 16px;
font-weight: 600;
color: #fff;
padding: 0 28px;
line-height: 54px;
@include transition(all 300ms linear 0ms);
position: relative;
display: inline-block;
cursor: pointer;
border-radius: 60px;
@include background-gradient-button(to right, $gradient_color_from 0%, $gradient_color_to 51%, $gradient_color_from 100%);
background-size: 200%, auto;
color: #fff;
border: none;
height: auto;
text-align: center;
justify-content: center;
text-transform: uppercase;
position: relative;
z-index: 1;
overflow: hidden;
@extend .ft-theme-default;
&:before {
content: '';
z-index: -1;
top: 2px;
right: 2px;
bottom: 2px;
left: 2px;
border-radius: 54px;
background-color: #000;
position: absolute;
}
&:after {
content: '';
position: absolute;
top: 0;
left: -200%;
width: 200%;
height: 100%;
@include transform(skewX(-20deg));
background-image: -webkit-gradient(linear,left top,right top,from(transparent),color-stop(rgba(255,255,255,0.35)),to(transparent));
background-image: linear-gradient(to right,transparent,rgba(255,255,255,0.35),transparent);
z-index: -1;
}
&:hover {
outline: medium none;
text-decoration: none;
color: #fff;
background-position: right center;
&:after {
-webkit-animation: pxl_btn_shine 1.2s ease;
animation: pxl_btn_shine 1.2s ease;
-webkit-animation-delay: .1s;
animation-delay: .1s;
}
}
}
.search-submit {
&:hover, &:focus, &:active {
i {
color: $primary_color;
&:before {
transform: unset;
}
}
}
i {
width: unset;
height: unset;
line-height: 40px;
margin-left: 0;
background-color: unset;
&:before {
position: unset;
transform: unset;
}
&:after {
display: none;
}
}
}
@-webkit-keyframes pxl_btn_shine{
100%{
left:200%
}
}
@keyframes pxl_btn_shine{
100%{
left:200%
}
}
input[type="submit"] {
font-size: 18px;
font-weight: 600;
color: #fff;
padding: 0 28px;
line-height: 54px;
@include transition(all 300ms linear 0ms);
position: relative;
display: inline-block;
cursor: pointer;
border-radius: 7px;
background-color: $primary_color;
color: #fff;
height: auto;
text-align: center;
justify-content: center;
@extend .ft-theme-default;
border: none;
&:hover {
outline: medium none;
text-decoration: none;
color: #fff;
}
}
.btn:not(.btn-stroke) {
line-height: 48px;
border: 1px solid $link_color;
background-color: #fff;
font-family: Outfit;
font-size: 14px;
font-style: normal;
font-weight: 500;
text-transform: capitalize;
color: $link_color;
padding: 0 29px;
@extend .ft-theme-default;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
position: relative;
cursor: pointer;
height: auto;
display: inline-flex;
align-items: center;
text-align: center;
justify-content: center;
overflow: hidden;
z-index: 1;
text-decoration: unset;
text-transform: unset;
&:hover {
outline: medium none;
text-decoration: none;
padding: 0 44px;
&:before {
margin-right: 0;
transform: scaleX(0);
width: 0;
}
}
&:before {
content: '';
width: 20px;
height: 2px;
transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
transform-origin: left;
transform: scaleX(1);
background-color: $primary_color;
margin-left: 0;
margin-right: 10px;
}
&.pxl-icon--right {
flex-direction: row-reverse;
i {
margin-left: 20px;
}
}
// Text Hover
&.btn-text-nina {
.pxl--btn-text {
position: relative;
&:before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
transition: transform 0.2s, opacity 0.2s;
transition-timing-function: ease, ease;
-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
white-space: nowrap;
}
> span {
white-space: nowrap;
display: inline-block;
padding: 0;
opacity: 0;
-webkit-transform: translate3d(0, -14px, 0);
transform: translate3d(0, -14px, 0);
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
transition: transform 0.2s, opacity 0.2s;
transition-timing-function: ease, ease;
-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
line-height: normal;
}
}
&:hover {
@include transform(translateY(0px));
.pxl--btn-text {
&:before {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
span {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
}
&:not(:hover) .pxl--btn-text > span {
transition-delay: 0s !important;
}
&.btn-outline-gradient {
&:hover {
.pxl--btn-text {
&:before {
-webkit-transform: translate3d(0, 30px, 0);
transform: translate3d(0, 30px, 0);
}
}
}
}
}
&.btn-text-parallax {
.pxl--btn-text {
@include transition(all 120ms linear 0ms);
}
&:not(.hovered) .pxl--btn-text {
transform: translate3d(0px, 0px, 0px) !important;
}
}
&.btn-text-nanuk {
.pxl--btn-text {
span {
display: inline-block;
}
}
&:hover, &:active, &:not([disabled]):not(.disabled).active, &:not([disabled]):not(.disabled):active {
background-color: $primary_color;
}
&:hover .pxl--btn-text {
span:nth-child(2n+1), span:nth-child(2n) {
-webkit-animation-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
transition-animation-function: cubic-bezier(0.75, 0, 0.125, 1);
}
span:nth-child(2n+1) {
-webkit-animation: pxl_nanuk_1 0.5s forwards;
animation: pxl_nanuk_1 0.5s forwards;
}
span:nth-child(2n) {
-webkit-animation: pxl_nanuk_2 0.5s forwards;
animation: pxl_nanuk_2 0.5s forwards;
}
}
}
&.btn-text-smoke {
--move: 12px;
--move-y: -8px;
--blur: 4px;
.pxl-text--front {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
line-height: normal;
+ .pxl-text--back {
opacity: 0;
}
}
.pxl-text--inner {
display: inline-flex;
line-height: 1;
span {
display: block;
}
}
&:hover {
.pxl-text--inner span {
--duration: 600ms;
-webkit-animation: pxl_smoke var(--duration) linear var(--d);
animation: pxl_smoke var(--duration) linear var(--d);
}
}
}
&.btn-text-reverse {
.pxl-text--front {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
line-height: normal;
.pxl-text--inner span {
@include transform(translateY(-100%));
}
}
.pxl-text--inner {
display: inline-flex;
line-height: 1;
overflow: hidden;
span {
display: block;
transition: transform .44s ease;
}
}
&:hover {
@include transform(translateY(-4px));
.pxl-text--front {
.pxl-text--inner span {
@include transform(translateY(0%));
}
}
.pxl-text--back {
.pxl-text--inner span {
@include transform(translateY(100%));
}
}
}
}
// Style
&.btn-outline {
color: #1a1920;
background-color: transparent;
border: 2px solid #ededed;
@include border-radius(6px);
line-height: 46px;
font-size: 14px;
font-weight: 700;
font-family: 'Inter', sans-serif;
padding: 0 20px 0 20px;
i {
width: 29px;
height: 29px;
line-height: 29px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
position: relative;
@include border-radius(4px);
background-color: $primary_color;
font-size: 20px;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
&:before {
transform: rotate(-45deg) scale(1);
transition: transform 0.3s ease-in-out;
transform-origin: right center;
position: absolute;
bottom: 7px;
right: 8px;
}
&:after {
content: "\f11e";
font-family: Flaticon;
font-size: inherit;
font-style: normal;
font-weight: normal;
position: absolute;
transform: rotate(-45deg) scale(0);
transition: transform 0.3s ease-in-out;
top: 7px;
transform-origin: left center;
left: 7px;
}
}
&:hover {
i {
&:before {
transform: rotate(-45deg) scale(0);
}
&:after {
transform: rotate(-45deg) scale(1);
}
}
}
}
&.btn-outline-gradient {
background-color: #000000;
border-radius: 50px;
line-height: 50px;
color: #f8f8f8;
overflow: visible;
padding: 0 30px;
&:before {
@extend .bg-gradient;
content: '';
border-radius: inherit;
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
z-index: -2;
}
&:after {
content: '';
position: absolute;
top: 1px;
right: 1px;
bottom: 1px;
left: 1px;
background-color: inherit;
z-index: -1;
border-radius: inherit;
}
&.btn-border-3x {
&:after {
top: 3px;
right: 3px;
bottom: 3px;
left: 3px;
}
}
&.btn-border-4x {
&:after {
top: 4px;
right: 4px;
bottom: 4px;
left: 4px;
}
}
&.btn-border-5x {
&:after {
top: 5px;
right: 5px;
bottom: 5px;
left: 5px;
}
}
}
&.btn-round {
padding: 0;
width: 108px;
height: 108px;
border-radius: 108px;
color: #000000;
font-size: 18px;
font-family: inherit;
line-height: normal;
align-items: center;
overflow: hidden;
white-space: nowrap;
.pxl--btn-text {
text-decoration: underline;
transform: rotate(-8deg);
@include transition(all 300ms linear 0ms);
}
&:hover {
color: #fff;
.pxl--btn-text {
transform: rotate(0deg);
}
}
}
&.btn-white-effect {
line-height: 52px;
font-size: 18px;
color: #1e1e1e;
padding: 0 10px;
min-width: 142px;
background: #fff;
overflow: visible;
&:before, &:after {
content: '';
background-color: #1e1e1e;
border: 1px solid #fff;
position: absolute;
width: 100%;
top: 50%;
left: 0;
@include transform(translate(0, -50%));
}
&:before {
border-radius: 46px;
min-height: 93px;
z-index: -1;
}
&:after {
border-radius: 71px;
min-height: 142px;
z-index: -2;
}
.pxl--btn-text {
border-radius: inherit;
&:before {
content: '';
border-radius: inherit;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-color: #fff;
}
}
}
&.btn-slider1 {
line-height: 76px;
padding-left: 55px;
padding-right: 43px;
font-size: 18px;
font-weight: 700;
color: #020307;
@include background-horizontal($gradient_color_from, $gradient_color_to);
overflow: visible;
@media #{$max-lg} {
line-height: 70px;
}
@media screen and (max-width: 479px) {
line-height: 60px;
padding-left: 38px;
padding-right: 38px;
font-size: 16px;
}
&:before {
content: '';
position: absolute;
top: 10px;
left: 10px;
border: 2px solid $gradient_color_from;
border-radius: inherit;
width: 100%;
height: 100%;
z-index: -1;
@include transition(all 200ms linear 0ms);
}
.flaticon-right-up {
font-size: 20px;
}
&:hover {
&:before {
top: 0;
left: 0;
transform: scale(1.2);
opacity: 0;
}
}
}
&.btn-slider2 {
text-transform: uppercase;
font-size: 20px;
font-weight: 600;
line-height: 72px;
padding: 0 48px;
font-family: inherit;
}
&.btn-slider3 {
text-transform: uppercase;
font-size: 20px;
font-weight: 600;
line-height: 72px;
padding: 0 42px;
font-family: inherit;
color: #fff;
border: 2px solid #fff;
background: rgba(#fff, 0.1);
}
&.btn-style5 {
font-family: Outfit;
font-size: 16px;
font-style: normal;
font-weight: 500;
text-transform: uppercase;
position: relative;
line-height: 40px;
border-radius: 0;
padding: 0;
background-color: unset;
position: relative;
color: $primary_color;
border: none;
span {
position: relative;
z-index: 1;
}
&:before {
display: none;
}
svg {
margin-left: 16px;
width: 22px;
height: 16px !important;
transform: rotate(0);
@include transition(all 0.3s);
path {
fill: $primary_color;
}
}
&:hover {
svg {
transform: rotate(-45deg);
}
}
}
&.btn-style6 {
line-height: 60px;
border: none;
background-color: $link_color;
font-family: Outfit;
font-size: 14px;
font-style: normal;
font-weight: 500;
text-transform: capitalize;
color: #fff;
padding: 0 30px;
@extend .ft-theme-default;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
position: relative;
cursor: pointer;
height: auto;
display: inline-flex;
align-items: center;
text-align: center;
justify-content: center;
overflow: hidden;
z-index: 1;
text-decoration: unset;
text-transform: unset;
&:hover {
outline: medium none;
text-decoration: none;
padding: 0 40px;
&:after {
margin-right: 0;
transform: scaleX(0);
width: 0;
}
}
&:after {
content: '';
width: 20px;
height: 2px;
transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
transform-origin: right;
transform: scaleX(1);
background-color: #fff;
margin-left: 10px;
margin-right: 0px;
}
&:before {
display: none;
}
&.pxl-icon--right {
flex-direction: row-reverse;
i {
margin-left: 20px;
}
}
}
}
@keyframes pxl_smoke {
45%,
55% {
filter: blur(var(--blur));
}
50%,
50.1% {
opacity: 0;
}
25%,
75% {
transform: translateX(0);
}
50% {
transform: translateX(var(--move)) translateY(var(--move-y));
}
50.1% {
transform: translateX(calc(var(--move) * -1));
}
}
@keyframes pxl_nanuk_1 {
0%,
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
49% {
opacity: 1;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
50% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
color: inherit;
}
51% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
color: inherit;
}
100% {
color: inherit;
}
}
@keyframes pxl_nanuk_2 {
0%,
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
49% {
opacity: 1;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
50% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
color: inherit;
}
51% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
color: inherit;
}
100% {
color: inherit;
}
}
.btn-stroke {
display: inline-flex;
padding: 0 12px;
font-size: 18px;
font-weight: 700;
color: #000;
line-height: 54px;
position: relative;
.pxl-svg-line {
position: absolute;
top: 50%;
left: 0;
right: 0;
@include transform(translate(0, -50%));
width: 100%;
margin-top: -2px;
height: auto;
fill: none;
stroke-dashoffset: 0;
stroke-dasharray: 3000;
path {
stroke: #000;
stroke-linecap:round;
stroke-miterlimit:10;
stroke-width:18px;
}
}
&:hover, &:focus {
color: #000;
}
&:hover .pxl-svg-line path {
animation: pxl_btn_stroke .6s ease-in-out;
-webkit-animation: pxl_btn_stroke .6s ease-in-out;
}
}
@keyframes pxl_btn_stroke {
0%{
stroke-dashoffset: 3000;
}
to{
stroke-dashoffset: 0px;
}
}
body.rtl {
}
Back to Directory
File Manager