1. Toy模板网首页
  2. > Toy博客

分享一组真实的按钮

9月前 作者：timi先生 分类：Toy博客 阅读(28) 违法举报

这篇具有很好参考价值的文章主要介绍了分享一组真实的按钮。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

先看效果图：
分享一组真实的按钮
再看代码：文章来源地址https://www.toymoban.com/news/detail-468855.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发光的按钮</title>
  <style>
    * {
      border: 0;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    :root {
      /* 按钮 */
      --hue: 223;
      --sat: 10%;
      /* 白色 */
      --hue2: 223;
      --sat2: 90%;
      --light2: 60%;
      /* 其他 */
      --primary: hsl(var(--hue2),var(--sat2),var(--light2));
      --trans-dur: 0.3s;
      --trans-timing: ease-in-out;
      --trans-timing2: cubic-bezier(0.42,-1.84,0.42,1.84);
      --trans-timing3: cubic-bezier(0.42,0,0.42,1.84);
      font-size: 20px;
    }
    body,
    button {
      font: 1em/1.5 sans-serif;
    }
    body {
      height: 100vh;
      transition:
              background-color var(--trans-dur),
              color var(--trans-dur);
    }
    main {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
    }

    /* 白 */
    .col {
      background-image: linear-gradient(hsl(var(--hue),var(--sat),90%),hsl(var(--hue),var(--sat),75%));
      display: flex;
      flex: 1;
      padding: 1.5em 0;
      min-height: 13em;
    }
    .btn {
      background-color: transparent;
      background-image: linear-gradient(hsl(var(--hue),var(--sat),80%),hsl(var(--hue),var(--sat),85%));
      border-radius: 50%;
      box-shadow:
              0 0 0 0.125em hsla(var(--hue2),var(--sat2),50%,0),
              0 0 0.25em hsl(var(--hue),var(--sat),55%) inset,
              0 0.125em 0.125em hsl(var(--hue),var(--sat),90%);
      cursor: pointer;
      margin: auto;
      outline: transparent;
      position: relative;
      width: 10em;
      height: 10em;
      transition: box-shadow var(--trans-dur) var(--trans-timing);
      -webkit-tap-highlight-color: transparent;
    }
    .btn:focus-visible {
      box-shadow:
              0 0 0 0.125em hsla(var(--hue2),var(--sat2),50%,1),
              0 0 0.25em hsl(var(--hue),var(--sat),55%) inset,
              0 0.125em 0.125em hsl(var(--hue),var(--sat),90%);
    }
    .btn:before,
    .btn:after {
      border-radius: inherit;
      content: "";
      display: block;
      position: absolute;
    }
    .btn:before {
      background-image: linear-gradient(hsl(var(--hue),var(--sat),90%),hsl(var(--hue),var(--sat),80%));
      box-shadow: 0 0.75em 0.75em 0.25em hsla(var(--hue),0%,0%,0.3);
      top: 1.5em;
      left: 1.5em;
      width: 7em;
      height: 7em;
      transition:
              box-shadow var(--trans-dur) var(--trans-timing2),
              transform var(--trans-dur) var(--trans-timing2);
    }
    .btn:after {
      background-color: hsl(var(--hue),var(--sat),75%);
      background-image: linear-gradient(hsla(var(--hue),var(--sat),90%,0),hsl(var(--hue),var(--sat),90%));
      box-shadow:
              0 0.0625em 0 hsl(var(--hue),var(--sat),90%) inset,
              0 -0.0625em 0 hsl(var(--hue),var(--sat),90%) inset,
              0 0 0 0 hsla(var(--hue2),var(--sat2),var(--light2),0.1) inset;
      top: 3em;
      left: 3em;
      width: 4em;
      height: 4em;
      transition:
              background-color var(--trans-dur) var(--trans-timing),
              box-shadow var(--trans-dur) var(--trans-timing),
              transform var(--trans-dur) var(--trans-timing2);
    }
    .btn__icon {
      display: block;
      position: absolute;
      top: calc(50% - 0.75em);
      left: calc(50% - 0.75em);
      width: 1.5em;
      height: 1.5em;
      transition: filter var(--trans-dur) var(--trans-timing);
      z-index: 1;
    }
    .btn__icon g {
      stroke: hsl(var(--hue),var(--sat),70%);
      transition: stroke var(--trans-dur) var(--trans-timing);
    }
    .btn__sr {
      overflow: hidden;
      position: absolute;
      width: 1px;
      height: 1px;
    }
    .btn[aria-pressed="true"]:before,
    .btn[aria-pressed="true"]:after,
    .btn[aria-pressed="true"] .btn__icon {
      transform: scale(0.98);
    }
    .btn[aria-pressed="true"]:before {
      box-shadow: 0 0.375em 0.375em 0 hsla(var(--hue),0%,0%,0.3);
      transition-timing-function: var(--trans-timing3);
    }
    .btn[aria-pressed="true"]:after {
      background-color: hsl(var(--hue),var(--sat),90%);
      box-shadow:
              0 0.0625em 0 hsla(var(--hue2),var(--sat2),var(--light2),0.5) inset,
              0 -0.0625em 0 hsla(var(--hue2),var(--sat2),var(--light2),0.5) inset,
              0 0 0.75em 0.25em hsla(var(--hue2),var(--sat2),var(--light2),0.1) inset;
      transition-timing-function: var(--trans-timing), var(--trans-timing), var(--trans-timing3);
    }
    .btn[aria-pressed="true"] .btn__icon {
      filter: drop-shadow(0 0 0.25em var(--primary));
    }
    .btn[aria-pressed="true"] .btn__icon g {
      stroke: var(--primary);
    }

    /* 黑 */
    .col--dark {
      background-image: linear-gradient(hsl(var(--hue),var(--sat),20%),hsl(var(--hue),var(--sat),5%));
    }
    .col--dark .btn {
      background-image: linear-gradient(hsl(var(--hue),var(--sat),10%),hsl(var(--hue),var(--sat),15%));
      box-shadow:
              0 0 0 0.125em hsla(var(--hue2),var(--sat2),50%,0),
              0 0 0.25em hsl(var(--hue),var(--sat),5%) inset,
              0 0.125em 0.125em hsl(var(--hue),var(--sat),25%);
    }
    .col--dark .btn:focus-visible {
      box-shadow:
              0 0 0 0.125em hsla(var(--hue2),var(--sat2),50%,1),
              0 0 0.25em hsl(var(--hue),var(--sat),5%) inset,
              0 0.125em 0.125em hsl(var(--hue),var(--sat),25%);
    }
    .col--dark .btn:before {
      background-image: linear-gradient(hsl(var(--hue),var(--sat),20%),hsl(var(--hue),var(--sat),10%));
      box-shadow: 0 0.75em 0.75em 0.25em hsla(var(--hue),0%,0%,0.7);
    }
    .col--dark .btn:after {
      background-color: hsl(var(--hue),var(--sat),10%);
      background-image: linear-gradient(hsla(var(--hue),var(--sat),20%,0),hsl(var(--hue),var(--sat),20%));
      box-shadow:
              0 0.0625em 0 hsl(var(--hue),var(--sat),25%) inset,
              0 -0.0625em 0 hsl(var(--hue),var(--sat),25%) inset,
              0 0 0 0 hsla(var(--hue2),var(--sat2),var(--light2),0.1) inset;
    }
    .col--dark .btn__icon g {
      stroke: hsl(var(--hue),var(--sat),5%);
    }
    .col--dark .btn[aria-pressed="true"]:before {
      box-shadow: 0 0.375em 0.375em 0 hsla(var(--hue),0%,0%,0.7);
    }
    .col--dark .btn[aria-pressed="true"]:after {
      background-color: hsl(var(--hue),var(--sat),20%);
      box-shadow:
              0 0.0625em 0 hsla(var(--hue2),var(--sat2),var(--light2),0.5) inset,
              0 -0.0625em 0 hsla(var(--hue2),var(--sat2),var(--light2),0.5) inset,
              0 0 0.75em 0.25em hsla(var(--hue2),var(--sat2),var(--light2),0.1) inset;
    }
    
    @media (min-width: 768px) {
      main {
        flex-direction: row;
      }
    }
  </style>
</head>
<body>
<main>
  <div class="col">
    <button id="btn1" class="btn" type="button" aria-pressed="false">
      <svg class="btn__icon" viewBox="0 0 24 24" width="24px" height="24px" aria-hidden="true">
        <g stroke="currentColor" stroke-width="2" stroke-linecap="round">
          <polyline points="12,1 12,10" />
          <circle fill="none" cx="12" cy="13" r="9" stroke-dasharray="49.48 7.07" stroke-dashoffset="10.6" />
        </g>
      </svg>
      <span class="btn__sr">Power (Light)</span>
    </button>
  </div>
  <div class="col col--dark">
    <button id="btn2" class="btn" type="button" aria-pressed="false">
      <svg class="btn__icon" viewBox="0 0 24 24" width="24px" height="24px" aria-hidden="true">
        <g stroke="currentColor" stroke-width="2" stroke-linecap="round">
          <polyline points="12,1 12,10" />
          <circle fill="none" cx="12" cy="13" r="9" stroke-dasharray="49.48 7.07" stroke-dashoffset="10.6" />
        </g>
      </svg>
      <span class="btn__sr">Power (Dark)</span>
    </button>
  </div>
</main>
</body>
<script>
  window.addEventListener("DOMContentLoaded",() => {
    const b1 = new OnOffButton("#btn1");
    const b2 = new OnOffButton("#btn2");
  });

  class OnOffButton {
    constructor(el) {
      this.el = document.querySelector(el);
      this.el?.addEventListener("click",this.power.bind(this));
    }
    power() {
      const pressed = this.el?.getAttribute("aria-pressed") === "true";
      this.el?.setAttribute("aria-pressed",`${!pressed}`);
    }
  }
</script>
</html>

到了这里，关于分享一组真实的按钮的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • AIGC 360全景图 效果图材质替换

    AIGC 360全景图 效果图材质替换

    首先感叹一下AIGC的效果，如下图所示 AUTOMATIC1111 WebUI Prompts Positive and Negative提示词 LoRa 插件 LoRa: LatentLabs360 on CivitAI ControlNet 插件 Deep-checkpoints模型文件地址 Lora-Script 训练脚本 Panorama-Viewer查看全景图插件 网络问题自己搭梯子，一些安装环境可以调整（gradio==3.16.2） 感谢 秋葉

    2024年02月09日
    浏览(50)
  • 利用ArcGIS Pro制作三维效果图

    利用ArcGIS Pro制作三维效果图

    1、新建工程 打开Arcgispro，新建工程，这里我们要用到的模板为全局场景。 这里添加的数据需要有一个字段内容是数值的，这个字段也是接下来要进行拉伸的字段。 3、高度拉伸 数据添加进来后，如下图所示，这时图层处于2D图层里。 这时我们点中该图层，回到菜单栏，点击

    2024年02月16日
    浏览(50)
  • 数据可视化：随时间变化的效果图

    数据可视化：随时间变化的效果图

    获取北京、上海、江苏、广东四省的2008—2012年的GDP数据 在Jupyter Notebook上实现代码如下：

    2023年04月12日
    浏览(45)
  • 炫云云渲染3ds max效果图渲染教程

    炫云云渲染3ds max效果图渲染教程

    很多人在第一次使用炫云云渲染渲染效果图的时候不知道怎么使用，其实现在使用炫云渲染效果图真的很简单，我们一起来看看。 一客户端安装 1、打开炫云云渲染官网，点击右上角的客户端下载，选择炫云客户端（NEXT版），进入下载页面下载客户端。 2、客户端下载下来后

    2024年02月07日
    浏览(41)
  • 微信小程序实现输入车牌号码的功能（附效果图）

    微信小程序实现输入车牌号码的功能（附效果图）

    实现用户输入车牌的功能 可以输入 正常车牌以及新能源车牌 1 . wxml 文件

    2024年02月11日
    浏览(79)
  • uniapp图片放大缩小预览，并支持图片拖动附效果图

    uniapp图片放大缩小预览，并支持图片拖动附效果图

    效果图： 放大缩小和拖动是根据 movable-area 组件来实现的，小程序和uniapp都支持这个组件。 movable-area | 微信开放文档 微信开发者平台文档 https://developers.weixin.qq.com/miniprogram/dev/component/movable-area.html 实现思路： 默认显示默认大小的图片，点击图片执行yulan事件从而显示放大缩

    2024年02月11日
    浏览(50)
  • 3d效果图的应用场景和3d渲染的发展前景

    3d效果图的应用场景和3d渲染的发展前景

    3D效果图一直都是视觉行业非常重要的一部分，它在不同领域都有广泛应用，通过效果图，设计师能够准确展示设计方案，方便沟通。本文将深入分析3D效果图在不同场景中的应用和未来发展趋势。 1、建筑领域 在建筑领域中，3D效果图被用于房屋、商场和酒店等的设计，通过

    2024年01月23日
    浏览(59)
  • 运用pyecharts制作可视化大屏（代码展示及效果图-动图）

    运用pyecharts制作可视化大屏（代码展示及效果图-动图）

    一、Matplotlib绘图 折线图 import matplotlib.pyplot as plt # 调用画图库 plt.rcParams[\\\'font.sans-serif\\\'] = [\\\'SimHei\\\'] # 设置成可以显示中文，字体为黑体 plt.figure( figsize =(12,8)) # 调整图片尺寸 x = [\\\'周一\\\',\\\'周二\\\',\\\'周三\\\',\\\'周四\\\',\\\'周五\\\',\\\'周六\\\',\\\'周日\\\'] # 设置x轴数据 y = [401,632,453,894,775,646,1207] # 设置对应

    2024年02月05日
    浏览(47)
  • 如何解决3d max渲染效果图全白这类异常问题？

    如何解决3d max渲染效果图全白这类异常问题？

    通过3d max渲染效果图时，经常会出现3Dmax渲染效果图全黑或是3Dmax渲染效果图全白这类异常问题。可能遇到这类问题较多的都是新手朋友。不知如何解决。 3dmax渲染出现异常的问题，该如何高效解决呢？今天小编这里整理几项知识点，大家可以快快一起看起来！ 1、相机的位置

    2024年01月17日
    浏览(89)
  • echarts看板效果图：流光折线图、3d柱状图、3d饼图、3d地图

    echarts看板效果图：流光折线图、3d柱状图、3d饼图、3d地图

    现在展厅的大看板是越花里胡哨越好，不过真的挺难做的。好在可以百度找到一些大神的作品进行参考。 下面的内容都是基于 echarts 5.3.3 和 vue3 。另外demo都是参考别人的案例。 效果图 代码 本质上是两条线组合在一起的，一条是静态的线条，一条是动态的线条。相关属性都

    2024年02月06日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包