9B534B8686E580E0E01768F00155B461

at path：ROOT / wp-content / themes / kadu / assets / scss / components / _button.scss

run：R W Run

_about.scss

11.46 KB

2024-06-07 08:38:52

R W Run

_animation.scss

3.86 KB

2024-06-02 09:44:42

R W Run

_back-to-top.scss

1.11 KB

2024-04-25 09:34:42

R W Run

_blog-page.scss

26.83 KB

2024-06-11 06:51:22

R W Run

_blog.scss

11.77 KB

2024-06-06 04:16:02

R W Run

_breadcrumb.scss

2.53 KB

2024-06-12 03:56:04

R W Run

_button.scss

10.66 KB

2024-06-06 11:59:28

R W Run

_choose-us.scss

7.76 KB

2024-06-06 11:53:36

R W Run

_client.scss

4.37 KB

2024-05-28 11:54:48

R W Run

_contact-us.scss

3.81 KB

2024-06-11 08:55:10

R W Run

_counter.scss

3.1 KB

2024-05-30 05:51:10

R W Run

_course-details.scss

29.48 KB

2024-06-09 06:18:52

R W Run

_course.scss

34.5 KB

2024-06-04 06:49:00

R W Run

_cta.scss

6.27 KB

2024-06-06 05:12:08

R W Run

_error.scss

2.65 KB

2024-06-11 10:20:46

R W Run

_event-details.scss

9.96 KB

2024-06-10 05:05:32

R W Run

_event.scss

7.68 KB

2024-06-09 11:06:54

R W Run

_faq.scss

1.27 KB

2024-05-26 10:40:32

R W Run

_footer.scss

18.39 KB

2024-06-06 08:53:18

R W Run

_full-page-nav.scss

4.43 KB

2024-06-11 12:42:00

R W Run

_gallery.scss

3.55 KB

2024-06-10 06:49:40

R W Run

_header.scss

17.28 KB

2024-06-11 11:02:34

R W Run

_hero.scss

18.73 KB

2024-06-11 10:40:22

R W Run

_instructor-details.scss

5.15 KB

2024-06-09 09:15:04

R W Run

_popular-category.scss

12.24 KB

2024-06-06 09:59:08

R W Run

_preloader.scss

621 By

2024-05-28 04:48:48

R W Run

_price.scss

9.83 KB

2024-05-30 05:52:22

R W Run

_privacy-page.scss

1.33 KB

2024-06-11 09:15:36

R W Run

_search.scss

3.03 KB

2024-06-11 10:42:44

R W Run

_services.scss

10.43 KB

2024-06-03 04:06:10

R W Run

_team.scss

9.23 KB

2024-06-09 06:56:08

R W Run

_testimonial.scss

12.14 KB

2024-06-06 10:34:22

R W Run

_title.scss

2.9 KB

2024-06-02 12:32:10

R W Run

_video-course.scss

4.96 KB

2024-05-30 10:54:24

R W Run

error_log

📄_button.scss

/* 
    button-component-start
*/

/* 
    mobile-menu-btn-1-start
*/
.ftc-mobile-menu-btn-1 {
    border: none;
    outline: none;
    background: transparent;
    flex: 0 0 auto;
    width: 22px;
    height: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: 500ms var(--cube-2);
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 0;
    
    span {
        display: block;
        background: #fff;
        width: 100%;
        height: 2px;
        transition: 500ms var(--cube-2);  
    }
    &:focus {
        span {
            transform: rotate(45deg);
        }
    }
    &:hover {
        span {
            transform: rotate(45deg);
        }
    }
}
/* 
    mobile-menu-btn-1-end 
*/

