Material Design 按钮的各种实现方法

Material Design 是 Google 推出的一种设计语言，旨在为移动设备和 Web 应用程序提供一致的外观和感觉。其中，按钮是 Material Design 中的一个重要组件之一，其样式和交互效果都非常值得学习和借鉴。本文将介绍 Material Design 按钮的各种实现方法，包括 HTML、CSS 和 JavaScript 的实现方式，并提供示例代码以供参考。

1. 基础按钮

基础按钮是 Material Design 中最简单的按钮，它的样式和 HTML 结构都非常简单。下面是一个基础按钮的示例代码：

------- -------------------
  ----- --
---------

这个按钮的样式可以通过 CSS 来实现，具体代码如下：

----------- -
  ----------------- --------
  ------ -----
  -------------- ----
  ---------- -----
  -------- --- -----
  ------- -----
  ------- --------
-

这个按钮的样式非常简单，只有背景色、文字颜色、圆角、字体大小、内边距和鼠标指针样式等基本属性。不过，这个按钮已经具备了 Material Design 的基本风格，可以作为其他按钮样式的基础。

2. 浮动按钮

浮动按钮是 Material Design 中常见的一种按钮，它通常用于页面的主要操作。下面是一个浮动按钮的示例代码：

------- ----------------
  ----- ----------------------
    -- ------------------------------
  -------
---------

这个浮动按钮的样式可以通过 CSS 来实现，具体代码如下：

-------- -
  ----------------- --------
  ------ -----
  -------------- ----
  ------ -----
  ------- -----
  ------- -----
  ------- --------
  -------- -----
  ------------ -------
  ---------------- -------
  ----------- --- --- --- ------- -- -- ------
  --------- ------
  ------- -----
  ------ -----
-

-------------- -
  ---------- -----
-

这个浮动按钮的样式比基础按钮要复杂一些，它包括了背景色、文字颜色、圆角、宽度、高度、内边距、鼠标指针样式、阴影、位置等属性。此外，浮动按钮还需要一个内部的图标来表示它的功能，这里使用了 Material Icons 中的 add 图标。

3. 文字按钮

文字按钮是 Material Design 中一种简单的按钮，它通常用于页面中次要的操作。下面是一个文字按钮的示例代码：

------- ----------------- ----------------------
  ----- --
---------

这个文字按钮的样式可以通过 CSS 来实现，具体代码如下：

--------------------- -
  ----------------- ------------
  ------ --------
  -------------- ----
  ---------- -----
  -------- --- -----
  ------- --- ----- --------
  ------- --------
-

这个文字按钮的样式和基础按钮非常相似，只是背景色变为了透明，文字颜色变为了蓝色，同时增加了一个 1px 的边框。这种样式的按钮适合用于页面中次要的操作，可以起到一定的提示作用。

4. 图标按钮

图标按钮是 Material Design 中一种常见的按钮，它通常用于页面中简单的操作。下面是一个图标按钮的示例代码：

------- -------------------
  -- -----------------------------------
---------

这个图标按钮的样式可以通过 CSS 来实现，具体代码如下：

----------- -
  ----------------- ------------
  ------ --------
  -------------- ----
  ------ -----
  ------- -----
  ------- --- ----- --------
  ------- --------
  -------- -----
  ------------ -------
  ---------------- -------
-

----------- - -
  ---------- -----
-

这个图标按钮的样式和文字按钮非常相似，只是背景色变为了透明，同时增加了一个 1px 的边框。此外，图标按钮需要一个内部的图标来表示它的功能，这里使用了 Material Icons 中的 favorite 图标。

5. 复选框按钮

复选框按钮是 Material Design 中一种常见的按钮，它通常用于页面中需要用户选择多个选项的场景。下面是一个复选框按钮的示例代码：

------ ---------------------
  ------ --------------- -------------------------------------
  ---- ---------------------------------
    ---- ------------------------------- ---------- - -- ----
      ----- ------------------------------------ ----------- -------------- --------- -------------
    ------
    ---- --------------------------------------
  ------
  ---- -----------------------------------
--------

这个复选框按钮的样式可以通过 CSS 来实现，具体代码如下：

