首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

嗨,我想在颤动中做一个扁平按钮,当我触摸它时,它会改变按钮的背景,但它不工作

嗨!对于您的需求,您可以通过以下步骤来实现在触摸时改变按钮背景的扁平按钮:

  1. HTML结构:首先,在HTML中创建一个按钮元素,可以使用<button>标签或者<div>标签来创建按钮。给按钮添加一个唯一的ID,以便在后续的CSS和JavaScript中使用。
代码语言:txt
复制
<button id="myButton">按钮</button>
  1. CSS样式:使用CSS来定义按钮的样式,包括背景颜色、边框、圆角等。为了实现扁平按钮的效果,可以去除按钮的默认样式,并设置背景颜色和过渡效果。
代码语言:txt
复制
#myButton {
  background-color: #ccc;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  transition: background-color 0.3s ease;
}

#myButton:hover {
  background-color: #999;
}
  1. JavaScript交互:使用JavaScript来实现按钮的交互效果。通过监听按钮的触摸事件,当按钮被触摸时,改变按钮的背景颜色。
代码语言:txt
复制
var myButton = document.getElementById("myButton");

myButton.addEventListener("touchstart", function() {
  myButton.style.backgroundColor = "#666";
});

myButton.addEventListener("touchend", function() {
  myButton.style.backgroundColor = "#ccc";
});

以上是一个简单的实现扁平按钮在触摸时改变背景的示例。您可以根据实际需求进行样式和交互的调整。

对于腾讯云相关产品,您可以考虑使用腾讯云的云开发服务(CloudBase)来进行前端开发和部署。CloudBase提供了一站式的云端开发平台,支持前端开发、后端开发、数据库、存储等功能,可以帮助您快速搭建和部署应用。

腾讯云云开发(CloudBase)产品介绍链接地址:https://cloud.tencent.com/product/tcb

请注意,以上答案仅供参考,具体实现方式可能因个人需求和技术栈而异。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

编写模块化CSS——BEM

然后,当我尝试不同方法开始把认为有意义东西包含在探索过程。 在这篇文章想和大家分享一下如何构建 CSS 以及为什么这样做。 希望它可以帮助你找到你喜欢方法。...当我在寻找一个出色 CSS 架构究竟在找什么 当我将不同方法拼凑在一起以形成自己习惯,我会寻找以下四个特点: 必须 立即知道编辑一个 class 是否安全,会不会干扰其他 CSS。...这是最重要,特别是当我需要在短时间内进行修改时。不想因为改变一处而破坏别的东西。 必须立即知道一个 class 放在这个伟大工程什么地方,以防止大脑过载。...必须 立即知道一个组件是否使用了 JavaScript,所以如果改变 CSS,不会意外地破坏任何组件。 在探索发现 BEM 和 命名空间 符合寻找标准。...将在下一篇文章讨论命名空间 考虑这两个方面 。 你怎么看?你有没有学到新东西?分享了学习过程有用吗?想在下面的评论中看到你想法。

