transition动画按钮

先来看一下效果图

动画button

<el-row>
	<el-card class="box-card">       
    	<div style="margin-bottom: 50px">
        	<el-col :span="6" class="text-center">
            	<router-link class="bor-btn light-blue-btn" to="/theme/index">
              		2021
            	</router-link>
         	</el-col>
         	<el-col :span="6" class="text-center">
            	<router-link class="pn-btn pink-btn" to="/theme/index">
              	平安喜乐
            	</router-link>
         	</el-col>
    	</div>
	</el-card>
</el-row>

css

<style lang="scss">
<------ 按钮css ------>
.light-blue-btn{
	background: #3A71A8
},
.pink-btn{
	background: #E65D6E
}
.text-center {
    text-align: center;
}
.bor-btn,.pa-btn {
    color: #fff;
    font-size: 14px;
    padding: 14px 36px;
    border-radius: 8px;
    border: none;
    outline: none;
    transition: 600ms ease all;
    position: relative;
    display: inline-block;   
}
// button 2021
.bor-btn{
	&:hover {
    	background: #fff;
    	color: #3a71a8;
    	&:before {
        	width: 100%;
    	}
    	&:after {
        	height: 100%;  
    	}
  	}
  	&:before,
  	&:after {
    	content: "";
    	position: absolute;
    	top: 0;
    	right: 0;
    	height: 6px;
    	width: 6px;
    	transition: 800ms ease all;
  	}
  	&::after {
    	right: inherit;
    	top: inherit;
    	left: 0;
    	bottom: 0;
    }  
 }
 // button 平安喜乐
.pa-btn {
  	&:hover {
    	background: #fff;
    	&:before,
    	&:after {
      		width: 100%;
      		transition: 600ms ease all;
    	}
  	}

  	&:before,
  	&:after {
    	content: '';
    	position: absolute;
    	top: 0;
    	right: 0;
    	height: 6px;
    	width: 0;
    	transition: 400ms ease all;
  	}
  	&::after {
    	right: inherit;
    	top: inherit;
    	left: 0;
    	bottom: 0;
    } 
 }
 </style>

css伪元素做一些动画效果很强大呀，学习中，，，欢迎留言~ 互粉