------------- -
  -------- ------------
  ------------ -------
  ------- --------
-

----------------------------- -
  --------- ---------
  -------- --
-

------------------------- -
  --------- ---------
  -------- ------------
  ------------ -------
  ---------------- -------
  ------ -----
  ------- -----
  ------------- ----
  ------- --- ----- --------
  -------------- ----
-

--------------------------------- -
  -------- ---
  -------- ------
  --------- ---------
  ---- ------
  ----- ------
  ------ -----
  ------- -----
  ----------------- ------- -- -- -----
  -------------- ----
  -------- --
  ----------- ------- ---- ------------
-

--------------------------------------- -
  -------- --
-

------------------------ -
  ----- -----
  ------- -----
  ------------- --
  --------------- ------
  ---------------- ------
  ------- -----
  ------ -----
  ----------- -------
-

------------------------------------- - ------------------------- ------------------------ -
  ----------- --------
-

------------------------ -
  --------- ---------
  ---- ----
  ----- ----
  ---------- --------------- ------
  ------ -----
  ------- -----
  ------- --- ----- --------
  -------------- ----
  ----------- -------
-

------------------------------------------- - ------------------------- ------------------------ -
  ----------- --------
-

--------------------- -
  --------- ---------
  ----- --
  ---- --
  ------ -----
  ------- -----
  -------------- ----
  ----------------- ------- -- -- -----
  -------- --
  ----------- ------- ---- ------------
-

------------------- --------------------- -
  -------- --
-

-------------------------------------- - ------------------------- -
  -------- ----
  ------- ------------
-

-------------------------------------- - --------------------- -
  -------- -----
-

这个复选框按钮的样式非常复杂，它包括了背景、边框、鼠标悬停效果、选中状态、不确定状态、禁用状态等多种属性。此外，复选框按钮还需要一个内部的图标来表示它的状态，这里使用了一个 SVG 图标来表示选中状态。

6. 总结

本文介绍了 Material Design 按钮的各种实现方法，包括基础按钮、浮动按钮、文字按钮、图标按钮和复选框按钮等多种样式。这些样式都具有 Material Design 的基本风格，可以用于开发移动设备和 Web 应用程序。如果你想学习更多关于 Material Design 的知识，可以参考 Material Design 官方文档。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/660259ded10417a222de608a

阅读全文

