File "button.scss"
Full Path: /home/adniftyx/public_html/wp-content/plugins/credio-addons/widgets/button/button.scss
File size: 9.68 KB
MIME-type: text/plain
Charset: utf-8
@import '../../common';
.rs-latest-button {
pointer-events: auto;
cursor: pointer;
background: #e7e7e7;
border: none;
padding: 1.5rem 3rem;
margin: 0;
font-family: inherit;
font-size: inherit;
position: relative;
display: inline-block;
svg{
height: 20px;
position: relative;
top: -1px;
}
&:before,&:after {
position: absolute;
top: -1px;
left: 0;
width: 100%;
height: 100%;
}
}
.rs-latest-button--calypso {
overflow: hidden;
font-size: 1.15rem;
border-radius: 0.85rem;
color: #fff;
span {
display: block;
position: relative;
z-index: 10;
color: #0a0a0a;
svg {
path {
fill: #0a0a0a;
}
}
}
&:hover {
span {
animation: MoveScaleUpInitial 0.3s forwards, MoveScaleUpEnd 0.3s forwards 0.3s;
color: #fff;
svg path{
fill: #fff;
}
}
&:before {
transform: translate3d(0,0,0) scale3d(1,1,1);
transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
}
&:after {
transform: translate3d(0,0,0);
transition-duration: 0.05s;
transition-delay: 0.4s;
transition-timing-function: linear;
}
}
&:before {
content: '';
background: #000;
width: 120%;
height: 0;
padding-bottom: 120%;
top: -110%;
left: -10%;
border-radius: 50%;
transform: translate3d(0,68%,0) scale3d(0,0,0);
}
&:after {
content: '';
background: #000;
transform: translate3d(0,-100%,0);
transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
}
}
.rs-button{
&.style1 {
line-height: 0;
.rs-btn{
background: $primaryColor;
color: white;
padding: 19px 29px;
border-radius: 3px;
overflow: hidden;
font-weight: 500;
line-height: 1.34;
position: relative;
display: inline-block;
transition: $transition;
span{
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
em {
display: inline-block;
overflow: hidden;
position: relative;
width: 18px;
height: 18px;
line-height: 20px;
flex-shrink: 0;
> * {
height: inherit;
width: inherit;
line-height: inherit;
font-size: 18px;
position: absolute;
top: 0;
left: 0;
transition: $transition;
&:nth-child(2) {
transform: translateX(-150%);
}
}
svg {
path {
fill: white;
transition: $transition;
}
}
i {
color: white;
}
}
&:hover{
background: $titleColor;
color: white;
em {
> * {
transform: translateX(150%);
&:nth-child(2) {
transform: translateX(0);
}
}
svg {
path {
fill: white;
}
}
i {
color: white;
}
}
}
}
}
&.style2 {
.rs-btn {
display: inline-flex;
align-items: center;
white-space: nowrap;
transition: $transition;
span {
background: $primaryColor;
}
.rs-icon{
height: 60px;
width: 60px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: $transition;
opacity: 0;
&.two{
transform: translate3d(-60px, 0px, 0px);
transform-style: preserve-3d;
opacity: 1;
}
svg {
width: 16px;
height: 16px;
path{
fill: #fff;
transition: $transition;
}
}
i {
color: #fff;
font-size: 16px;
transition: $transition;
}
}
.rs-btn-text{
color: #fff;
border-radius: 28px;
padding: 16px 36px;
display: inline-block;
transition: $transition;
z-index: 9;
}
&.icon-sty-yes {
.rs-btn-text{
transform: translate3d(-60px, 0px, 0px);
transform-style: preserve-3d;
}
&:hover {
.rs-btn-text{
transform: translate3d(0px, 0px, 0px) !important;
transform-style: preserve-3d;
}
}
}
&:hover {
.rs-icon {
opacity: 1;
&.two{
opacity: 0;
}
}
}
}
}
&.style3 {
.rs-btn {
display: inline-flex;
align-items: center;
white-space: nowrap;
transition: $transition;
border: 1px solid $titleColor;
padding: 5px;
border-radius: 50px;
.rs-icon{
background: $primaryColor;
height: 60px;
width: 60px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: $transition, left 0.5s;
position: relative;
left: 0;
svg {
width: 16px;
height: 16px;
path{
fill: $titleColor;
transition: $transition;
}
}
i {
color: $titleColor;
font-size: 16px;
transition: $transition;
}
}
.rs-btn-text{
color: $titleColor;
display: inline-block;
text-transform: uppercase;
transition: $transition;
padding: 0 20px;
z-index: 9;
}
&.icon-sty-yes {
.rs-btn-text{
transform: translate3d(0px, 0px, 0px);
transform-style: preserve-3d;
}
&:hover {
.rs-btn-text{
transform: translate3d(-60px, 0px, 0px) !important;
transform-style: preserve-3d;
}
}
}
&:hover {
.rs-icon {
left: calc(100% - 60px);
}
}
}
}
&.style4 {
line-height: 0;
.rs-btn{
background: transparent;
color: #fff;
padding: 18px 32px;
border-radius: 12px;
overflow: hidden;
position: relative;
display: inline-block;
transition: $transition;
span{
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
em {
display: inline-block;
overflow: hidden;
position: relative;
width: 18px;
height: 18px;
line-height: 20px;
flex-shrink: 0;
> * {
height: inherit;
width: inherit;
line-height: inherit;
font-size: 18px;
position: absolute;
top: 0;
left: 0;
transition: $transition;
&:nth-child(2) {
transform: translateX(-150%);
}
}
svg {
path {
fill: #fff;
transition: $transition;
}
}
i {
color: #fff;
}
}
&::after {
position: absolute;
content: '';
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
width: calc(100% - 2px);
aspect-ratio: 1/0.9;
background: $primaryColor;
pointer-events: none;
transition: $transition;
}
&:hover{
background: transparent;
color: #fff;
em {
> * {
transform: translateX(150%);
&:nth-child(2) {
transform: translateX(0);
}
}
svg {
path {
fill: #fff;
}
}
i {
color: #fff;
}
}
&::after {
background: $secondaryColor;
}
}
}
}
&.style5 {
line-height: 0;
.rs-btn{
background: transparent;
color: white;
padding: 19px 29px;
border-radius: 3px;
overflow: hidden;
font-weight: 500;
line-height: 1.34;
position: relative;
display: inline-block;
transition: $transition;
span{
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
color: inherit;
}
em {
display: inline-block;
overflow: hidden;
position: relative;
width: 18px;
height: 18px;
line-height: 20px;
flex-shrink: 0;
> * {
height: inherit;
width: inherit;
line-height: inherit;
font-size: 18px;
position: absolute;
top: 0;
left: 0;
transition: $transition;
&:nth-child(2) {
transform: translateX(-150%);
}
}
svg {
path {
fill: white;
transition: $transition;
}
}
i {
color: white;
}
}
&:before,
&:after {
position: absolute;
content: '';
left: 0;
top: 0;
right: 0;
bottom: 0;
transition: $transition;
}
&:after {
background: linear-gradient(182deg, $primaryColor 0%, $secondaryColor 84%);
}
&:before {
background: linear-gradient(182deg, $secondaryColor 0%, $primaryColor 84%);
opacity: 0;
}
&:hover{
background: transparent;
color: white;
&:after {
opacity: 0;
}
&:before {
opacity: 1;
}
em {
> * {
transform: translateX(150%);
&:nth-child(2) {
transform: translateX(0);
}
}
svg {
path {
fill: white;
}
}
i {
color: white;
}
}
}
}
}
}
// Applyed in btn js
@keyframes btnStyleHoverEffect {
0% {
transform: scale(1);
}
33.333% {
transform: scale(0.5);
}
100% {
transform: scale(1);
}
}
@keyframes btnStyleHoverEffectReverse {
0% {
transform: scale(1);
}
33.333% {
transform: scale(0.5);
}
100% {
transform: scale(1);
}
}
@keyframes MoveScaleUpInitial {
to {
transform: translate3d(0,-105%,0) scale3d(1,2,1);
opacity: 0;
}
}
@keyframes MoveScaleUpEnd {
from {
transform: translate3d(0,100%,0) scale3d(1,2,1);
opacity: 0;
}
to {
transform: translate3d(0,0,0);
opacity: 1;
}
}
@keyframes rspulse512 {
0% {
// box-shadow: 0 0 0 0 #05bada66;
box-shadow: 0 0 0 0 #ad6239;
}
70% {
box-shadow: 0 0 0 10px rgb(218 103 68 / 0%);
}
100% {
box-shadow: 0 0 0 0 rgb(218 103 68 / 0%);
}
}
@keyframes MoveUpInitial {
to {
transform: translate3d(0,-105%,0);
}
}
@keyframes MoveUpEnd {
from {
transform: translate3d(0,100%,0);
}
to {
transform: translate3d(0,0,0);
}
}