Strange Button Hover Effects - CSS3 Hover Effects - Pure CSS Tutorial

Hôm nay mình sẽ giới thiệu cho các bạn một hiệu ứng Strange Button Hover đơn giản bằng CSS3 vô cùng ấn tượng.
<a href="" id="btn-effect">
    <span data-text="Button">Button</span>
</a>

#btn-effect {
    text-transform: uppercase;
    display: block;
    color: #262626;
    border:2px solid #262626;
    letter-spacing: 4px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    border-radius: 25px;
    font-size: 25px;
    position: relative;
    overflow-y: hidden;
    span {
        position: relative;
        display: inline-block;
        padding: 6px 25px;
        color: #262626;
    }
    &:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 0%;
        bottom: 0;
        left: 0;
        background-color: #00bcd4;
        -webkit-transition: .5s;
        -o-transition: .5s;
        transition: .5s;
    }
    &:hover {
        &:before {
            height: 100%;
        }
        span {
            -webkit-transition: -webkit-transform 0.5s;
            transition: -webkit-transform 0.5s;
            -o-transition: transform 0.5s;
            transition: transform 0.5s;
            transition: transform 0.5s, -webkit-transform 0.5s;
            -webkit-transform: translateY(-100%);
                -ms-transform: translateY(-100%);
                    transform: translateY(-100%);
            &:after {
                content: attr(data-text);
                position: absolute;
                color: #fff;
                width: 100%;
                height: 100%;
                top: 100%;
                left: 0;
                -webkit-box-sizing: border-box;
                        box-sizing: border-box;
                padding: 6px 25px;
            }
        }
    }
}

0 thảo luận về Strange Button Hover Effects - CSS3 Hover Effects - Pure CSS Tutorial

comment_blank
Hãy để lại #comment của bạn mình sẽ giải đáp thắc mắc một cách sớm nhất có thể.

Bài viết cùng chuyên mục