div+css实现按钮悬浮箭头伸缩动画效果代码-html代码-BFW代码库

div+css实现按钮悬浮箭头伸缩动画效果代码

代码语言：html

所属分类：悬停

代码描述：div+css实现按钮悬浮箭头伸缩动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

    <style>
        .learn-more {
            margin: 100px ;
     position: relative;
     display: inline-block;
     cursor: pointer;
     outline: none;
    
     border: 0;
     vertical-align: middle;
     text-decoration: none;
     background: transparent;
     padding: 0;
     font-size: inherit;
     font-family: inherit;
   
     width: 12rem;
     height: auto;
    }
    
    .learn-more .circle {
     transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
     position: relative;
     display: block;
     margin: 0;
     width: 3rem;
     height: 3rem;
     background: #282936;
     border-radius: 1.625rem;
    }
    
    .learn-more .circle .icon {
     transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
     position: absolute;
     top: 0;
     bottom: 0;
     margin: auto;
     background: #fff;
    }
    
    .learn-more .circle .icon.arrow {
     transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
     left: 0.625rem;
     width: 1.125rem;
     height: 0.125rem;
     background: none;.........完整代码请登录后点击上方下载按钮下载查看