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

目录

一、按钮介绍

1.概念

2.特点

3.功能

二、按钮用法

1.按钮的使用

2.按钮的样式

 3.按钮颜色

 4.按钮大小

 5.圆角按钮

 6.按钮边框颜色

7.按钮鼠标悬停

8.按钮阴影

 9.禁用按钮

 10.按钮宽度

三、按钮实例

1.交互式按钮

 2.扩展动画按钮

3.播放/暂停按钮

四、应用场景

五、总结

一、按钮介绍

1.概念

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

2.特点

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

3.功能

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

二、按钮用法

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.扩展动画按钮

  1. 在悬停时，按钮背景色会从蓝色渐变到天蓝色，同时添加阴影效果。
  2. 在点击时，按钮会放大。
  3. 按钮上有一个提示信息，在悬停时会淡入显示，悬停结束时会淡出隐藏。
<!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 = '播放';
}

展示效果：

点击播放后：

四、应用场景

  1. 提交表单：在表单中添加一个按钮，当用户填写完表单内容后，点击按钮提交表单数据。
  2. 导航链接：作为网站的导航链接，用户点击按钮可以跳转到其他页面或执行特定的操作。
  3. 操作按钮：例如，在购物网站上，可以有一个“添加到购物车”按钮，用户点击该按钮将商品添加到购物车中。
  4. 确认操作：用于确认某些敏感操作，例如“删除”按钮，在用户点击之后可能需要弹出确认对话框。
  5. 播放/暂停：用于音频或视频播放器的控制，例如播放、暂停、停止等按钮。
  6. 拨号按钮：在电话应用程序中，用于拨打电话或者发起视频通话的按钮。
  7. 下载按钮：用于下载文件或者资源的按钮，点击后触发下载操作。
  8. 分享按钮：用于分享内容到社交媒体或其他平台的按钮，点击后弹出分享选项。
  9. 切换按钮：用于切换不同的视图或模式，例如夜间模式切换按钮。
  10. 设置按钮：用于打开设置页面或弹出设置选项的按钮。

五、总结

按钮是网页和应用程序界面中常见的交互元素，用于触发特定的操作或执行特定的功能。以下是按钮的主要特点和总结：

  1. 交互性: 按钮是用户与界面进行交互的主要手段之一，用户通过点击按钮来执行特定的操作。
  2. 可视化: 按钮通常具有明显的外观，以吸引用户的注意力，并且可以通过颜色、形状等视觉元素来传达信息。
  3. 反馈: 当用户与按钮进行交互时，通常会提供反馈以指示操作的状态，例如按钮的状态变化、动画效果或者提示信息。
  4. 功能性: 按钮可以执行各种功能，例如提交表单、导航跳转、确认操作、播放控制等。
  5. 样式定制: 按钮的外观和样式可以根据设计需求进行定制，包括背景色、文本颜色、边框样式、阴影效果等。
  6. 响应式设计: 按钮通常需要适应不同设备和屏幕尺寸，因此需要进行响应式设计，以确保在各种设备上都能够正常显示和使用。

总的来说，按钮是界面设计中不可或缺的元素之一，通过合理设计和使用按钮，可以提升用户体验，并实现各种功能和交互需求。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/560462.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

国产化里程碑：明道云HAP私有部署版获信创评估证书，荣登会员单位

国产化里程碑：明道云HAP私有部署版获信创评估证书，荣登会员单位

近期&#xff0c;明道云HAP私有部署版荣获信创产品评估证书&#xff0c;这一成就不仅标志着我们在信创领域的深入布局和持续努力获得了行业的广泛认可&#xff0c;也是对我们积极拥抱和推动国产化技术发展的肯定。更值得一提的是&#xff0c;我们还被授予“成员单位”的称号&am…
阅读更多...
【数字电路与系统】【北京航空航天大学】实验：时序逻辑设计——三色灯开关（二）、需求分析和系统设计

【数字电路与系统】【北京航空航天大学】实验：时序逻辑设计——三色灯开关（二）、需求分析和系统设计

本次实验&#xff08;一&#xff09;见博客&#xff1a;【数字电路与系统】【北京航空航天大学】实验&#xff1a;时序逻辑设计——三色灯开关&#xff08;一&#xff09;、实验指导书 说明&#xff1a;本次实验的代码使用verilog编写&#xff0c;文章中为阅读方便&#xff0c…
阅读更多...
kaggle 房价预测 得分0.53492

