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

创建"突出显示"像白色背景上的"信息暗"按钮效果

创建一个突出显示的按钮效果,可以使用HTML、CSS和JavaScript来实现。以下是一个简单的示例,展示了如何创建一个白色背景上的"信息暗"按钮效果:

  1. HTML代码:
代码语言: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>
   <button class="button">信息暗</button>
   <script src="scripts.js"></script>
</body>
</html>
  1. CSS代码(styles.css):
代码语言:css
复制
body {
    background-color: white;
}

.button {
    background-color: transparent;
    border: 2px solid black;
    color: black;
    font-size: 16px;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.3s;
}

.button:hover {
    background-color: black;
    color: white;
}
  1. JavaScript代码(scripts.js):
代码语言:javascript
复制
document.querySelector('.button').addEventListener('click', function() {
    alert('按钮被点击!');
});

在这个示例中,我们创建了一个带有白色背景和黑色边框的按钮。当鼠标悬停在按钮上时,按钮的背景颜色会变为黑色,文字颜色会变为白色。当用户点击按钮时,会弹出一个提示框,显示"按钮被点击!"。

这个示例使用了HTML、CSS和JavaScript,可以在任何现代浏览器中运行。

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

相关·内容

白底黑字or黑底白字,眼睛更喜欢哪一个?

