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;
        }
    }
}

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

agrilmida - 02/04/2021

[url=https://fcialisj.com/]cialis without prescription[/url]

agrilmida - 19/12/2020

Levitra Sovradosaggio Busiaimall [url=https://bansocialism.com/]generic 5mg cialis best price[/url] suemGesy Cialis Requiere Receta Medica

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