/* 
    pr-btn-1-start
*/
.kd-pr-btn-1 {
    display: inline-block;
    font-family: var(--kd-font-pr-1);
    color: #22281e;
    font-weight: 800;
    font-size: 15px;
    line-height: 1;
    background: var(--kd-clr-sd-1);
    border-radius: 30px;
    padding: 20px 31px;
    position: relative;
    z-index: 1;
    transition: .3s var(--cube-1);

.icon {
        display: inline-block;
        margin-left: 5px;
        transition: .3s var(--cube-1);
    }

.text {
        display: inline-block;
        position: relative;
        z-index: 1;
        overflow: hidden;
        margin-bottom: -3px;

&::after {
            top: 0;
            left: 0;
            opacity: 0;
            width: 100%;
            display: block;
            transition: 0.5s;
            position: absolute;
            background: transparent;
            color: #fff;
            content: attr(data-back);
            transform: translateX(-100%);
        }
    
        &::before {
            top: 0;
            left: 0;
            opacity: 1;
            display: block;
            transition: 0.5s;
            position: relative;
            background: var(--blta-pr-1);
            color: #000;
            content: attr(data-front);
            transform: translateX(0);
        }
    }

&:hover {
        color: #fff;
        background: var(--kd-clr-pr-1);
        .text {
            &::after {
                opacity: 1;
                transform: translateX(0);
            }
            &::before {
                opacity: 0;
                transform: translateX(100%);
            }
        }

}

&:is(.has-black) {
        background: #363539;

.text {
            &::after {
                color: #000;
            }
        
            &::before {
                color: #fff;
            }
        }

.icon {
            color: #fff;
        }

&:hover {
            background: var(--kd-clr-sd-1);
            .icon {
                color: #000;
            }
        }
    }

&:is(.has-black-2) {
        background: #000;

.text {
            &::after {
                color: #000;
            }
        
            &::before {
                color: #fff;
            }
        }

.icon {
            color: #fff;
        }

&:hover {
            background: var(--kd-clr-sd-1);
            .icon {
                color: #000;
            }
        }
    }

&:is(.has-pr-clr) {
        background: var(--kd-clr-pr-1);

.text {
            &::after {
                color: #000;
            }
        
            &::before {
                color: #fff;
            }
        }

.icon {
            color: #fff;
        }

&:hover {
            background: var(--kd-clr-sd-1);
            .icon {
                color: #000;
            }
        }
    }

}
/* 
    pr-btn-1-end
*/

/* 
    pr-btn-2-start
*/
.kd-pr-btn-2 {
    display: inline-block;
    font-family: var(--kd-font-fraunces);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    background: var(--kd-clr-pr-4);
    border-radius: 5px;
    padding: 20px 24px;
    padding-right: 12px;
    position: relative;
    z-index: 1;
    transition: 0.3s var(--cube-1);
    overflow: hidden;

&::after {
        content: "";
        width: 32px;
        height: 100%;
        background: rgb(21 32 40 / 20%);
        position: absolute;
        right: 0;
        top: 0;
        z-index: -1;
        transition: 0.3s ease-in-out;
    }

.icon {
        display: inline-block;
        margin-left: 27px;
        transition: .3s var(--cube-1);
    }

.text {
        display: inline-block;
        position: relative;
        z-index: 1;
        overflow: hidden;
        margin-bottom: -3px;

&::after {
            top: 0;
            left: 0;
            opacity: 0;
            width: 100%;
            display: block;
            transition: 0.5s;
            position: absolute;
            background: transparent;
            color: #fff;
            content: attr(data-back);
            transform: translateX(-100%);
        }
    
        &::before {
            top: 0;
            left: 0;
            opacity: 1;
            display: block;
            transition: 0.5s;
            position: relative;
            background: var(--blta-pr-1);
            color: #fff;
            content: attr(data-front);
            transform: translateX(0);
        }
    }

&:hover {
        color: #fff;
        background: var(--kd-clr-sd-4);
        padding-right: 24px;

.icon {
            margin-left: 7px;
        }

&:hover {
            &::after {
                width: 100%;
            }
        }

.text {
            &::after {
                opacity: 1;
                transform: translateX(0);
            }
            &::before {
                opacity: 0;
                transform: translateX(100%);
            }
        }

}

&:is(.has-black) {
        background: #363539;

.text {
            &::after {
                color: #000;
            }
        
            &::before {
                color: #fff;
            }
        }

.icon {
            color: #fff;
        }

&:hover {
            background: var(--kd-clr-sd-1);
            .icon {
                color: #000;
            }
        }
    }

&:is(.has-black-2) {
        background: #000;

.text {
            &::after {
                color: #000;
            }
        
            &::before {
                color: #fff;
            }
        }

.icon {
            color: #fff;
        }

&:hover {
            background: var(--kd-clr-sd-1);
            .icon {
                color: #000;
            }
        }
    }

&:is(.has-pr-clr) {
        background: var(--kd-clr-pr-1);

.text {
            &::after {
                color: #000;
            }
        
            &::before {
                color: #fff;
            }
        }

.icon {
            color: #fff;
        }

&:hover {
            background: var(--kd-clr-sd-1);
            .icon {
                color: #000;
            }
        }
    }

&:is(.not-icon) {
        padding: 20px 24px;
        padding-right: 24px;
        &::after {
            display: none;
        }
    }
}
/* 
    pr-btn-2-end
*/