(因为侧抑制现象,人们在明暗变化边界,常常在亮区看到一条更亮光带,在区看到一条更线条,这个更亮和更区域就是马赫带效应) 总体来说,侧抑制网络在信息预处理中主要功能有以下几个方面: 可以突出边缘...② 因为视觉适应原理,我们在光线充足时候阅读黑底白字信息,视觉聚焦于白色文字,黑色背景也会更,眼睛需要进行暗适应,所以会加速视觉疲劳。...③ 阅读黑底白字信息时,因为侧抑制会使白色字体更加炫目,黑色背景更加沉重,长时间浏览白色字体,会产生强烈光刺激从而产生视觉后,造成视觉疲劳。...(较长信息文本) 用户体验领域最著名先驱之一 Jacob Nielsen 经研究得出:“文字和背景应当使用高对比度配色。白底黑字能将可读性提升到最高,而黑底白字在可读性效果几乎是一样。...(注重视觉冲击力摩托车主题站) 2、文字和背景对比度 ? (黑白底色不同对比度文字显示效果背景和内容两者之间对比度和可读性是成正比,对比度越大,信息可读性就越高。

2.4K21

白底黑字 or 黑底白字,眼睛更喜欢哪一个?

) 总体来说,侧抑制网络在信息预处理中主要功能有以下几个方面: 可以突出边缘,增加反差。...② 因为视觉适应原理,我们在光线充足时候阅读黑底白字信息,视觉聚焦于白色文字,黑色背景也会更,眼睛需要进行暗适应,所以会加速视觉疲劳。...③ 阅读黑底白字信息时,因为侧抑制会使白色字体更加炫目,黑色背景更加沉重,长时间浏览白色字体,会产生强烈光刺激从而产生视觉后,造成视觉疲劳。...2、搭配效果 [ ] (单行字体效果对比) 白底黑字:传统白底黑字整体效果比较干净清爽,阅读时焦点不会第一时间落在文字,由于周围白色区域反光,读者注意力会不时发生游离。....png] (黑白底色不同对比度文字显示效果背景和内容两者之间对比度和可读性是成正比,对比度越大,信息可读性就越高。

3.1K10
  • 白底黑字or黑底白字,眼睛更喜欢哪一个?

    (因为侧抑制现象,人们在明暗变化边界,常常在亮区看到一条更亮光带,在区看到一条更线条,这个更亮和更区域就是马赫带效应) 总体来说,侧抑制网络在信息预处理中主要功能有以下几个方面: 可以突出边缘...② 因为视觉适应原理,我们在光线充足时候阅读黑底白字信息,视觉聚焦于白色文字,黑色背景也会更,眼睛需要进行暗适应,所以会加速视觉疲劳。...③ 阅读黑底白字信息时,因为侧抑制会使白色字体更加炫目,黑色背景更加沉重,长时间浏览白色字体,会产生强烈光刺激从而产生视觉后,造成视觉疲劳。...(较长信息文本) 用户体验领域最著名先驱之一 Jacob Nielsen 经研究得出:“文字和背景应当使用高对比度配色。白底黑字能将可读性提升到最高,而黑底白字在可读性效果几乎是一样。...(注重视觉冲击力摩托车主题站) 2、文字和背景对比度 ? (黑白底色不同对比度文字显示效果背景和内容两者之间对比度和可读性是成正比,对比度越大,信息可读性就越高。

    1.5K40

    苹果iOS 13 新设计规范全面解析

    模式下,系统为所有屏幕,视图,菜单和控件使用较配色,使前景内容在较背景突出。黑暗模式支持所有辅助功能。...您可能会在深色背景找到文本不易辨认地方。您可能还会发现在模式下启用“增加对比度”会导致文本和深色背景之间视觉对比度降低。...在选择浅色和深色背景下单独和组合应用色调颜色时,请查看系统配色方案以获得指导。 明智地使用颜色进行交流:当谨慎使用时,提高注意重要信息颜色力量会增强。...同样,iOS 13也提供了三种默认背景色供我们选择,包含系统背景,二级和三级背景。设计师可以在三种层级颜色中搭配来表达更好层次效果。 ? 苹果还给我们准备了一套更适合列表区域颜色组合效果。...如果您必须在模式下使用白色背景作为内容,请选择稍白色,以防止背景对周围暗色内容太刺眼。比如可以为白色背景加一些透明度,这样舒适性更好。

    4.5K40

    一键切换亮色模式和暗色模式,用Figma搞定!

    这是因为,在黑暗模式下,背景已经完全为黑色,此时在黑色背景使用100透明度灰度颜色时,你颜色会完全不可见。...将灰度颜色从“浅”模式切换为“”模式时,建议您使用白色(#FFFFFF)并在灰度上应用90%,70%,40%和10%透明度效果,这将在应用于“深色模式”时提供很好平滑过渡效果。...每个原色由两种不同颜色对比组成,第一个由较浅版本原色组成,第二个类别由较版本原色组成。如下图: 要创建较浅和较深基础色,您需要在其之上添加20%,40%和60%白色和黑色。...为了创建这些颜色阴影,我们将基础颜色透明度应用于背景。例如,对于浅色版本,我们对白色应用了10%蓝色透明度,对深色版本,我们对黑色应用了25%蓝色透明度。...它们用来描述某些重要选项卡,按钮信息块,并用于使用户专注于页面上某些元素。 阴影效果可以在亮色模式下轻松被看到,它使元素具有3D外观,使按钮浮在屏幕

    18.9K11

    如何在网页设计中实现深色模式:增强用户体验

    此外,深色模式因其可能节能特性而受到赞誉,尤其是在配备 OLED 面板设备,这些设备显示黑色像素所用功耗比亮像素要少。 网页设计中模式是什么?...文本对比:为了保持深色背景易读性,在深色模式下,文本和其他材料通常以较浅颜色呈现,例如白色或浅灰色。...深色模式界面可以通过使用深色背景和减少浅色像素数量来帮助延长移动设备电池寿命并降低笔记本电脑和台式显示能耗。 视觉焦点和注意力:您可以故意在网页使用深色模式来突出显示特定材料或方面。...设计师可以通过用深色背景包围突出元素来营造对比感和强调感。这有助于将用户注意力引导到号召性用语、重要信息或视觉资产。这可以增强用户交互并使网站导航更加用户友好。...然后,我们创建一个模式类,在其中使用适合模式值覆盖这些变量。 深色模式切换按钮 接下来,让我们创建一个切换按钮,允许用户在浅色模式和深色模式之间切换。

    21910

    纯干货!谷歌MD深色主题设计规范详解(附Sketch官方文件下载)

    背景(0dp 高程叠加) 前景(1dp 高程叠加) 主色调 次要色 在背景元素 在前景表面上元素 在主色调上元素 在次要色元素 行为 深色主题应该可以通过外在显示开关控件,来打开或者关闭...错误 不要使用外发光来替代阴影来表示高程差异,因为这种效果并不能准确地描述高程阴影投递下来效果。 ? 可访问性与对比度 深色主题下,深色必须到一定程度,才能让白色文本足够清晰地呈现。...想要创建带有品牌调性深色主题,也请在推荐深色主题基准色(#121212)基础,以低不透明度叠加层,来增加品牌调性。...错误 避免在深色主题中使用高饱和度色彩,因为它们可以在深色背景形成炫光效果。 ? 默认主题下,在顶部菜单中使用配色方案中主色。 ?...在深色背景浅色文本 当浅色文本出现在深色背景时候(这里是白色文本置于黑色背景之上),它应该遵循下面的不透明度设置规则: 最重要内容,白色文本不透明度设置为87% 中等重要内容,白色文本不透明度为

    9.7K10

    UI技巧 | 用户界面设计10个小技巧

    你可以轻松摆脱彩色背景无聊白色,并把它变成毕加索作品。(如下图) ? 1. 那么HSB中加法和减法怎么算呢?...用正片叠底代替文本阴影 设计标题组件或在图像添加文本是非常具有挑战性,特别是如果图像背景是动态(或时不时变化)。...对于一些人来说,黑白颜色叠加是一种对设计很有帮助解决方案。但是最近,我发现使用正片叠底是可以作为渐变填充混合工具使用。 ? ? 这样做要比在图像创建一个黑色背景并减少其不透明度容易得多。...此外,正片叠底效果灰度比例还能使图像其他部分保持其自然颜色,并使文本所在部分图像更一点,来提高文本可读性。 行长度 大多数设计师经常使内容长度更长,以便符合页面。...突出项目标记 最后,如果你正在创建一个类似下图列表设计,请将项目标记、符号或数字放在空白处以突出显示列表。这将使用户可读性流动不被打扰并且更清晰。 ? 来源:优设网 作者:Aa设计专题 END

    1.4K11

    最新iOS设计规范七|10大视觉规范(Visual Design)

    在深色模式下,系统为所有屏幕、视图、菜单和控件使用较色彩,并使用更具活力颜色,使前景内容在较背景突出。深色模式也支持所有辅助功能。...如果你必须在深色模式下使用白色背景作为内容,请选择稍白色,以防止背景对比周围暗色内容发光一样。...七、材质(Materials) iOS提供材质(或模糊效果)都可创建半透明效果,可唤起深度感。材质效果是为了让视图和控件能够提示背景内容,同时又不会分散前景内容。...为了产生这种效果,材质允许背景颜色信息传达到前景视图,同时模糊背景上下文以保持易读性。 当你使用系统定义材质时,你元素在每个上下文中都会很好看,因为这些效果会自动适应系统明暗模式。...使用字体粗细,大小和颜色突出显示应用程序中最重要信息。 响应文本大小更改时优先处理内容。并非所有内容都同样重要。

    8.1K30

    【设计教程】色彩与用户体验秘密:如何同配色唤起用户兴趣?

    黑暗阴影发出更多钱/富裕感觉,你可以在 Ameritrade 看到绿色。 蓝色 传递:平静,安全,开放(更浅色调),可靠性(更深色调) ? 黄色,蓝色意义根据色调大不相同。...活动设计机构 Van Vliet&Trap 巧妙运用深蓝色,通过在背景花中使用蓝色,他们在视觉提示他们在花艺设计专业知识,同时也散发信任和可靠性。...白色与西方文化中美德相关联,是与纯洁和无辜最相关颜色。 极简主义和简单网站最常使用它作为背景。跟其他颜色相比,白色是最不吸引注意力,所以它最能强调页面上其他颜色。...米色是颜色通配符,因为它主要用途是突出其他颜色。 米色很钝,虽然可以用来象征谦卑。 然而,它通常承担衬托它周围颜色特点,使其成为一个有趣设计工具。由于这些原因,米色几乎总是次要或背景颜色。...在情感反应方面,象牙色(和奶油)是白色轻微变化。 象牙色比白色更温暖,在体现同样简约和互补同时,能给人一种舒服感觉。象牙色应该被用来代替白色,以软化它和更颜色之间对比度。

    1.1K30

    Refactoring UI

    当你刻意淡化次要和辅助信息, 努力突出最重要元素时, 即使配色方案、 字体选择和布局没有改变, 效果也会立即变得更令人愉悦 # 尺寸并不代表一切 过分依赖字体大小来控制层次结构是一个错误--这往往会导致主要内容过大...或 500,取决于字体) 对于想要强调文字,可使用较重字体(600 或 700)时 # 不要在彩色背景使用灰色文字 在白色背景,让文字变成浅灰色是一个很好方法,这是因为我们看到白底灰效果实际是对比度降低了...让文字更接近背景色才真正有助于创建层次,而不是让文字变成浅灰色 使用白色文字并降低不透明度,确实降低了对比度,但往往会导致文本看起来暗淡、失色,有时甚至是残缺 在图像或图案使用这种方法意味着背景会透过文字显示出来...为您想要创建色阶选择一个基色--中间颜色,您浅色和深色色调都是基于这个颜色 对于主色和强调色来说,一个好经验法则是选择一种适合作为按钮背景色调 # 寻找边缘 最深色调通常用于文字,而最浅色调可能用于元素背景着色...聘请专业摄影师 使用高质量图片库 # 文字需要一致对比度 # 背景图像问题 照片可能非常动态,有很多非常亮区域,也有很多非常区域 要解决这个问题,需要减少图像动态效果, 使文字和背景之间对比更加一致

    76030

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

    这种设计趋势成为现代应用程序设计最高优先事项之一。一些应用程序创建者甚至根本不支持按钮使用。按钮会造成混乱并占用过多屏幕空间。 建议用滑动功能替换按钮。尝试滑动动作动画会很有帮助。...这种趋势可以与任何元素一起使用,在屏幕创建对象层次结构并帮助用户更轻松地浏览应用程序。 然后,关于3D效果,我们来聊聊。3D 是一项革命性技术。3D 图形几乎可以在任何应用程序中使用。...深色主题设计将背景变为深色模式,并使字体和其他元素变为浅色/白色。 例如,现在在 Facebook 等最受欢迎应用程序中都可以使用深色模式。切换到深色模式有助于人们减轻眼睛疲劳并更方便地浏览。...例如,宜家使用 AR 来展示一件家具在您家中不同位置外观。 8、渐变和透明元素 这个UI设计趋势是关于渐变和透明度。设计师通常在按钮和应用程序背景使用渐变。...玻璃态主要特点: 1、透明度和背景模糊; 2、透明物体细光边框; 3、分层; 4、鲜艳色彩。 9、舒适视觉效果 舒适视觉效果是大部分用户都喜欢

    1K30

    APP设计实例解析,深色模式为什么突然就火了?

    如果设置了聊天背景,聊天背景图片也会自动调,便于阅读。 虽然整体色彩加深,但微信在设计时仍保持着清晰层次。...比如置顶聊天窗口灰色会比其他窗口稍浅,聊天消息标题和摘要也采用了明度不同浅灰色来区分层级。除此之外,微信彩色线型图标在黑色背景也变得更具科技感,颜值提升了不少。...知乎在设计夜间模式时,知乎采用了主色调蓝色+深灰色搭配,深蓝和灰色作为背景,展示出效果既有强烈对比,又摆脱了深色压抑感。 与豆瓣不同,知乎文本颜色选择了对比度更低灰色,通过字重进行区分。...bilibili动画 B站刚推出深色模式时收到了许多批评,字体和背景色对比不强,视频封面仿佛蒙了一层雾,一刀切化处理,导致用户浏览体验极差。...百度网盘 高饱和度色彩会在深色背景产生炫光视觉效果,引发视觉疲劳。百度网盘深色模式下,背景接近全黑,图标却没有太大调整,给用户带来阅读体验并不好。

    1.9K50

    用PS修复老照片_photoshop修复老照片

    原图 一、打开原图素材,按Ctrl + J 把背景图层复制一层,图层混合模式改为“柔光”,效果....照片色块较多,需要慢慢涂抹,效果如图 三、新建一个图层,盖印图层,执行:滤镜 > 模糊 > 高斯模糊,数值为5,确定后按住Alt 键添加图层蒙版,用白色画笔涂抹人物脸部有杂色部分,给人物简单磨皮...八、保持选区,创建曲线调整图层,参数看图定,拉亮 九、按Ctrl + Alt + 4 调出选区,按Ctrl + Shift + I 反选,创建曲线调整图层拉,对比加大。...十、新建一个图层,盖印图层,选择加深/减淡工具,把人物额头上皱纹突出来,再用加深工具把人物衣服反白部分涂效果如图。 十一、把人物抠出来,加深较背景,如图。...十三、回到图层面板,按Ctrl + Alt + 5 调出选区,新建一个图层,填充白色。 十四、新建一个图层,盖印图层,稍微把图片调正一点,调整对比度,锐化一下,合适为主,得出最后效果图。

    2.3K20

    【设计师必看】提高Banner点击率15个设计技巧!

    确保它在视觉占主导地位,但不要价值主张或CTA那样占主导地位。 (2)价值主张 价值主张主要展示你所提供产品或服务,并通过诱人折扣和价格吸引大家注意力。...保持简单 保持内容和视觉简单,因为浏览者对网页Banner往往可能只是匆匆一瞥。 ? 5. 适当地使用按钮 根据Banner类型,按钮通常会增加广告点击率(CTR)。...使用动画 动态网页Banner广告通常比静态Banner广告效果好,而且在网页Banner设计中非常有效,但是你必须确保它们不会分散广告信息。 ? ? ?...互补,但要突出 如果你Banner能在视觉融入了网站特色,则更有可能赢得浏览者信任。然而,不要让它融入太多,会失去浏览者关注。Banner广告总是需要是突出和可点击。 ? 10....它是传统白色背景黑色文本是最易读颜色组合。 白色:纯洁,清洁,现代,贫瘠,简单,诚实,天真。白色创造了经济感和青春感觉。 棕色:自然,木材,皮革,严肃,男子气概,坚韧,谦逊。

    95510

    APP设计实例解析,深色模式为什么突然就火了?

    如果设置了聊天背景,聊天背景图片也会自动调,便于阅读。 虽然整体色彩加深,但微信在设计时仍保持着清晰层次。...比如置顶聊天窗口灰色会比其他窗口稍浅,聊天消息标题和摘要也采用了明度不同浅灰色来区分层级。除此之外,微信彩色线型图标在黑色背景也变得更具科技感,颜值提升了不少。...知乎在设计夜间模式时,知乎采用了主色调蓝色+深灰色搭配,深蓝和灰色作为背景,展示出效果既有强烈对比,又摆脱了深色压抑感。 与豆瓣不同,知乎文本颜色选择了对比度更低灰色,通过字重进行区分。...bilibili动画 B站刚推出深色模式时收到了许多批评,字体和背景色对比不强,视频封面仿佛蒙了一层雾,一刀切化处理,导致用户浏览体验极差。...百度网盘 高饱和度色彩会在深色背景产生炫光视觉效果,引发视觉疲劳。百度网盘深色模式下,背景接近全黑,图标却没有太大调整,给用户带来阅读体验并不好。

    1.5K30

    PS图层混合模式实例详解

    变暗模式导致比背景色更淡颜色从结果色中去掉,如下图,浅色图像从结果色中被去掉,被比它颜色深 背景颜色替换掉了。...5,颜色加深混合模式 颜色加深模式用于查看每个通道颜色信息,使基色变暗,从而显示当前图层混合色。在与黑色和白色混合 时,图像不会发生变化。...如下图,混合色为黑色区域均显示在结果色中, 而白色区域消失,这就是线性加深模式特点。 7,深色混合模式 深色混合模式依据当前图像混合色饱和度直接覆盖基色中调区域颜色。...基色中包含亮度信息不变, 以混合色中信息所取代,从而得到结果色。深色混合模式可反映背景较亮图像中信息表现, 信息亮部信息。...如果混合色比基色像素更亮一些,那么结果色更亮;如果混合色比基色 像素更一些,那么结果色更。这种模式实质同柔光模式相似,区别在于它效果要比柔光模式更强烈 一些。

    1.6K30

    超全可视化基础讲解,这一次,拿下色彩搭配~~

    虽然在寻求问题答案时,文本内容才是最基础和重要,但创建信息图表、图表、图形、动画GIF和其他可共享图像等视觉效果可以创造奇迹,以吸引读者对您文章或报告注意力。...结果意味着唤起一种特定情感、氛围或审美。 为什么色彩理论在可视化设计中很重要? 虽然有许多工具可以帮助我们中最缺乏艺术性的人创建引人注目的视觉效果,但图形设计任务需要更多关于设计原则背景知识。...从有效 CTA 到销售转化和营销工作,正确颜色选择可以突出显示您网站特定部分,让用户更易浏览,或者从他们点击第一刻起让他们有一种熟悉感。...以这种方式可视化颜色可以帮助您选择配色方案,如下图所示: 色彩理论轮 在为配色方案选择颜色时,色轮让您有机会通过将白色、黑色和灰色与原始颜色混合来创建更明亮、更轻亮、更柔和和更颜色。...可以专注于最重要事情:用户体验。与其关注整个网站配色方案或特定按钮或链接色调,不如确保一切都按预期运行。

    1.3K20

    CSS伪元素妙用--单标签之美

    简单来说,在背景色上方叠加一个白色半透明层 rgba(255,255,255,.2) 可以得到一个更亮颜色。...(这句话不是很严谨,假设一个元素背景是纯白颜色,叠加白色半透明层也是不会更亮) 反之,在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更颜色。...所以,我们用 before 伪元素生成一个与按钮大小一致黑色半透明层 rgba(0,0,0,.2),在 .btn:hover:before 时显示,用 after 伪元素生成一个与按钮大小一致白色半透明层...rgba(255,255,255,.2),在 .btn:active:before 时显示,就可以做到只配置一个背景底色,实现 hover 、active 明暗变化。...一个标签其实可以相当于 3 个标签来使用,而配合 CSS3 强大 3D 变换、多重背景,多重阴影等手段,让单标签作画成为了可能,下面是我仅用单个标签,实现一些动画效果: 单标签实现浏览器图标: ?

    1.6K100

    影视后期: PR 调色处理之调色工具面板介绍

    颜色面板:调色窗口配置 lumetri 范围 这里波形选择亮度 亮度波形 显示画面的亮度信息 在这里插入图片描述 在Adobe Premiere Pro中,亮度波形图是一种常见波形图类型,它显示是视频信号亮度...分量图(RGB) 用来观察红、绿、蓝三种颜色信息在画面中整体分布情况 在这里插入图片描述 分量图(RGB)在Adobe Premiere Pro中主要用于显示RGB信号波形图,以分析颜色亮度和饱和度信息...通过这些预设效果,用户可以快速地实现不同创意效果,提高调色效率。 淡化胶片:类似于降低画面对比度,少量使用可以提升电影感。 锐化:调整边缘清晰度以创建更清晰视频。...一般用于区域颜色修正,比如肤色,单一风景 在这里插入图片描述 晕影 给画面整体添加角处理 晕影是一种在画面边缘逐渐淡出、中心突出视觉效果。...它通过给画面的边缘添加亮角,以突出主题或使画面更加有层次感。 在这里插入图片描述 这种效果通常用于突出画面的中心部分,或者为画面增加一种特定氛围和风格。

    92810
    领券