假期情绪按钮：一秒切换你的假期状态

2024-02-05 17:25:26

用 CSS 创建一个神奇的假期按钮，开启轻松之旅

背景

随着假期的临近，我们都迫不及待地想要按下“假期”按钮，暂时抛开工作的压力，尽情享受轻松愉悦的时光。今天，我们就来用 CSS 制作一个专属的假期按钮，只需轻轻一按，就能瞬间切换到假期模式。

实现步骤

1. CSS 样式

/* 按钮基础样式 */
.holiday-button {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
}

/* 按钮两种状态样式 */
.holiday-button.work-mode {
  background-color: #f5f5f5;
  color: #666;
}

.holiday-button.holiday-mode {
  background-color: #4caf50;
  color: #fff;
}

/* 按钮切换动画 */
.holiday-button.work-mode:hover {
  background-color: #f5f5f5;
}

.holiday-button.holiday-mode:hover {
  background-color: #4caf50;
}

2. HTML 代码

<button class="holiday-button work-mode">工作模式</button>

3. JavaScript 交互（可选）

// 获取按钮元素
const button = document.querySelector('.holiday-button');

// 添加点击事件监听器
button.addEventListener('click', () => {
  // 切换按钮状态
  button.classList.toggle('holiday-mode');

  // 根据按钮状态切换按钮文本
  if (button.classList.contains('holiday-mode')) {
    button.textContent = '假期模式';
  } else {
    button.textContent = '工作模式';
  }
});

使用方式

将 CSS 和 HTML 代码添加到你的项目中，就可以使用这个神奇的假期按钮了。点击按钮即可切换工作模式和假期模式，让你轻松进入或退出假期状态。

升级版本：按钮切换 2.0

为了让假期按钮更加有趣，我们可以添加一些额外的交互效果，例如切换时按钮文本也会随之改变。

代码示例

// 获取按钮元素
const button = document.querySelector('.holiday-button');

// 添加点击事件监听器
button.addEventListener('click', () => {
  // 切换按钮状态
  button.classList.toggle('holiday-mode');

  // 根据按钮状态切换按钮文本
  if (button.classList.contains('holiday-mode')) {
    button.textContent = '假期模式';
  } else {
    button.textContent = '工作模式';
  }
});