按钮（秒懂CSS按钮的使用）

码农白衣

已于 2024-04-20 19:40:36 修改

阅读量2.4k

点赞数 37

于 2024-04-20 19:40:16 首次发布

本文链接：https://blog.csdn.net/m0_73916603/article/details/138008130

版权

前端知识同时被 3 个专栏收录

62 篇文章 5 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

html

34 篇文章 0 订阅

订阅专栏

css

10 篇文章 0 订阅

订阅专栏

一、按钮介绍

1.概念

按钮是网页中的一个可点击元素，通常用于执行特定的动作或操作。它可以是文本、图标或两者的组合，并且可以添加样式以符合网页的设计需求。

2.特点

可点击性：按钮可以被用户点击或触摸，以执行相应的操作。
样式定制：按钮的外观可以通过CSS进行自定义，以适应网页的设计风格。
交互性：按钮可以与用户进行交互，例如弹出对话框、提交表单、导航至其他页面等。
状态反馈：按钮通常会在被点击或激活时给予一定的视觉反馈，以告知用户操作已被接受或执行。

3.功能

触发操作：按钮最主要的功能是触发特定的操作或行为，比如提交表单、打开链接、显示/隐藏内容等。
提交表单：在表单中，按钮通常用于提交用户输入的数据至服务器进行处理。
导航：按钮可以用作导航元素，当点击时将用户导航至其他页面或执行特定的页面跳转逻辑。
确认操作：按钮也可以用于确认用户的操作，例如确认删除、确认提交等。
激活状态：在一些场景下，按钮可能会有激活和非激活状态，激活状态表示按钮当前可用，非激活状态表示按钮当前不可用。

二、按钮用法

1.按钮的使用

HTML按钮元素： HTML提供了 <button> 元素用于创建按钮。它可以包含文本、图标或两者的组合，并且可以添加事件监听器来实现交互功能。

<button>点击我</button>

按钮也可以包含图标或其他HTML元素：

<button><i class="fas fa-plus"></i> 添加</button>

按钮还可以通过设置 type 属性来指定不同的类型，常见的类型包括：

submit：用于提交表单数据。
button：普通的按钮。
reset：重置表单数据。

<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>

2.按钮的样式

按钮基本样式

<button>默认样式</button>

按钮渲染样式

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

3.按钮颜色

按钮可以通过background-color设置颜色

.button1 {background-color: #4CAF50;} /* 绿色 */
.button2 {background-color: #008CBA;} /* 蓝色 */
.button3 {background-color: #f44336;} /* 红色 */
.button4 {background-color: #e7e7e7; color: black;} /* 灰色 */
.button5 {background-color: #555555;} /* 黑色 */

4.按钮大小

按钮可以通过font-size来设置大小

.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}

5.圆角按钮

按钮可以通过border-radius来设置圆角

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}

6.按钮边框颜色

按钮可以通过border来设置按钮边框

.button1 {
    background-color: white;
    color: black;
    border: 2px solid #4CAF50; /* Green */
}
...

7.按钮鼠标悬停

按钮可以通过：hover选择器来修改悬停样式

.button {
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
 
.button:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}
...

8.按钮阴影

按钮可以通过box-shadow来添加阴影

.button1 {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

9.禁用按钮

按钮可以通过opacity来设置透明度，用cursor：not--allowed来设置禁用

.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

10.按钮宽度

正常情况下，按钮宽度为文本内容匹配长度，但是按钮也可以通过width来改变按钮宽度

.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}

三、按钮实例

1.交互式按钮

实现按钮鼠标悬浮时，显示文字与改变颜色

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>交互式按钮</title>
<style>
  /* 按钮样式 */
  .interactive-button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
    transition: background-color 0.3s, transform 0.3s;
  }
  .interactive-button:hover {
    background-color: #0056b3;
  }
  .interactive-button:active {
    transform: translateY(2px);
  }

  /* 提示框样式 */
  .tooltip {
    visibility :hidden;
    width: 120px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    z-index: 1;
    position: absolute;
  }
</style>
</head>
<body>

<!-- 按钮 -->
<button class="interactive-button">点击我</button>

<!-- 提示框 -->
<div class="tooltip">这是一个交互式按钮</div>
<script>
document.querySelector(".interactive-button").addEventListener('mouseenter', function() {
    document.querySelector(".tooltip").style.visibility = "visible";
});

document.querySelector(".interactive-button").addEventListener('mouseleave', function() {
    document.querySelector(".tooltip").style.visibility = "hidden";
});
</script>
</body>
</html>

正常结果：

鼠标悬浮时：

2.扩展动画按钮

在悬停时，按钮背景色会从蓝色渐变到天蓝色，同时添加阴影效果。
在点击时，按钮会放大。
按钮上有一个提示信息，在悬停时会淡入显示，悬停结束时会淡出隐藏。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高级按钮</title>
<style>
  /* 按钮样式 */
  .advanced-button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
    transition: background-color 0.3s, box-shadow 0.3s;
    position: relative;
  }
  .advanced-button:hover {
    background: linear-gradient(45deg, #007bff, #00bfff);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  }
  .advanced-button:active {
    transform: scale(1.05);
  }

  /* 提示信息样式 */
  .tooltip {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
  }
  .advanced-button:hover .tooltip {
    opacity: 1;
  }
</style>
</head>
<body>

<!-- 按钮 -->
<button class="advanced-button">高级按钮<span class="tooltip">点击这个高级按钮</span></button>

</body>
</html>

正常结果：

鼠标悬浮时：

鼠标点击时：

3.播放/暂停按钮

创建了一个简单的音频播放器，包括播放/暂停和停止按钮。用户点击播放/暂停按钮时，会切换音频的播放状态，并相应地更新按钮的文本内容。点击停止按钮会停止音频的播放并将播放器的当前时间重置为零。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>播放器示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<audio id="audioPlayer" src="audio.mp3"></audio>

<div class="controls">
  <button id="playPauseButton" onclick="togglePlayPause()">播放</button>
  <button id="stopButton" onclick="stopAudio()">停止</button>
</div>

<script src="script.js"></script>

</body>
</html>

CSS (styles.css)：

.controls {
  margin-top: 20px;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

button:focus {
  outline: none;
}

#playPauseButton {
  background-color: #3498db;
  color: #fff;
}

#stopButton {
  background-color: #e74c3c;
  color: #fff;
  margin-left: 10px;
}

JavaScript (script.js)：

const audioPlayer = document.getElementById('audioPlayer');
const playPauseButton = document.getElementById('playPauseButton');

function togglePlayPause() {
  if (audioPlayer.paused || audioPlayer.ended) {
    playAudio();
    playPauseButton.textContent = '暂停';
  } else {
    pauseAudio();
    playPauseButton.textContent = '播放';
  }
}

function playAudio() {
  audioPlayer.play();
}

function pauseAudio() {
  audioPlayer.pause();
}

function stopAudio() {
  pauseAudio();
  audioPlayer.currentTime = 0;
  playPauseButton.textContent = '播放';
}

展示效果：