arrow_back
View code

<a href="#0" class="btn-fx-1 text-sm">
  <div class="wrapper">
    <span>Read more</span>
    <div class="arrow">
      <svg class="icon margin-left-sm" viewBox="0 0 20 20">
        <polyline points="8 5 13 10 8 15" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
      </svg>
      <svg class="icon margin-left-sm" viewBox="0 0 20 20">
        <polyline points="8 5 13 10 8 15" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
      </svg>
    </div>
  </div>
</a>
                        
Copy HTML

/*
 * File: _button-effects-animated.scss
 * Location /src/scss/components
 * Button effects animated component
 */

.btn-fx-1 {
    position: relative;
    display: inline-block;
    border-radius: 5px;
    background-color: alphaColor(var(--primary-color), 0.2);
    text-decoration: none;

    .wrapper {
        padding: 20px 30px;
        position: relative;
        display: inline-flex;
        align-items: center;
        overflow: hidden;
        justify-content: center;
        clip-path: inset(0% 0% 0% 0% round 5px);
        span {
            z-index: 2;
            color: var(--primary-color);
        }
        &:after {
            content: '';
            position: absolute;
            z-index: 1;
            top: 50%;
            left: -5%;
            width: 110%;
            height: 100%;
            background-color: var(--primary-color);
            transform-origin: center bottom;
            transform: skewY(10deg) scaleY(0);
            transition: transform 0.3s;
        }

        .arrow {
            position: relative;
            z-index: 2;
            .icon {
                display: block;
                transition: 0.3s;
                &:first-child {
                    color: var(--primary-color);
                }
                &:last-child {
                    color: var(--color-white);
                    left: 0;
                    top: 0;
                    position: absolute;
                    transform: translateY(100%);
                    opacity: 0;
                }
            }
            
        }
    }

    &:hover {
        color: var(--color-white);
        .wrapper {
            span {
                color: var(--color-white);
            }
            &:after {
                transform: skewY(0deg) scaleY(2);
            }
            .arrow {
                .icon {
                    &:first-child {
                        transform: translateY(-100%);
                        opacity: 0;
                    }

                    &:last-child {
                        transform: translateY(0);
                        opacity: 1;
                    }
                }
            }
        }
    }
}

.btn-fx-2 {
    position: relative;
    display: inline-block;
    border-radius: 5px;
    background-color: var(--color-lowest);
    text-decoration: none;
    .wrapper {
        clip-path: inset(0% 0% 0% 0% round 5px);
        position: relative;
        &:after {
            content: '';
            position: absolute;
            z-index: 1;
            opacity: 0;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: alphaColor(var(--primary-color), 0.2);
            transition: opacity 0.3s;
        }
        .txt {
            position: relative;
        }
        span {
            padding: 20px 30px;
            display: block;
            transition: 0.3s;
            z-index: 2;
            &:first-child {
                color: var(--color-higher);
            }
            &:last-child {
                color: var(--primary-color);
                left: 0;
                top: 0;
                position: absolute;
                transform: translateY(100%);
                opacity: 1;
            }
        }
            
    }

    &:hover {
        background-color: transparent;
        .wrapper {
            &:after {
                opacity: 1;
            }
            
            span {
                &:first-child {
                    transform: translateY(-100%);
                    // opacity: 0;
                }

                &:last-child {
                    transform: translateY(0);
                    // opacity: 1;
                }
            }
        }
    }
}

.btn-fx-3 {
    position: relative;
    display: inline-block;
    border-radius: 5px;
    background-color: var(--color-lowest);
    text-decoration: none;
    padding: 20px 30px;
    clip-path: inset(0% 0% 0% 0% round 5px);
    
    &:after {
        content: '';
        position: absolute;
        z-index: 1;
        opacity: 0;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: alphaColor(var(--primary-color), 0.2);
        transition: opacity 0.3s;
    }
    .wrapper {
        position: relative;
        clip-path: inset(0% 0% 0% 0% round 5px);
        color: var(--color-higher);
        .txt {
            position: relative;
            > div {
                position: relative;
                
                * {
                    transition: transform 0.3s;
                }
                &:last-child {
                    position: absolute;
                    top: 0;
                    left: 0;
                    * {
                        transform: translateY(100%);
                    }
                }
            }
            span {
                display: inline-block;
                transition: 0.3s;
                z-index: 2;
            }
        }
        
            
    }

    &:hover {
        background-color: transparent;
        &:after {
            opacity: 1;
        }
        .wrapper {
            .txt {
                div {
                    *:nth-child(2) {
                        transition-delay: .05s;
                    }
                
                    *:nth-child(3) {
                        transition-delay: .1s;
                    }
                
                    *:nth-child(4) {
                        transition-delay: .15s;
                    }
                    &:first-child {
                        * {
                            transform: translateY(-100%);
                        }
                    }
                    &:last-child {
                        * {
                            color: var(--primary-color);
                            transform: translateY(0);
                        }
                    }
                    
                }
            }
        }
    }
}
                        
Copy SCSS
Upgrade to professional version

Using professional version, you will have unlimited number of projects and unlimited access to materials in Kodhus.com.