开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何使按钮与材料设计主题圆角？

要使按钮与材料设计主题圆角，首先需要了解材料设计的基本原则和圆角的设计规范。以下是实现这一目标的步骤：

基础概念

材料设计（Material Design）是由Google提出的一种视觉设计语言，它强调层次感、动态效果和直观的交互。圆角按钮是材料设计中常见的一种UI元素，通常用于表示可点击的操作。

相关优势

美观性：圆角按钮更加柔和，符合现代设计趋势。
易用性：圆角按钮更容易被用户识别为可点击的元素。
一致性：保持设计风格的一致性，提升用户体验。

类型

固定圆角：所有按钮的圆角半径相同。
动态圆角：根据按钮的状态（如悬停、按下）改变圆角半径。

应用场景

网页和移动应用中的按钮。
操作系统中的UI元素。
任何需要用户交互的界面。

实现方法

以下是使用HTML和CSS实现圆角按钮的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Material Design Rounded Button</title>
    <style>
        .rounded-button {
            background-color: #6200ea; /* Material Design purple */
            color: white;
            border: none;
            border-radius: 24px; /* 圆角半径 */
            padding: 12px 24px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .rounded-button:hover {
            background-color: #3700b3; /* 悬停时的颜色 */
        }

        .rounded-button:active {
            background-color: #1a004d; /* 按下时的颜色 */
        }
    </style>
</head>
<body>
    <button class="rounded-button">Click Me</button>
</body>
</html>

遇到的问题及解决方法

问题1：按钮圆角不明显

原因：可能是圆角半径设置得太小。 解决方法：增加border-radius的值，例如从8px增加到24px。

问题2：按钮在不同设备上显示不一致

原因：可能是由于不同设备的屏幕分辨率和DPI不同。 解决方法：使用相对单位（如em、rem）来设置圆角半径和字体大小，确保在不同设备上的一致性。

问题3：按钮悬停和按下效果不明显

原因：可能是颜色变化不够明显。 解决方法：调整悬停和按下状态下的背景颜色，使其与默认颜色有明显对比。

参考链接

通过以上步骤和方法，你可以轻松实现符合材料设计主题的圆角按钮。

相关搜索:角度材料设计与离子3:主题色不作品如何创建圆形按钮，改变它的颜色和动画材料设计主题的Android？将应用程序主题设置为材料设计并使用材料按钮后，布局预览不可见如何使材料设计在Xamarin Andriod中填充文本字段如何使按钮与搜索栏内联？如何覆盖在Android按钮中按下的材料设计状态如何使设计视图与InitializeComponent代码相对应？如何使滚动按钮与特定的视频url关联？角度材质如何使按钮的高度与输入相同如何使jquery对话框与themeroller主题一起使用？如何修复Creative Tim材料设计仪表板图表不完整的显示与材料UI动画？(增长，幻灯片etc_如何使用按钮更改网站上材料UI的主题？这就是到目前为止我所在的地方如何使按钮与Bootstrap 5中其他表单元素的高度匹配？如何设计样式使CSS按钮在不同版本的IE11中正确显示？如何使C#下拉列表和提交按钮与引导程序排成一行？如何使flexbox中的第一个按钮与第二个按钮的大小相同如何使这五个列框居中，使它们与上面的引导按钮选项卡保持一致？如何使通过更改颜色主题的复选框设置样式的切换按钮在刷新期间保持相同的颜色如何将按钮与h3标记的右侧对齐并使它们保持垂直对齐？如何使此Formik表单与自定义按钮一起工作?我无法将值获取到handleSubmit

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

值得一看！2018年最优秀的9个Android Material Design Apps!

今年4月，谷歌Gmail推出了全新的设计外观，全新的配色方案，更多的空白区域和精致的图标。也带来了Material Design 的一些改变 – Material Theming (材料主题)，旨在自定义Material Design应用程序，以更好地反映产品品牌。换句话说，开发人员可以对颜色或字体进行小的更改，并应用到整个主题中。

04

【Flutter】StatefulWidget 组件 ( 创建 StatefulWidget 组件 | MaterialApp 组件 | Scaffold 组件 )

创建空的 dart 文件 StatelessWidgetPage.dart , 导入最基础的材料设计包 ,

00

2020 年 Web 开发展望

祝大家新年快乐！由于本文的发表日期是 2020 年1月1日，所以我认为这是讨论未来的 366 天中 Web 开发的最佳时机！因为。。。是的，2020年是闰年！

01

Android5.0新特性-Material Design

2014年，Google携Android5.X重装归来，全新的UI设计和更加优化的性能，令开发者眼前一亮

02

建站四部曲之移动端篇（Android+上线）

本系列分为四篇：建站四部曲之后端接口篇（SpringBoot+上线）建站四部曲之Python数据爬虫篇(selenium) 建站四部曲之前端显示篇（React+上线）建站四部曲之移动端篇（Android+上线） ---- 零、前言本系列为了总结一下手上的知识，致敬我的2018 本篇的重点在于：后端数据在移动端的展现本篇总结的技术点：材料设计串烧、Retrofit+RxJava访问请求、MVP模式的思考、App的打包将App上传到服务器，提供下载地址、 ---- 一、材料设计的综

01

Android材料设计Material Design 开篇前言

so：项目源码：Github----Android_Material_Design_Test你看着办吧

01

五环材料管理软件MTO导入操作技巧

【补充说明】MTO导入模块针对项目使用情况进行了优化升级；导入MTO不用校验和登记编码了，系统在后台自动处理，简化了操作。

01

Flutte部件目录-Material Components 顶

底部导航栏可轻松浏览并在单次点击之间在顶层视图之间切换。 BottomNavigationBar小部件实现此组件。

04

2021React UI 库

ReactJS是当今最流行的前端开发库之一，它让我们的开发变得轻松高效，它可以轻松地和打包工具整合，同时它的第三方扩展也非常的丰富，今天我们来介绍下react组件ui库。这些UI框架通过分离重组构成React的各个组件，在React中我们只需要引入它们就可以轻松地在代码中使用它们。

02

网页设计太麻烦

Bootstrap作为针对响应式设计和移动优先的前端web开发，是当下最流行的设计框架之一。使用免费的Bootstrap UI工具包让原型设计和网页设计变得更加简单。

03

最全面！2019年最新UX设计趋势预测集锦

以下内容由Mockplus团队翻译整理，仅供学习交流，Mockplus是更快更简单的原型设计工具。

04

Android构建Material Design应用详解

长久以来。Android的UI并不算美观，以至于很多IT公司在进行界面设计的时候，为了保证双平台的统一性，强烈要求Android端的界面风格必须与iOS端一致，我认为这里非常不合理的，同一操作系统中各个应用之间的界面统一性要远比一个应用在双平台的界面统一性重要的多，只有这样，才能给使用者带来更好的用户体验。为了解决这个问题，Google公司在2014年IO大会上推出了一套全新的界面设计语言——Material Design（材料设计语言），这次Google在界面设计上确实下足了功夫，一个词，好看。并且在2015年IO大会上推出了一个Design Support库，这个库将Material Design中最具代表性的一些控件和效果进行了封装，使得开发者在不了解Material Design的情况下也可以轻松地将自己的应用Material化。

01

【译】正确使用FAB

Floating Action Button，简称FAB，作为材料设计中（众多）独特的UI元素之一，用于特定场景中基本或有推动等作用的行为中。因为在指定屏幕中，会被频繁的访问（译者注：如点击，触摸等），所以，我认为正确处理FAB的每一个细节是件很重要的事情。然而，有很多应用，并没有以材料设计指导为规范，从而错误的使用着FAB，当然，这也包括一些谷歌的自家应用（我就知道！）。

01

2022年面向前端开发人员的9个最佳UI组件库/框架

如果你参与Web开发，很可能听说过UI组件库和CSS框架。UI组件库是一组预制样式（如字体、组件或颜色），可用于快速构建网站。这些UI组件使开发人员能够创建解决常见问题的代码——例如，创建适用于所有设备的按钮和组件，或添加已经为你设计的菜单和预构建元素，这样你就不必从头开始构建它们。在本文中，我们将探索在构建下一个项目时使用UI组件库或CSS框架的主要好处，然后我们将介绍一些目前市场上免费选项的绝佳选择！

07

AngularDart Material Design 步进器顶

(adsbygoogle = window.adsbygoogle || []).push({}); function googleAdJSAtOnload() { var element = document.createElement("script"); element.src = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"; element.async = true; document.body.appendChild(element); } if (window.addEventListener) { window.addEventListener("load", googleAdJSAtOnload, false); } else if (window.attachEvent) { window.attachEvent("onload", googleAdJSAtOnload); } else { window.onload = googleAdJSAtOnload; }

02

关于Android 5.0 Lollipop（棒棒糖）你必须知道的七件事

继Android Kit-Kat之后，谷歌于周三发布了另一新系统的正式官方名称——Android Lollipop 5.0（代号：棒棒糖）。最新的摩托罗拉Nexus 6智能手机和HTC Nexus 9平板电脑上已经安装了这一新系统，但是，现阶段谷歌公司还没有对其他的用户提供这一新系统。而旧版本的Nexus设备可以在稍后的几个星期内更新为新版本的Lollipop系统。在利用了新的ART运行引擎之后，Android Lollipop的功能有了一些显著的变化。例如，用户界面更加的井然有序、支持跨平台操作、性能

06

未来Web设计的7大趋势

原文出处： Medium 译文出处：朵璞 1. 手势取代点击我们都已经忘记滚动条曾经是有多麻烦，大多数用户都得煞费苦心地把鼠标移至屏幕右侧来移动这古老的滚动条：作为一名专业人士，想必你一

05

程序员看过都说好的资源网站，你懂得！[通俗易懂]

DOOOOR是一个品鉴国外优秀设计作品，为广大设计师提供首选高端精神食粮的创意欣赏类平台。收录作品不断充实，旨在吸收国外优秀思想，培养国内设计界多风格高端人才，弘扬中国未来创意产业文化。

01

有些时候，你也许不需要使用UI框架

‍很多前端开发人员喜欢使用各种UI框架，比如bootstrap，material UI，tailwindcss等，他们希望这可以节省他们大量的时间，然而，现实却并非如此。

01

18 个漂亮的 Bootstrap 模板

本文中出现的所有日期和数字在撰写本文时都是正确的。要查找最新信息，请点击文章中的链接。

01

谷歌Chrome浏览器推出10周年之际，发布新外观

谷歌推出Chrome已经10年了。当时是谷歌推出的浏览器一个契机。Firefox变慢了， Internet Explorer一成不变，除了Opera之外，没有一个更小的挑战者获得了显著的吸引力。但这里是谷歌，它有一个为现代web构建的快速浏览器。

03

AI再颠覆材料学！微软MatterGen直接生成新材料，稳定性超SOTA模型2.9倍

先前，谷歌DeepMind的全新AI工具GNoME，成功预测出220万种晶体结构，在学术界掀起海啸级地震。

01

不懂设计的产品不是好开发

通过这篇文章，我将向大家介绍下关于设计的一些基本知识，让广大开发者在平时的开发中，可以更好的和设计、产品合作（撕逼）。

02

独立开发者必备的29个开源React后台管理模板

React Web应用程序开发管理后台可能非常耗时，这和设计所有前端页面一样重要。

01

谷歌 Flutter 1.17 发布

北京时间 7日凌晨，谷歌更新了Stable channel的新版 Flutter 1.17。谷歌透露：今年到目前为止，关闭的漏洞比打开的漏洞多，导致净减少了约800个问题。谷歌Flutter团队从231位贡献者那里合并了3,164个PR，从而修复了许多错误。

01

结构建模设计——Solidworks软件之特征成型中旋转切除与圆角倒角功能实战总结（绘制一个沉头螺丝孔）

本次博文继续学习特征成型中的旋转切除，以及圆角和倒角功能，利用旋转切除功能画一个沉头螺丝孔，并实际演示下圆角和倒角是如何使用的，同样配合实战练习，从零学习。

01

想了解材料热动力学？

自然界中发生的一切物理、化学和生物代谢反应，通常都伴随着热效应的变化，人们对热本质的认识经历了漫长曲折的探索历程。

02

16 个优秀的 Vue 开源项目

Pagekit 是一个开源的CMS，在Vue. js 和Symphony框架的帮助下构建。CMS是模块化的，所以你可以逐步扩展功能。Pagekit是在MIT许可证下发布的，因此它可以自由地修改、共享和重新发布，没有任何限制。

02

Flutte部件目录-基本部件（二）顶

支持以下图像格式：JPEG，PNG，GIF，GIF动画，WebP，WebP动画，BMP和WBMP

02

几款设计精美的常用的Flutter应用程序模板

Flutter是目前最火的移动应用开发技术，下面就推荐几款非常出色的Flutter应用模板。

04

未来 Web 设计的 7 大趋势

关于Web设计的未来趋势，我相信很多文章都有涉及。下面就让我带你总结一下哪些才是真正的预言。

01

【Flutter】ListView 列表 ( List 集合的 map 方法说明 | 垂直列表 | 水平列表 | 代码示例 )

调用 List 集合的 map 方法 , 可以遍历操作集合中的每一项 , 返回一个新的数组 ;

02

UI设计师必须知道的 iOS和Android的APP图标设计指南

尽管图标非常小，但图标会在App Store和Google Play中显示，向用户传达app的信息，并且安装后能在主屏幕上找到它，因此图标非常重要。

02

CAE仿真分析软件的发展趋势

虽然CAE仿真分析软件的功能已经相当强大，但它并不涉及各个领域。未来的发展应该具备以下功能。

03

如果拥有哈利波特的隐形衣，你想用它来干什么？

曾看过《哈利波特》系列电影的都知道，哈利有一件“祖传”的魔法道具：隐形斗篷，只要一穿上它就可以在众人面前瞬间消失，连邓布利多都很难察觉到。你还记得，哈利第一次穿上隐形衣去了哪里吗？没错！——是图书馆，真是个爱学习的好孩子啊（手动微笑）！

02

分享 16 个顶尖 Vue 开源项目，助你提升技术能力

原文链接：https://dev.to/flatlogic/top-16-vue-open-source-projects-227a

01

【新】PowerBI 报告设计思想 - 结构布局篇

很多战友问过一个问题，那就是如何设计一个PowerBI报告，对这个问题，需要一个系统化的回答，它足可以形成一个课程，该课程将完全讲述如何纯纯地构造一个PowerBI的报告，不包括对任何可视化元素的专有讲解，而是纯纯的打造一个报告。

01

建站四部曲之移动端篇（Android+上线）

有关材料设计，我写过一个系列：详见--Android材料设计Material Design 开篇前言

03

再不迁移到Material Design Components 就out啦

我们最近宣布了 Material Design Components（MDC）1.1.0 ，这是一个库更新，为您的 Android 应用程序带来了 Material Theming 、新的组件、深色主题和其他令人兴奋的功能。

03

【Flutter】顶部导航栏实现 ( Scaffold | DefaultTabController | TabBar | Tab | TabBarView )

Flutter 中的 Scaffold 组件实现了基础的材料设计 ( Material Design ) 可视化布局结构 ;

04

Elsevier发行新刊《Artificial Intelligence Chemistry》

Artificial Intelligence Chemistry是Elsevier新发行一本经过同行评审的开放获取期刊（ISSN: 2949-7477）。

09

15 个优秀的响应式 CSS 框架

响应式 Web 设计旨在为各种设备（从台式机显示器到手机）提供最佳的浏览体验。本文汇总了一些优秀的响应式 Web 设计 HTML 和 CSS 框架。这些框架都是开源的并免费的。

01

[WPF] 在 Windows 11 中处理 WindowChrome 的圆角

在直角统治了微软的 UI 设计多年以后，微软突然把直角骂了一顿，说还是圆角好看，于是 Windows 11 随处都可看到圆角设计。Windows 11 使用 3 个级别的圆角，具体取决于要应用圆角的 UI 组件及该组件相对于相邻元素的排列方式。

01

B端按钮设计指南

近两年互联网人口红利殆尽，获客成本明显提高，C端整体突飞猛进式的增长基本结束。与此同时，互联网开始赋能传统行业，企业对互联网服务需求逐年提升。今年疫情冲击之下，“新基建”迅速成为坊间热词，B端产品借势迎来了井喷式增长，也让许多设计师小伙伴有了入局B端的机会。

02

实现一个带浮动标签的输入框

现在带浮动标签的输入框也是一个很常见的东西了，在材料设计里面有一个 TextInputLayout 的控件，我们可以用它实现这个效果。但是材料设计控件的样式比较固定，并不能满足我们产品设计的脑洞。这里提供一个用属性动画实现的方法。

01

AutoJs6 – v6.2.0 – 安卓 JavaScript 自动化工具 (Auto.js 二次开发)

Android 平台支持无障碍服务的 JavaScript 自动化工具需要 Android 7.0 (API 24) 及以上克隆 (clone) 自 hyb1996/Auto.js

02

番外篇-Flutter初识三问

在Android中，您可以通过直接对view进行改变来更新视图。然而，在Flutter中Widget是不可变的，不会直接更新，而必须使用Widget的状态。

03

WordPress 3.5 发布：全新的多媒体管理功能

WordPress 3.5 版本发布，这个版本最大的改变就是一个全新的多媒体管理功能。一直以来，多媒体是 WordPress 系统的最弱的地方，所以 WordPress 开发团队听取了用户和社区多方的意见，对图片上传和相册管理功能都做出来改进，可以通过拖拽就能一次上传多张图片，并且图片的名称和属性的修改也更加方便，现在，创建相册也更见简洁，通过简单的拖拉图片顺序就可以整理相册。

02

AI日报：人工智能与新材料的发现

该方法使用人工智能来精确定位各种热老化时间表。InFLOWS AI首席运营官Jake Thiede没有参与这项研究，他在接受采访时表示：“人工智能在材料方面很有用，因为你可以虚拟化实验，以相当高的预测准确性运行数千个实验。”。

01

一文彻底搞清楚 Material Design

Material Design 是 Google 在 2014 年 I/O 大会上发布的一种新的设计规范。这种设计风格给 Android UI 设计带来了很多的变化。让页面变得美感十足。

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