css3 box-shadow 浮雕风格按钮

/* 浮雕式按钮样式 */
.floating-button {
    position: relative; /* 相对定位 */
    top: 0;
    left: 0;
    width: 120px; /* 按钮宽度 */
    height: 50px; /* 按钮高度 */
    background-color: #4CAF50; /* 按钮背景颜色 */
    border-radius: 8px; /* 圆角边框 */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* 阴影效果 */
    text-align: center; /* 文本居中 */
    line-height: 50px; /* 文本行高与高度相同，使得文本垂直居中 */
    color: white; /* 文本颜色 */
    font-size: 16px; /* 文本大小 */
    cursor: pointer; /* 鼠标悬停时显示指针光标 */
    z-index: 1; /* 层叠顺序 */
    transition: box-shadow 0.3s ease; /* 盒阴影变化过渡效果 */
}
 
/* 鼠标悬停时的盒阴影效果 */
.floating-button:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
 
/* 鼠标点击时的盒阴影效果 */
.floating-button:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    top: 1px; /* 按钮被点击时稍微上移，模拟点击下沉的效果 */
}

这段代码定义了一个浮雕式的按钮，当鼠标悬停时，盒阴影会变大，在鼠标点击时，盒阴影会变小，按钮会稍微上移，通过视觉变化模拟按钮被按下的效果。这种效果提升了用户交互的真实感，是一种常用的CSS3特效。