Pure CSS Next Prev Arrow Hover Effects - Animated Transformicons Tutorial

Hôm nay mình sẽ giới thiệu cho các bạn một hiệu ứng Next Prev Arrow Hover đơn giản bằng CSS3 vô cùng ấn tượng.

Danh mục

Effects Navigations Templates UX Patterns Plugin

Tags

#button

DEMO

HTML

<div id="btn-container">
    <a href="" class="btn-effect prev"><span></span></a>
    <a href="" class="btn-effect next"><span></span></a>
</div>

SCSS

#btn-container {
     -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    .btn-effect {
        width: 40px;
        height: 40px;
        background: #262626;
        border-radius:50%;
        margin: 0 5px;
        -webkit-transition: .5s;
        -o-transition: .5s;
        transition: .5s;
        position: relative;
        display: block;
        span {
            position: absolute;
            top:50%;
            width: 10px;
            height: 10px;
            left: 50%;
            border:2px solid #fff;
            -webkit-transform: translate(-50%,-50%) rotate(-45deg);
                -ms-transform: translate(-50%,-50%) rotate(-45deg);
                    transform: translate(-50%,-50%) rotate(-45deg);
            -webkit-transition: .5s;
            -o-transition: .5s;
            transition: .5s;
            &amp;:before {
                content: "";
                position: absolute;
                width: 20px;
                height: 2px;
                background: #fff;
                -webkit-transition: .5s;
                -o-transition: .5s;
                transition: .5s;
            }
        }
        &amp;.prev {
            span {
                border-right: none;
                border-bottom: none;
                &amp;:before {
                    -webkit-transform: rotate(45deg) translate(-2px, -0.7px) scale(0);
                        -ms-transform: rotate(45deg) translate(-2px, -0.7px) scale(0);
                            transform: rotate(45deg) translate(-2px, -0.7px) scale(0);
                    -webkit-transform-origin: left;
                        -ms-transform-origin: left;
                            transform-origin: left;
                }
            }
        }
        &amp;.next {
            span {
                border-left: none;
                border-top: none;
                &amp;:before {
                    -webkit-transform: rotate(45deg) translate(-2px, 13.5px) scale(0);
                        -ms-transform: rotate(45deg) translate(-2px, 13.5px) scale(0);
                            transform: rotate(45deg) translate(-2px, 13.5px) scale(0);
                    -webkit-transform-origin: right;
                        -ms-transform-origin: right;
                            transform-origin: right;
                }
            }
        }
        &amp;:hover {
            background: #0070ff;
            &amp;.prev {
                span {
                    left: calc(50% - 5px);
                    &amp;:before {
                        -webkit-transform: rotate(45deg) translate(-2px, -0.7px) scale(1);
                            -ms-transform: rotate(45deg) translate(-2px, -0.7px) scale(1);
                                transform: rotate(45deg) translate(-2px, -0.7px) scale(1);               
                    }
                }
            }
            &amp;.next {
                span {
                    left: calc(50% + 5px);
                    &amp;:before {
                        -webkit-transform: rotate(45deg) translate(-2px, 13.5px) scale(1);
                            -ms-transform: rotate(45deg) translate(-2px, 13.5px) scale(1);
                                transform: rotate(45deg) translate(-2px, 13.5px) scale(1);               
                    }
                }
            }
        }
    }
}