CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效

时间：2024-07-14 07:04:02

大家好，今天是 CSS技巧专栏：一日一例 第三篇《纯CSS实现炫酷多彩按钮特效》

先看图：

开工前的准备工作

正如昨日所讲，为了案例的表现，也处于书写的习惯，在今天的案例开工前，先把昨天的准备工作重做一遍。

  1. 清除浏览器的默认样式
  2. 定义页面基本颜色
  3. 设定body的样式
  4. 清除button控件的默认边框
  5. 给按钮安一个家

好了，具体过程请参考本专栏第一篇的文章：《CSS技巧 - 一日一例 （1）：会讨好的热情按钮》。废话不多说，我们开工！

开工啦！

第一步：基本页面布局

<div class="container">
      <button class="base" >酷炫多彩的按钮</button>
</div>

第二步：按钮基本样式

这里于昨天的样式也是一样的，我在前的文章说过：为了实现更多按钮的案例，我把大多数按钮通用的样式写在了一起。今天，再把它复制过来。

.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; /* 按钮响应动画效果的持续时间 */
}

相关文章