css3按钮呼吸效果和代码

CSS3呼吸按钮是一种动画效果，让按钮像在呼吸一样动态。该效果可以用于网站上的许多按钮，增加用户交互体验。

html代码

<button class="breathing-button">Click me!</button>

css代码

.breathing-button {
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 4px;
font-size: 16px;
padding: 10px 20px;
position: relative;
overflow: hidden;
outline: none;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.breathing-button:before {
content: "";
position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 50%;
z-index: -1;
transition: all 0.3s ease-in-out;
}
.breathing-button:hover {
box-shadow: 0 0 10px #4CAF50, 0 0 40px #4CAF50, 0 0 80px #4CAF50;
}
.breathing-button:hover:before {
filter: blur(20px);
opacity: 0;
transform: scale(2);
}
.breathing-button:active {
background-color: #3e8e41;
box-shadow: 0 0 5px #4CAF50;
color: #fff;
transform: translateY(2px);
}

该呼吸按钮由一个HTML按钮和一些CSS代码组成。HTML按钮的类设置为“breathing-button”，它包含一个简单的文本，如“Click me!”。

CSS代码分为四个部分。第一部分包含按钮的基本样式，例如颜色、背景颜色、圆角等。第二部分是一个CSS假元素（:before），用于制作白色气泡。第三部分在鼠标悬停时改变按钮的阴影效果。第四部分是在按钮激活时触发的效果，包括背景颜色、阴影和文本颜色。