CSS技巧专栏：一日一例 10 -纯CSS实现表爱心的小可爱按钮特效

CSS技巧专栏：一日一例 10 -纯CSS实现表爱心的小可爱按钮特效

本篇，给大家分享一个有趣的按钮，会表白的小可爱，希望小伙伴们喜欢！

本例图片

案例分析

这个按钮的常态效果有一个 为爱发电一样的光影扩散的效果，这个效果我考虑可以使用 动画 + 阴影 实现。当鼠标移到按钮上，两边突然滑出两个翅膀和翅膀上一样可爱的闪动的表白文字，这个可以使用before和after两个伪元素来实现。

布局代码

<button class="base" alt="人家好耐你(✿◡‿◡)">♥</button>

基础样式

:root{
  --main-bg-color: #000;
  --color:#000;
  --hover-color:#993399;
}
button{
  margin: 0.3em;
  outline: 0;
  border: none;
}
.base{
  position: relative;   
  padding: 1rem 3rem; /* 用 padding 撑起按钮的宽度和高度 ，并确保了按钮文字水平方向居中 */
  font-family: "微软雅黑", sans-serif;
  font-size: 1.5rem;  
  line-height: 1.5rem; /* 行高和字号大小相等，可以实现按钮文字在按钮内垂直居中 */ 
  font-weight