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

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

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>

CSS代码（styles.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;
}

JavaScript代码（scripts.js）：

document.querySelector('.button').addEventListener('click', function() {
    alert('按钮被点击！');
});

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

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

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

有帮助

没帮助

相关·内容

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

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

1.1K4 0

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

2.1K2 1

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

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

2.8K1 0

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

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

4.4K4 0

一键切换亮色模式和暗色模式，用Figma搞定！

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

17.1K1 1

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

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

9.5K1 0

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

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

1.4K1 1

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

1.1K3 0

Refactoring UI

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

3533 0

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

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

9723 0

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

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

2.2K2 0

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

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

8851 0

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

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

1.8K5 0

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

1.4K3 0

PS图层混合模式实例详解

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

1.5K3 0

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

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

1.2K2 0

Bootstrap基础学习笔记

在指定屏幕大小下显示【常用背景颜色】 .bg-primary 重要的背景颜色 .bg-success 执行成功背景颜色 .bg-info 信息提示背景颜色 .bg-warning 警告背景颜色 .....text-secondary 副标题 .text-white 白色文本（白色背景上看不清楚） .text-dark 深灰色文字 .text-light 浅灰色文本（白色背景上看不清楚）【表格标签...时会创建水平滚动条，如果可视区域宽度大于 992px 则显示不同效果（没有滚动条）,示例: .table-responsive....jumbotron 创建一个大的灰色的圆角背景框 .jumbotron-fluid 创建全屏的没有圆角的背景框【信息提示】 .alert 基类 .alert-{success、info、warning....progress-bar-striped 定义带条纹的进度条 .progress-bar-animated 动画显示进度条，必需和progress-bar-striped结合使用，不然看不到动画效果

4.8K3 1

颜色革命（下）

色块型设计，其实就是镂刻工艺在移动产品上的运用，图片一般采用主色打底，图样空心的形式，以色块的“实”来极力突出主题颜色与品牌形象，形成用户视觉的“地毯式轰炸”。...线条型设计，其实就是雕花工艺在移动产品中的扁平化运用，体现的是设计的另一极——虚，这一类图形设计力求简洁干净、清新自然，多以白色打底，图样实心化，用颜色实体图形突出图像效果，一般情况下，图样主色也即APP...另外，对于个人信息类页面，信息以列表显示为主，所以保持了与主流APP相关功能页的相识设计，只是将图标用主题色铺色。...而在此间隔线之下，设计者并没有急于将正文内容填上，而是加入了一条44px（这是一个神奇的数字，设计者应该多加运用）的浅灰色分隔条，由于导航条与内容单元格的背景色均是白色，因此区分效果也足够明显。...在CMF的选色过程中，对于数值内容的显示，最开始只有三种颜色——橙黄色、黑色、白色。这样虽然页面颜色效果足够统一，但也不免单调死板。

6133 0

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.6K10 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

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

相关·内容

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

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

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

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

一键切换亮色模式和暗色模式，用Figma搞定！

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

最新iOS设计规范七｜10大视觉规范（Visual Design）

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

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

Refactoring UI

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

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

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

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

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

PS图层混合模式实例详解

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

Bootstrap基础学习笔记

颜色革命（下）

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

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