猜你喜欢

  • 如何优化 Material Design 在 ListView 中的性能问题

    在开发前端应用时，Material Design 是一个非常流行的设计语言。然而，在使用 Material Design 的 ListView 组件时，我们可能会遇到性能问题。

    7 个月前
  • ESLint 与 Jest 结合使用时如何避免重复冲突？

    在前端开发中，我们通常会使用 ESLint 进行代码风格检查和规范，而 Jest 则是一个常用的 JavaScript 测试框架。但是，当我们同时使用 ESLint 和 Jest 时，有时会遇到一些重...

    7 个月前
  • JavaScript 的异步编程：ES2016 async 和 await 详解

    前言 随着互联网的发展，JavaScript 作为一种非常流行的编程语言，被越来越多的人所关注和使用。而在 JavaScript 中，异步编程一直是一个非常重要的话题。

    7 个月前
  • Node.js 中 Socket.io 跨域问题的解决方法

    在前端开发中，跨域问题是一个常见的难题。而在 Node.js 中使用 Socket.io 进行跨域通信时，也会遇到一些问题。本文将介绍 Socket.io 跨域问题的解决方法。

    7 个月前
  • 如何在 CSS Reset 基础上改善字体排版效果

    在前端开发中，CSS Reset 是很常见的技术，它可以帮助我们解决浏览器的默认样式问题，让页面在不同浏览器中呈现一致的效果。但是，当我们使用 CSS Reset 后，页面的字体排版效果可能会变得不太...

    7 个月前
  • 使用 Server-Sent Events 实现实时沙盘游戏

    前言 随着互联网技术的发展，实时性成为了现代应用的重要特性之一。在前端领域，实时性的应用场景也越来越多，比如在线聊天、实时数据监控等。本文将介绍如何使用 Server-Sent Events 技术实现...

    7 个月前
  • 使用 Babel 编译 ES6 的箭头函数语法

    前言 随着技术的不断进步，JavaScript 语言也在不断地更新和演进。ES6（ECMAScript 6）是 JavaScript 新一代标准，也被称为 ES2015。

    7 个月前
  • 如何配置 Webpack 进行多环境打包

    Webpack 是一个现代化的前端构建工具，它可以帮助我们将多个 JavaScript 文件打包成一个或多个文件，同时也可以将其他类型的资源如 CSS、图片、字体等打包进来。

    7 个月前
  • Deno 中如何处理网络错误

    在前端开发中，我们经常需要处理网络请求的错误。而 Deno 作为一种现代的 JavaScript 和 TypeScript 运行时环境，也提供了一些强大的工具来处理网络错误。

    7 个月前
  • 使用 Cypress 进行测试时如何模拟接口响应

    在前端开发中，测试是非常重要的一环。而 Cypress 是一个功能强大的前端测试工具，它可以帮助我们自动化测试我们的应用程序。在测试中，模拟接口响应是必不可少的一步，因为我们需要测试我们的应用程序在不...

    7 个月前
  • ES12 标准下的 JavaScript 双重赋值运算符和可选属性访问器

    在 ES12 标准中，JavaScript 引入了两个新的语言特性：双重赋值运算符和可选属性访问器。这些特性可以帮助开发人员更加高效地编写代码，提高代码的可读性和易维护性。

    7 个月前
  • SPA 应用如何进行前端监控及错误跟踪

    单页应用程序（SPA）是一种现代的 Web 应用程序架构，它使用 JavaScript 来构建动态用户界面。然而，SPA 应用程序的复杂性可能会导致错误和问题的出现，这些错误和问题可能会影响用户体验和...

    7 个月前
  • Promise 中如何实现超时控制

    在前端开发中，我们经常会使用 Promise 来处理异步操作。但是，在某些情况下，我们可能需要对 Promise 进行超时控制，以避免等待时间过长导致用户体验变差。

    7 个月前
  • MongoDB 的数据删除和恢复操作详解

    简介 MongoDB 是一个非关系型数据库，其数据存储方式与传统的关系型数据库有所不同。在使用 MongoDB 进行数据操作时，删除和恢复数据是常见的操作。本文将介绍 MongoDB 中数据删除和恢复...

    7 个月前
  • 利用 Headless CMS 实现内容分发网络

    随着互联网的发展，越来越多的网站和应用程序需要动态地展示内容。这些内容包括文章、新闻、图片、视频等。为了更好地管理和分发这些内容，许多网站开始使用内容管理系统（CMS）。

    7 个月前
  • Express.js 中的错误处理方式解析

    在使用 Express.js 进行 Web 开发时，错误处理是非常重要的一环。在本文中，我们将详细介绍 Express.js 中的错误处理方式，包括错误处理中间件、错误对象和 HTTP 错误码。

    7 个月前
  • 使用 Flexbox 布局实现自适应导航菜单

    在前端开发中，导航菜单是一个非常常见的组件。而如何实现一个自适应的导航菜单，让它能够在不同的屏幕尺寸下都能够良好地展示，是一个需要解决的问题。本文将介绍如何使用 Flexbox 布局实现自适应导航菜单...

    7 个月前
  • 在 Kubernetes 上部署分布式 Redis 服务

    Redis 是一个开源的高性能键值存储数据库，它支持多种数据结构，包括字符串、哈希、列表、集合和有序集合。在分布式场景下，Redis 可以通过主从复制和集群模式来提高可用性和扩展性。

    7 个月前
  • Serverless 架构中的监控和报警

    随着云计算技术的发展，Serverless 架构越来越受到前端开发人员的青睐。Serverless 架构的最大优点在于无需考虑服务器的管理和维护，同时具有高可用性和弹性扩展的优势。

    7 个月前
  • Jest 测试 Redux 应用的指南

    在前端开发中，测试是一个非常重要的环节。Redux 是一个非常流行的状态管理库，因此在测试 Redux 应用时，需要使用一个强大的测试框架。Jest 是一个非常流行的 JavaScript 测试框架，...

    7 个月前

相关推荐

    暂无文章