css3 box-shadow按钮

CSS3提供了丰富的效果和样式，其中box-shadow效果尤为炫酷。下面让我们来学习如何在按钮上应用box-shadow效果。

/* 定义按钮的css样式 */button {
      background-color: #428bca;
      color: #ffffff;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
}
 /* 添加box-shadow效果 */button:hover {
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
    

在上面的代码中，我们首先定义了按钮的基本样式。接着，在按钮上添加了:hover伪类，这表示当用户光标移到按钮上时触发样式的变化。然后，我们使用box-shadow来添加按钮的阴影效果，其中参数0 2px 5px表示阴影的水平偏移、垂直偏移以及模糊程度；而rgba(0, 0, 0, 0.3)则表示阴影的颜色值和透明度。

使用box-shadow效果可以让按钮看起来更加立体感和深度感，同时也可以增强用户体验。你可以根据自己的需求来调整box-shadow效果的参数值，让按钮看起来更加炫酷。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！