使用SVG实现按钮悬停环绕动画特效

SVG Hover Buttons

svg, hover, button, border

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 21110
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/*       Just setting CSS for the page   */

* {
    margin: 0;
    padding: 0;
}
html,
css {
    width: 100%;
    height: 100%;
}
.position {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 15%;
}
#workarea {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #1e1a3e;
    font-family: Raleway;
}
#personal {
    color: white;
    text-decoration: none;
    position: absolute;
    bottom: 15px;
    right: 2%;
}
/*    start code for the actual button:         */
/*   
    Spot is the span on the inside of the href that
    fills the parent and makes the hover and link work
    for the entire div
*/

.spot {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
/*
    This is the outer svg wrapper that the SVG itself will 
    fill. Multiple svg-wrapper classes can be put side by side.
*/

.svg-wrapper {
    margin-top: 0;
    position: relative;
    width: 150px;
    /*make sure to use same height/width as in the html*/
    
    height: 40px;
    display: inline-block;
    border-radius: 3px;
    margin-left: 5px;
    margin-right: 5px
}
/*
  This is where we define the fill, color, thickness,
  and stroke pattern of the SVG when there is no hover.
  The dasharray and offset together define the line position
  under the words. Here's also where the transition speed is set.
*/

#shape {
    stroke-width: 6px;
    fill: transparent;
    stroke: #009FFD;
    stroke-dasharray: 85 400;
    stroke-dashoffset: -220;
    transition: 1s all ease;
}
/* 
    Pushing the text up into the SVG. Without this the
    text would be below the div's.
*/

#text {
    margin-top: -35px;
    text-align: center;
}
#text a {
    color: white;
    text-decoration: none;
    font-weight: 100;
    font-size: 1.1em;
}
/* 
    Changing the shape on hover. I change the color of the stroke,
make it thinner, then set it to again wrap around the entire parent element.
*/

.svg-wrapper:hover #shape {
    stroke-dasharray: 50 0;
    stroke-width: 3px;
    stroke-dashoffset: 0;
    stroke: #06D6A0;
}

HTML

<div class="svg-wrapper">
            <svg height="40" width="150" xmlns="https://www.w3.org/2000/svg">
                <rect id="shape" height="40" width="150" />
                <div id="text">
                    <a href=""><span class="spot"></span>Button 1</a>
                </div>
            </svg>
        </div>
        
        <div class="svg-wrapper">
            <svg height="40" width="150" xmlns="https://www.w3.org/2000/svg">
                <rect id="shape" height="40" width="150" />
                <div id="text">
                    <a href=""><span class="spot"></span>Button 2</a>
                </div>
            </svg>
        </div>
        
        <div class="svg-wrapper">
            <svg height="40" width="150" xmlns="https://www.w3.org/2000/svg">
                <rect id="shape" height="40" width="150" />
                <div id="text">
                    <a href=""><span class="spot"></span>Button 3</a>
                </div>
            </svg>
        </div>

</div>
    <a id="personal" href="https://www.tylermarkpeterson.com">www.tylermarkpeterson.com</a>
</div>

SVG Hover Buttons

svg, hover, button, border

编辑器支持Emmet

快捷键

SVG Hover Buttons

svg, hover, button, border

使用SVG滤镜和CSS3实现的按钮悬停粘稠（肿胀）变形动画

使用CSS3 box-shadow实现的7个按钮悬停动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：