SVG Button Stroke Animation | SVG Button Border Animation With HTML CSS

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

#btn-effect {
    /*default style*/
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /*default style*/
    text-transform: uppercase;
    position: relative;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    color: #fff;
    overflow: hidden;
    border-radius: 0;
    display: block;
    text-align: center;
    width: 180px;
    height: 60px;
    line-height: 60px;
    padding: 0;
    font-size: 20px;
    letter-spacing: 2px;
    svg,svg rect {
        width: 100%;
        height: 100%;
        fill:transparent;
        top:0;
        left: 0;
        position: absolute;
        z-index: 1;
    }
    svg {
        rect {
            stroke: #fff;
            stroke-width: 4;
            -webkit-transition: 1s;
            -o-transition: 1s;
            transition: 1s;
            stroke-dasharray: 500, 500;
            stroke-dashoffset:0;
        }
    }
    span {
        position: relative;
        z-index: 2;
    }
    &:hover {
        svg rect {
            stroke-dasharray:100, 400;
            stroke-dashoffset:225;
            stroke: #00bcd4;
        }
    }
}

0 thảo luận về SVG Button Stroke Animation | SVG Button Border Animation With HTML CSS

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