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:700;
color: var(--color); /* 文字颜色为预定义的前景色 */
cursor: pointer; /* 鼠标移动到按钮上时候的形状：手型 */
user-select: none; /* 让用户不能选择按钮上的文字 */
white-space: nowrap; /* 避免英文单词间的空格导致文字换行 */
border-radius: 2rem;
text-decoration: none;
text-transform:uppercase; /* 字母自动修正为大写 */
transition: all .5s; /* 按钮响应动画效果的持续时间 */
margin: 1.5rem 2rem;
}按钮样式
.btn_hide{
position: relative;
background: #ff3399;
transition: all 0.5s;
color: #fff;
font-family: '黑体';
border-radius: 50%;
box-shadow: 0 0 0 rgba(255, 102, 163, 0.4);
transition: 300ms;
padding:1rem 1.35rem;
font-size: 2rem;
line-height: 2rem;
}
.btn_hide:before,
.btn_hide:after{
content: attr(alt);
position: absolute;
z-index: -1;
background-color: #ffb3d9;
top:0;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 2.5rem 2.5rem 2.5rem 6rem; /* 模拟翅膀 */
-webkit-transition: all 0.5s;
transition: all 0.5s;
padding: 0.85rem 0.5rem;
box-sizing: border-box;
text-align: right;
color: #ff3399;
font-size: 1.5rem;
}
.btn_hide:before{
left:0;
}
.btn_hide:after{
right:0;
}
按钮动画
给这个圆形的按钮 增加一个关键帧动画：
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(255, 102, 163, 0.4); }
70% { box-shadow: 0 0 10px 30px rgba(255, 102, 163, 0); }
100% { box-shadow: 0 0 5px 0 rgba(255, 102, 163, 0); }
}这三个关键帧分别是三个透明度和大小不一样的投影。接下来，把这个动画绑定到按钮本体上：
.btn_hide{ animation: pulse 1s infinite; }我们来看看效果：
悬浮动画
下面，让我们来通过位移动画实现鼠标hover状态时，before和hover伪元素显现出来。
.btn_hide:hover{
background: #ff3399;
transition: all 0.5s;
}
.btn_hide:hover:before{
padding: 0.85rem 2.5rem;
padding-left: 4.5rem;
text-align: right;
width: 600%;
left:0;
}
.btn_hide:hover:after{
padding: 0.85rem 2.5rem;
padding-right: 4.5rem;
text-align: left;
width: 600%;
right:0;
}
看起来差不多了，还差一个文字颜色变化。这个实现非常简单：
@keyframes text-color-change {
0%, 50% {
color: rgb(255, 255, 255);
}
50.1%, 100% {
color: rgb(255, 51, 153);
}
}然后，别忘了把动画绑定到 before和hover两个伪元素上：
.btn_hide:hover:before，
.btn_hide:hover:after｛
animation: text-color-change 0.2s infinite alternate;
｝按钮完成，看看效果：
大功告成，亲个嘴儿吧？
写到这里，突然响起金大大的《鹿鼎记》里，韦小宝最喜欢跟双儿说的这句话。这个按钮，很应景呢。
希望大家喜欢！收到我表白的小伙伴，别忘了帮我点赞加收藏哦~
本专栏其他文章：
CSS技巧专栏：一日一例 2.纯CSS实现 多彩边框按钮特效
CSS技巧专栏：一日一例 4.纯CSS实现两款流光溢彩的酷炫按钮特效
CSS技巧专栏：一日一例 5-纯CSS实现背景色从四周向中心填充的按钮特效
CSS技巧专栏：一日一例 6 - 纯CSS实现粉红色跳出来的立体按钮特效
CSS技巧专栏：一日一例 7 - 纯CSS实现炫光边框按钮特效