/* 
    cart-btn-1-start
*/
.kd-cart-btn-1 {
    display: flex;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: var(--kd-clr-pr-1);
    border-radius: 50%;
    font-size: 17px;
    color: #fff;
    transition: .3s var(--cube-1);

&:hover {
        color: #fff;
        background: var(--kd-clr-sd-1);
        animation: 1s kd-jello;
    }

}
/* 
    cart-btn-1-end
*/

/* 
    search-btn-1-start
*/
.kd-search-btn-1 {
    display: flex;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: var(--kd-clr-pr-1);
    border-radius: 50%;
    font-size: 17px;
    color: #fff;
    transition: .3s var(--cube-1);

&:hover {
        background: var(--kd-clr-sd-1);
        animation: 1s kd-jello;
    }
}
/* 
    search-btn-1-end
*/

/* 
    ply-btn-1-start
*/
 .kd-plybtn-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #4C40F6;
    color: #fff;
    font-size: 20px;
    position: relative;
    z-index: 1;
    transition: 400ms var(--cube-1);

&::after {
        content: "";
        width: 100%;
        height: 100%;
        top: 50%;
        left: 50%;
        position: absolute;
        transform: translate(-50% , -50%);
        border-radius: 50%;
        background: #4C40F6;
        opacity: .5;
        z-index: -1;
        animation: kd-plybtn-1 4s linear infinite;
    }

&::before {
        content: "";
        width: 100%;
        height: 100%;
        top: 50%;
        left: 50%;
        position: absolute;
        transform: translate(-50% , -50%);
        border-radius: 50%;
        background: #4C40F6;
        opacity: .5;
        z-index: -1;
        animation: kd-plybtn-1 2s linear infinite;
    }

&:hover {
        color: var(--kd-clr-sd-1);
    }

}

@keyframes kd-plybtn-1 {
    0% {
        transform: translate(-50% , -50%) scale(1);
        opacity: .5;

}
    100% {
        transform: translate(-50% , -50%) scale(2);
        opacity: 0;

}
}

/* 
    ply-btn-1-end
*/

/* 
    land-btn-1-start
*/
.kd-land-1-btn {
    border-radius: 0;
    border: none;
    font-family: var(--kd-font-pr-1);
    color: #050505;
    text-transform: capitalize;
    font-weight: 700;
    font-size: 16px;
    padding-left: 0;
    line-height: 1;
    height: auto;
    padding-right: 15px;

&::after {
        right: 5px;
    }

.current {
        display: flex;
        align-items: center;
        gap: 5px;

}

.flag {
        display: inline-flex;
        align-content: center;
        justify-content: center;
        width: 27px;
        height: 27px;
        border-radius: 50%;
        background: #fff;
        flex: 0 0 auto;

img {
            width: 100%;
            height: 100%;
        }
    }

.list {
        li {
            display: flex;
            align-items: center;
            gap: 5px;
        }
    }
}

/* 
    land-btn-1-end
*/

/* 
    button-component-end
*/