kaggle 房价预测 得分0.53492

流程 导入需要的包引入文件,查看内容数据处理调用模型准备训练输出结果 导入需要的包 import pandas as pd import numpy as np import matplotlib.pyplot as plt import seaborn as sns from sklearn.model_selection import train_test_split from sklearn.linear_model i…
阅读更多...
Claude 3 Opus 效果是否真的可以超过GPT-4？

Claude 3 Opus 效果是否真的可以超过GPT-4？

实测,不仅是超过,而且我个人感觉这个差距甚至大于GPT3.5到GPT4的距离. claude3在长篇理学论文的解析能力是非常显著的,可以扩展补完作者省略的大量运用高等数学,复变函数以及更多数理方法的计算过程,并且将中间过程补完的非常完美.不会漏符号,错符号,偏差数值之类的问题.工科许…
阅读更多...
【C语言】贪吃蛇项目（2）- 实现代码详解

【C语言】贪吃蛇项目（2）- 实现代码详解

文章目录 前言一、游戏开始界面设计首先 - 打印环境界面其次 - 游戏地图、蛇身及食物的设计1、地图2、蛇身设置及打印3、食物 二、游戏运行环节蛇的上下左右移动等功能蛇的移动 三、结束游戏代码 前言 在笔者的前一篇博客中详细记载了贪吃蛇项目所需的一些必备知识以及我们进行…
阅读更多...
mysql_explain执行计划字段解析

mysql_explain执行计划字段解析

【README】 本文对 explain打印的执行结果的字段进行解析&#xff1b; 本文总结自&#xff1a; MySQL :: MySQL 8.3 Reference Manual :: 10.8.2 EXPLAIN Output Formathttps://dev.mysql.com/doc/refman/8.3/en/explain-output.html 列名含义id选择标识select_type选择类型…
阅读更多...
移动Web学习09-响应式布局bootstrap案例开发

移动Web学习09-响应式布局bootstrap案例开发

3、综合案例-AlloyTeam移动全端 准备工作 HTML 结构 <title>腾讯全端</title> <link rel"shortcut icon" href"favicon.ico" type"image/x-icon"> <!-- 层叠性&#xff1a;咱们的css 要 层叠 框架的 --> <link rel&…
阅读更多...
存储过程的使用(二)

存储过程的使用(二)

目录 带 OUT 参数的存储过程 输入一个编号&#xff0c;查询数据表 emp中是否有这个编号&#xff0c;如果有返回对应员工姓名&#xff0c;如果没有&#xff0c;则提示没有对应员工 使用 EXEC 命令或者 PRINT执行含有 OUT参数的存储过程 使用 PL/SQL 块编辑程序调用含有 OUT …
阅读更多...
JAVA 项目＜果园之窗＞_2

JAVA 项目＜果园之窗＞_2

上节主要是理论流程&#xff0c;这次直接用实际例子过一遍整个流程 目标是向数据库添加一个员工 上述是前端页面&#xff0c;点击保存 浏览器向我后端发送http请求 后端这一部分专门接收employee请求 在这里对http post请求进行转换成JAVA数据&#xff0c;并处理数据&#xff…
阅读更多...
Spring Boot后端与Vue前端融合：构建高效旅游管理系统

Spring Boot后端与Vue前端融合：构建高效旅游管理系统

作者介绍&#xff1a;✌️大厂全栈码农|毕设实战开发&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。 &#x1f345;获取源码联系方式请查看文末&#x1f345; 推荐订阅精彩专栏 &#x1f447;&#x1f3fb; 避免错过下次更新 Springboot项目精选实战案例 更多项目…
阅读更多...
python_列表和元组

python_列表和元组

介绍 列表&#xff08;List&#xff09;和元组&#xff08;Tuple&#xff09;是Python中两种不同的数据结构&#xff0c;它们都可以用来存储一系列的元素。下面是它们的主要特点和区别&#xff1a; 列表&#xff08;List&#xff09; 可变性&#xff1a;列表是可变的&…
阅读更多...
广西模板厂有哪些厂家

广西模板厂有哪些厂家