2.1K70
  • 《Motion Design for iOS》(四十二)

    很喜欢Loren构建一个关于界面的东西可能不是每个人都明显喜欢喜欢每个按钮在用户按下立即切换到一个不同状态样子。绝对不会延迟。...如果想要在用户点击一个UIButton后立即运行一个动画,就不得不自己写一个简单自定义按钮类。首先,先来看一看我们要构建是什么。...当子类化一个苹果提供对象,比如UIButton做一个城市居民并确保调用super关于这些方法实现是很重要,因为我们不知道苹果在这两个方法需要运行什么代码,而且不想破坏按钮默认行为。...0.8toValue以及触摸结束1.0toValue,你就可以猜到整个动画会在用户点击按钮稍微收缩按钮尺寸,然后会在他们停止触摸弹回完整尺寸。...它是一个很有趣效果,会在用户点击按钮立即启动,它会让你界面感觉响应很快。

    35010

    双管齐下:同时设计 iOS 和 Anroid

    如果你想要在设计时候节省时间,那么用一款字体就可以,但是要和开发人员沟通在不同平台上使用对应字体。而在设计重要布局结构和使用大号字体建议你还是同时用这两种字体测试效果。...它们仅应当被用于背景,或者谨慎地在卡片上使用,不应当在警告框或者弹出框上使用,因为使用这种按钮,就会创建一层视觉深度。这种按钮填充颜色一般使用 App 主色,而下一种按钮,通常使用辅助颜色。...比如,当我点击(或者长按)想要分享、上传、复制或者删除图片时。 iOS 和 Android 用近乎相同方式解决这种问题。首先,动作表单都是出现在屏幕地步,然后在主要内容上罩上一层阴影。...iOS 动作表单没有阴影,仅仅是在原先背景上防止了一个有一定透明度灰色图案。 ? 下拉按钮 只存在于 Android 上,允许用户快速选择功能。然而,记住,这并不是 iOS 原生控件之一。...icon 设计本身就是一件有分量工作,如果你不想让 icon 设计占用你太多工作时间,推荐你使用这些在 icon8 上看见不错 icon。

    1.4K50

    手势魅力-设置一个触摸菜单

    知道,令人震惊是,尤其是当你不是第一次码代码的人,或者你只是在那里维护时候 有时候,这可能是一个吃力不讨好工作。...在这种情况下在那里是: touchstart:当你触摸DOM元素触发 touchmove:当你沿着DOM元素拖动手指触发 touchend:当你从DOM元素移除手指触发 在这些事件将使用触摸属性...它会回到开始还是结束,取决于它在哪里结束?它是否考虑到速度? 详情:我们是否正在用这个手势记住速度?你想在菜单后面加一个遮罩,当你打开时会变得越来越暗吗?...这取决于用户拖动了多少以及手指在屏幕上速度 你不知道你想知道关于 - 是超级重要部分 知道你想要了解移动触摸手势有趣部分,但是必须先介绍这一点,因为它会影响到你代码。...就这样,你有一个工作触摸式菜单!

    1.8K40

    扁平化设计开始流行啦~

    多媒体消费,不管是文本,音频还是视频,我们关注是内容。 技术素养### 手机以及平板迅速减少详细展示所有的用户资料以及明显控制。然后我们过去仍然担心一个遗漏按钮如果它不在屏幕上。...同样观察极简化画家如 Ellsworth Kelly,建筑家如Mies van der Rohe和工业设计家如Dieter Rams。 走出过去工作是有帮助扁平和最小化设计都是关于细节。...当你工作,不停问自己,“这个真的需要吗?”增加一项是如此简单,你必须常常寻找那些可以被删去或简化元素。扔掉一些你花了好多时间工作是艰难编辑是关键。...如果你用slim chevron做为后退按钮,你把放在左上角,用户也期待发现后退按钮在那。 当你在页面上放置很多特性,让每个可交互元素是一个按钮是没有意义。那些外观应该是直觉那个样子。...实际上,最近看了一些在扁平和层次在一些有趣作品。 在这个信息丰富,塞满了各种东西数字社会里。极简设计对见证者来说是振奋人心

    58340

    基础篇章:关于 React Native 之 Touchable 系列组件讲解

    hitSlop {top: number, left: number, bottom: number, right: number} 扩大了按钮外延范围 * onLayout function 当布局加载或者改变被调用...如果手指再次移回范围内,按钮会被再次激活。只要视图不能滚动,你可以来回多次这样操作。确保你传入一个常量来减少内存分配。...说了该组件官网说了,不建议使用,因为没有反馈效果,所以常用是其他三种,而且都是继承自。我们主要讲解下面是三种效果。...background 决定在触摸反馈时候显示什么类型背景接受一个有着type属性和一些基于type属性额外数据对象。...TouchableNativeFeedback.Ripple(color, borderless) - 会创建一个对象,当按钮被按下产生一个涟漪状背景,你可以通过color参数来指定颜色,如果参数borderless

    1.6K90

    基础篇章:关于 React Native 之 Touchable 系列组件讲解

    : number, bottom: number, right: number} 扩大了按钮外延范围 onLayout function 当布局加载或者改变被调用 onLongPress function...如果手指再次移回范围内,按钮会被再次激活。只要视图不能滚动,你可以来回多次这样操作。确保你传入一个常量来减少内存分配。...说了该组件官网说了,不建议使用,因为没有反馈效果,所以常用是其他三种,而且都是继承自。我们主要讲解下面是三种效果。...background 决定在触摸反馈时候显示什么类型背景接受一个有着type属性和一些基于type属性额外数据对象。...TouchableNativeFeedback.Ripple(color, borderless) - 会创建一个对象,当按钮被按下产生一个涟漪状背景,你可以通过color参数来指定颜色,如果参数borderless

    2K90

    Material Design — 按钮( Buttons)

    自上次参加完回音分享会后,下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS组件(顺便学学英语),以便今后在使用时候完全不虚...Button 按钮能传达用户触摸它们发生操作。 Buttons被按时被触发墨水扩散效果。 他们可能会显示文字,图像或两者都有。 平面按钮和浮动按钮是最常用类型。...---- 扁平按钮(Flat button) 用法 平面按钮印在材料上。 不会浮起,点击时会填充颜色。...强调在拥挤或者较大空间功能。 ? 左:页面内容多    右:为内容分界 ? 背景比较嘈杂时候使用浮动按钮 浮动按钮就像一块放在另一张纸上材料 - 点击浮起并填充颜色。 ?...例如,当聚焦一个切换按钮,焦点可能会同时显示组其他切换按钮

    3.9K160

    这四种最最常见按钮类型,设计师必须掌握

    阴影还可以加强视觉反馈——可以改变 Z 深度来模仿点击按钮移动感。按钮形状类似,阴影使用应由您视觉设计决定。如果您使用投影,请确保将这种样式应用于所有按钮类型。...最后并非最不重要一点是,幽灵按钮是视觉上多功能按钮,这意味着它们可以在不同类型背景上很好地工作使幽灵按钮适用于深色和浅色主题。...浅色和深色背景幽灵按钮 3.单一图形按钮 顾名思义,仅图标按钮是没有标签按钮仅由图标表示。...Google文档图标 当您需要呈现大量动作但由于某种原因不希望将它们堆叠在一起,仅图标按钮可以很好地工作。 设计要点 确保图标的含义对用户来说是清楚。图标的含义对用户来说应该是非常清楚。...进行可用性测试表明,当用户不理解 FAB 图标的含义,他们不会与之交互,这对您应用程序来说可能是一个关键问题。 FAB 仅用于一项操作。谷歌表示,当按下,FAB 可能包含更多相关操作。

    3.7K10

    JavaScript 编程精解 中文第三版 十五、处理事件

    该方法有时很实用,例如,你将一个按钮放在另一个可点击元素你不希望点击该按钮会激活外部元素点击行为。 下面的示例代码将mousedown处理器注册到按钮和其外部段落节点上。...即使鼠标在改变窗口尺寸在栏外侧移动,只要按住按钮,我们仍然想要更新其大小。 释放鼠标按键,我们必须停止调整栏大小。...触摸屏与鼠标的工作方式不同:没有多个按钮,当手指不在屏幕上不能跟踪手指(来模拟"mousemove"),并且允许多个手指同时在屏幕上。...鼠标事件只涵盖了简单情况下触摸交互 - 如果您为按钮添加"click"处理器,触摸用户仍然可以使用它。 但是像上一个示例可调整大小栏在触摸屏上不起作用。 触摸交互触发了特定事件类型。...使用绝对定位、固定尺寸元素,背景为黑色(请参考鼠标点击一节示例)。创建一系列此类元素,当鼠标移动,伴随鼠标指针显示它们。 有许多方案可以实现我们所需功能。

    5.6K20

    Material design无需照搬Google

    聪明品牌会沿袭Google风格,但对于想要跟上设计趋势同时保持自身品牌力量公司而言,这就不太好了。 设计新邮件app原型,我们深入考虑了这个问题。...我们要确坚持material design基于触摸、用动效表达意义、大胆地表达意图核心原则,但不能完全复制Google Now或是Inbox。...Material通过辅助色、基于饱和度色谱扩展了配色,但仍然专注于运用大片扁平色彩,并没有使用长年主宰网页设计渐变色。...于是我们选了Avenir字体,另一种跨界字体,源于无装饰Futura字体,融入了更多人文主义曲线。不像Roboto或Apple挚爱Helvetica,它不是混搭字体。...谨慎考量你app最佳交互隐喻。Google纸墨隐喻难以抗拒,这点无可否认。通过让你用户理解app行为、工作原理和各元素间关联,只有这样,才是正确选择。

    1.2K60

    Material Design —悬浮响应式按钮(Buttons: Floating Action Button)

    自上次参加完回音分享会后,下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS组件(顺便学学英语),以便今后在使用时候完全不虚...悬浮响应式按钮 悬浮响应式按钮代表一个应用中最重要操作。 悬浮响应式按钮用于促进操作。 就像在UI上方浮动圆形icon一样,它会在聚焦改变颜色,并在选择上浮。...左:默认尺寸    右:最小尺寸 悬浮响应式按钮应该放置在离手机边缘至少16dp位置,平板电脑/pc上至少需要离24dp。 ? 悬浮响应式按钮在聚焦改变颜色,在选择上浮。 ?...尝试最适合您app和按钮所在屏幕变换。 触发 悬浮响应式按钮可以简单地触发动作或在某处导航。 触摸波动动画向外扩展导致UI变化。 工具栏 浮动动作按钮可以在按下变换成工具栏。...悬浮响应式按钮可以附加到工作表内工具栏或结构元素(只要它不阻挡其他元素)。 ? 悬浮响应式按钮可以附加到薄片边缘。 ? 每个屏幕不要有多个浮动动作按钮。 ?

    5.8K90

    Android样式开发:selector篇

    不过,shape只能定义单一形状,而实际应用,很多地方比如按钮、Tab、ListItem等都是不同状态有不同展示形状。...举个例子,一个按钮背景,默认是一个形状,按下是一个形状,不可操作又是另一个形状。有时候,不同状态下改变不只是背景、图片等,文字颜色也会相应改变。...另外,selector标签下有两个比较有用属性要说一下,添加了下面两个属性之后,则会在状态改变出现淡入淡出效果,必须在API Level 11及以上才支持: android:enterFadeDuration...状态改变,新状态展示淡入时间,以毫秒为单位 android:exitFadeDuration 状态改变,旧状态消失时淡出时间,以毫秒为单位 最后,关于ListViewListItem样式,...同时,使用ListView也有些其他需要注意地方,总结如下: android:listSelector设置ListItem默认背景是透明,不管你在selector里怎么设置都无法改变背景

    2.1K30

    关于Android Auto:你需要知道全都在这了!

    最重要是,它不仅仅是让你在驾驶使用手机变得不切实际 - 主要是因为你甚至不想碰这个东西。 谷歌实施汽车模式并不完美。...因此,当我们进入新一年硬件和服务 - 充分了解即将发生事情可能会在我们关注改变我们观点 - 让我们来看看哪些有效,哪些需要改进。...你现在必须插上你手机才能工作,不过今年它会开始改变,因为无线连接终于看到了光明一天。 总的来说,无论您使用是Android Auto手机版还是内置品牌,它们体验大多相同。...正如我在深度探讨解释那样,当我不知道自己要去哪里,我会使用谷歌地图。它有更好路由,地图用户界面要好得多。当我知道自己在哪里,或者在需要获得危险(或速度陷阱)实时通知,我会使用Waze。...需要有一个选项来隐藏应用程序选择器应用程序。娱乐应用程序选择器中有六个应用程序。但我只听两个 - 当我在两者之间切换,其中一个要求我向下滚动几次。

    11.2K60

    Iphone秘密起源故事

    乔布斯告诉奥丁,“这将是一个小屏幕,只是一个触摸屏,不会有任何按钮,一切都有效果。” 他要求UI wiz进行一个使用多触点滚动虚拟通讯录演示。“很激动,”Ording说。...他和少数其他设计师花了几年时间尝试使用基于触摸用户界面,而那些在触摸屏野外年份正在取得成效。 “当我看到橡皮筋,惯性滚动,还有其他一些事情,想,”上帝,我们可以打这个电话。...“这是一个有趣材料...仍然有这个触摸敏感点击轮,右,和蓝色背光播放/暂停/下一个/上一个按钮。当您通过UI将其置于手机模式,所有的光线都会淡出并淡出橙色。...它不工作,因为你不想在手机上旋转拨号。“ 设计团队大力地尝试了一个解决方案。 “想出了一些预测性打字想法,”Bas Ording说。在屏幕底部会有一个字母表,用户将使用滚轮来选择字母。...当你触摸屏幕它会完美地跟踪你手指,你会下拉,它会拉下来。“ 那个,威廉姆森说,把钉子放在Linux荚棺木里。

    1.8K30

    按钮和复选框控件

    概述 本篇文章介绍Android SDK按钮和复选框控件。...每个状态改变,状态列表遍历从上到下,第一项相匹配的当前状态是使用选择不是基于“最佳匹配”,只是第一项满足最低标准状态,即:系统是从上往下匹配,如果匹配到一个item那么它就将采用这个item,而不是采用最佳匹配规则...android:state_enabled 设置触摸或点击事件是否可用状态,一般只在false设置该属性,表示不可用状态。...Button和EditText一样,也是TextView之类,因此也可以采用与TextView、EditText同样方式实现图文混排(这个demo在2.3SDK运行OK。...ImageButton可以作为图像按钮使用,如果想在代码修改ImageButton图像可以使用ImageButton类setImageResource或者其他类似的方法, "@+id/id_imgBtn

    1.2K20

    她教会了机器人如何移动物体

    只需按一下按钮,几个月努力工作即将进入测试阶段。在日本名古屋海绵展厅,有16支工程师参加了2017年亚马逊机器人挑战赛。他们建造机器人系统任务是从箱子取出物品并将其放入箱子。...Bauza回忆道“比赛开始时候压力很大,你只需按下开始按钮,机器人就是完全自主它会根据你程序做任何事情,你无法控制,如果有什么事情被打断了,那就这样了。”...“当我那年来到麻省理工学院开始将我在机器学习中学到工具应用于解决机器人领域实际问题,”她补充道。 两个创意本科项目让她有更多练习机会。...Bauza说:“这是机器人生涯第一次小成功。 2016年获得学士学位毕业后,她加入了助理教授Alberto Rodriguez指导MIT操作与机械实验室(称为MCube实验室)。...你意识到系统正在发挥作用,到最后感觉真是太好了!” Bauza和MCube团队其他成员在挑战赛“堆垛作业”脱颖而出。他们将继续与亚马逊合作,完善他们开发技术。

    32720

    【设计】近期发现 APP UI 设计趋势

    4、赋予图形深度 扁平化设计看多了用户会觉得很沉闷。人们喜欢看到更真实和互动内容。图形阴影和图层赋予它们 3D 效果、体积和深度,使人们可以享受更逼真的图像。...因此,在您应用程序为图形添加深度,请考虑 3D 趋势。 5、黑暗模式 暗模式是已在许多应用程序中高度使用最大设计趋势之一。最近,设计师也提供了在应用程序在标准模式和暗模式之间切换机会。...请记住,不寻常“疯狂”排版并不适合所有产品。定义文本在您应用程序具体功能。如果提供了额外信息功能,请不要对字体进行太多实验。但是,例如,在在线杂志,您可以使用各种版式,使布局更有趣。...此外,它不仅有趣而且高效。例如,宜家使用 AR 来展示一件家具在您家中不同位置外观。 8、渐变和透明元素 这个UI设计趋势是关于渐变和透明度。设计师通常在按钮和应用程序背景上使用渐变。...用户和应用程序开发人员都喜欢这种最近移动应用程序设计趋势。 移动应用程序设计不应该只是美观。应该让我们眼睛看起来更舒适。因为一整天,我们可能都会盯着屏幕看,看多了,我们会感到疲劳和眼睛疲劳。

    1K30

    自定义Linux桌面,还有这么多玩法?

    发现最简单方法是使用GNOME Tweak工具,它也被称为GNOME调整或简单调整。 在过去教程已经多次提到。在这里,列出了您可以使用此工具执行所有主要调整。...手掌底部可能会触摸触摸板,并且光标会移至屏幕上不需要位置。 键入时自动禁用触摸板可解决此问题。 ? 您还会注意到,当您按下触摸右下角以进行右键单击,什么也没有发生。...触摸板其实是没有问题,这是一项系统设置,可对没有真正右键单击按钮任何触摸板(例如旧Thinkpad笔记本电脑)禁用这种右键单击功能。两指点击可为您提供右键单击。...如果您不喜欢,可以将其关闭,然后应用程序菜单将在应用程序本身上可用。 09 配置应用程序窗口 您可以决定是否在应用程序窗口中显示最大化和最小化选项(右上角按钮)。...您也可以在左右之间改变它们位置。 ? 还有其他一些配置选项。没有用到它们,您可以自行探索。

    2.8K10
    领券