在广西地区&#xff0c;建筑行业蓬勃发展&#xff0c;建筑模板作为建筑施工的重要材料&#xff0c;需求量逐渐增加。在这个市场中&#xff0c;贵港市能强优品木业有限公司以其卓越的产品质量和丰富的生产经验而闻名&#xff0c;成为广西地区的知名建筑模板生产厂家。 作为一家具…
阅读更多...
OpenCV4.9使用 inRange 的阈值操作

OpenCV4.9使用 inRange 的阈值操作

返回:OpenCV系列文章目录&#xff08;持续更新中......&#xff09; 上一篇:OpenCV4.9​​​​基本阈值操作 下一篇&#xff1a;利用OpenCV4.9制作自己的线性滤波器&#xff01; ​目标 在本教程中&#xff0c;您将学习如何&#xff1a; 使用 OpenCV cv&#xff1a;&#xff…
阅读更多...
【错题集-编程题】大数乘法（模拟 + 高精度乘法）

【错题集-编程题】大数乘法（模拟 + 高精度乘法）

题目链接&#xff1a;大数乘法_牛客题霸_牛客网 (nowcoder.com) 一、分析题目 根据列竖式运算的过程模拟即可&#xff0c;但是我们可以改进⼀下列竖式的过程&#xff1a; 先计算⽆进位相乘并且相加后的结果&#xff1b;然后再处理进位。 细节&#xff1a;题目所给的两个字符串…
阅读更多...
OpenHarmony 视频播放开发教程~

OpenHarmony 视频播放开发教程~

介绍 本示例主要展示了网络视频播放的相关功能。使用ohos.multimedia.avsession等接口实现视频播放的功能。 效果预览 主页 使用说明 点击播放按钮&#xff0c;应用的播放状态发生变化。点击暂停按钮&#xff0c;应用的播放状态开始变化。点击上一个按钮&#xff0c;界面展…
阅读更多...
Ribbon 添加快速访问区域

Ribbon 添加快速访问区域

添加快速访问区域挺简单的&#xff0c;实例如下所示&#xff1a; void QtRightFuncDemo::createQuickAccessBar() { RibbonQuickAccessBar* quickAccessBar ribbonBar()->quickAccessBar(); QAction* action quickAccessBar->actionCustomizeButton(); act…
阅读更多...
如何查找一篇英文文献的源代码？（论文中没有源代码链接时）如何查找一篇论文的实现代码从而复现论文？

如何查找一篇英文文献的源代码？（论文中没有源代码链接时）如何查找一篇论文的实现代码从而复现论文？

有两个网址&#xff0c;从这两个网址里面能找到论文相关代码&#xff0c;但不确定是不是人家论文里的源代码&#xff0c;但是根据论文实在找不到的情况下&#xff0c;只能试试这两个网址了 1. https://paperswithcode.com/ 2. https://www.catalyzex.com/
阅读更多...
团队协作：如何利用 Gitee 实现多人合作项目的版本控制

团队协作：如何利用 Gitee 实现多人合作项目的版本控制

文章目录 前言一、名词解释1、Git是什么&#xff1f;2、Gitee、GitHub和GitLab 二、操作步骤1.安装Git2.创建Gitee仓库3.用vscode连接仓库4. 克隆远程仓库 总结 前言 在软件开发中&#xff0c;有效地管理代码是至关重要的。Gitee 是一个功能强大的代码托管平台&#xff0c;提供…
阅读更多...
Sentinel 流控注解使用

Sentinel 流控注解使用

大概原理&#xff1a;通过反射解析注解 SentinelResource信息完成调用&#xff0c;处理方法&#xff0c;类似AOP编程 处理方法的返回类型要保持一致&#xff0c;参数和顺序保持一致&#xff0c; 可以在参数列表最后加 com.alibaba.csp.sentinel.slots.block.BlockException; …
阅读更多...
探索C语言数据结构：利用顺序表完成通讯录的实现

探索C语言数据结构：利用顺序表完成通讯录的实现

在好久之前我就已经学习过顺序表&#xff0c;但是在前几天再次温习顺序表的时候&#xff0c;我惊奇的发现顺序编表可以完成我们日常使用的通讯录的功能&#xff0c;那么今天就来好好通过博客总结一下通讯录如何完成吧。 常常会回顾努力的自己&#xff0c;所以要给自己的努力留…
阅读更多...
最新文章

Copyright @ 2022~2023