AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

纯css写的各种小按钮合集，记录下来成为学习笔记

2021-12-26 177
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 纯css写的各种小按钮合集，记录下来成为学习笔记

亮起来按钮

image.png

html

<div id="neon-btn">
      <button class="btn one">Hover me</button>
      <button  class="btn two">Hover me</button>
      <button  class="btn three">Hover me</button>
</div>

css

#neon-btn {
      display: flex;
      align-items: center;
      justify-content: space-around;
      height: 100vh;
      background: #031628; 
    }
    .btn {
      border: 1px solid;
      background-color: transparent;
      text-transform: uppercase;
      font-size: 14px;
      padding: 10px 20px;
      font-weight: 300;
    }
    .one {
      color: #4cc9f0;
    }
    .two {
      color: #f038ff; 
    }
    .three {
      color: #b9e769;
    }
    .btn:hover {
      color: white;
      border: 0;
    }
    .one:hover {
      background-color: #4cc9f0;
      -webkit-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);
      -moz-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);
      box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);
    }
    .two:hover {
      background-color: #f038ff;
      -webkit-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
      -moz-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
      box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
    }
    .three:hover {
      background-color: #b9e769;
      -webkit-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
      -moz-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
      box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
    }

简单来分析一下，外层一个div框住三个按钮进行展示，通过flex布局让其并排，再调整justify-content属性来达到居中展示。分配好之后，分别上色。之后就是最重要的CSS :hover 选择器，以第一个为例，找到那个按钮hover即当鼠标滑过时产生的样式。首先背景颜色改变成按钮颜色，字体变白色，边框0直接让其有充满整个按钮的感觉。之后就是设置其阴影，为了兼容不同浏览器的引擎，所以有不同的属性，但是不管哪个属性，都一样的属性值。属性值按照自己喜好调节，展现的效果就会是亮的程度以及范围。具体哪个值调整会有什么效果，直接看文档。

填充式的按钮

image.png

html

<div id="loading-btn">
      <button><span>Hover</span></button>
</div>

css

  #loading-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
      }
      button {
        background: transparent;
        border: 0;
        border-radius: 0;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 20px;
        padding: 15px 50px;
        position: relative;
      }
      button:before {
        transition: all 0.8s cubic-bezier(0.7, -0.5, 0.2, 2);
        content: '';
        width: 1%;
        height: 100%;
        background: mistyrose;
        position: absolute;
        top: 0;
        left: 0;
      }
      button span {
        mix-blend-mode: darken;
      }
      button:hover:before {
        background: mistyrose;
        width: 100%;
      }


一看就能懂啦，主要说一下

image.png

↑没用这个属性。那么通过z-index来调整只能够要么背景盖住图片，要么图片在背景之前。亦或是改变透明度这样并不好。所以使用mix-blend-mode属性。

image.png

闪烁一下按钮

image.png

html

<div id="shiny-shadow">
  <button><span>Hover me</span></button>
</div>

css

#shiny-shadow {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        background: #1c2541;
      }
      button {
        border: 2px solid white;
        background: transparent;
        text-transform: uppercase;
        color: white;
        padding: 15px 50px;
        outline: none;
        overflow: hidden;
        position: relative;
      }
      span {
        z-index: 20;  
      }
      button:after {
        content: '';
          display: block;
          position: absolute;
          top: -36px;
          left: -100px;
          background: white;
          width: 50px;
          height: 125px;
          opacity: 20%;
          transform: rotate(-45deg);
      }
      button:hover:after {
        left: 120%;
        transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
         -webkit-transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
      }

不在赘述 巧用before 通过变幻属性来达到效果。

顺便介绍一个滚动条

html

<div class="test test-1">
          <div class="scrollbar"></div>
        <!-- 在火狐浏览器上无法实现 -->
</div>
<div class="test test-5">
          <div class="scrollbar"></div>
</div>

css

  .test {
    width   : 50px;
    height  : 200px;
    overflow: auto;
    float   : left;
    margin  : 5px;
    border  : none;
    }
    .scrollbar {
    width : 30px;
    height: 300px;
    margin: 0 auto;
    }
    .test::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
    }
    .test::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : #535353;
    }
    .test::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background   : #ededed;
    }
    /* 蓝色的滚条 */   
      .test-5::-webkit-scrollbar {
      /*滚动条整体样式*/
      width : 10px;  /*高宽分别对应横竖滚动条的尺寸 width是竖滚动条*/
      height: 1px;
      }
      .test-5::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius   : 10px;
      background-color: skyblue;
      background-image: -webkit-linear-gradient(
          45deg,
          rgba(255, 255, 255, 0.2) 25%,
          transparent 25%,
          transparent 50%,
          rgba(255, 255, 255, 0.2) 50%,
          rgba(255, 255, 255, 0.2) 75%,
          transparent 75%,
          transparent
      );
      }
      .test-5::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
      background   : #ededed;
      border-radius: 10px;
      }

image.png

写在后面

学习了bootstrap或是jquery-ui等等之后好像要达到我们想要的样式越来越容易了，但是纯css设计出来的按钮也不赖。还能巩固一些css样式的属性等等。是值得学习的

文章标签：
前端开发
关键词：
CSS按钮
CSS学习笔记
CSS按钮学习笔记
江咏之
目录
相关文章
哈你真皮
|
8天前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后，子菜单以滑动的方式依次展开
哈你真皮
45 21
杀死一只知更鸟debug
|
3月前
|
前端开发 容器
css布局-弹性布局学习笔记
这篇文章是关于CSS弹性布局的学习笔记，详细介绍了flex容器和元素的相关属性，包括flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content以及order、flex-grow、flex-shrink、flex-basis、flex和align-self等，解释了这些属性在弹性盒子布局中的作用和用法。
杀死一只知更鸟debug
59 2
游客zi3qmblbcdexu
|
3月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3（HTML--网页标签 下）
HTML/CSS/JS学习笔记 Day3（HTML--网页标签 下）
游客zi3qmblbcdexu
85 9
游客fz577umxdejsg
|
4月前
|
前端开发 UED
设计新潮流：CSS动画毛玻璃按钮，展开效果引人入胜！
设计新潮流：CSS动画毛玻璃按钮，展开效果引人入胜！
游客fz577umxdejsg
45 0
游客fz577umxdejsg
|
4月前
|
前端开发 搜索推荐 容器
创意按钮，触手可及：CSS不规则形状效果揭秘！
创意按钮，触手可及：CSS不规则形状效果揭秘！
游客fz577umxdejsg
74 0
孙飞i
|
4月前
|
前端开发
css来实现一个好玩的按钮
这段代码实现了一个具有独特悬停效果的按钮。通过定义按钮及其`:after`伪元素，并设置初始状态下的透明度和尺寸，当鼠标悬停在按钮上时，背景色平滑过渡至另一种颜色，产生视觉上的动态扩展效果。为避免覆盖文字，特地调整了伪元素的层级，确保交互过程中文字始终可见。整体效果流畅自然，增强了用户界面的互动性与美观度。
孙飞i
60 0
朝阳39
|
5月前
|
前端开发
css特效——纯css绘制图标：带框的加号（添加按钮）、三横（三道杠）、带圈点（双层圆点）
css特效——纯css绘制图标：带框的加号（添加按钮）、三横（三道杠）、带圈点（双层圆点）
朝阳39
161 5
写代码的大学生
|
6月前
|
前端开发
CSS动画（毛玻璃按钮）
CSS动画（毛玻璃按钮）
写代码的大学生
44 1
写代码的大学生
|
6月前
|
前端开发
CSS动画效果（鼠标滑过按钮动画）
CSS动画效果（鼠标滑过按钮动画）
写代码的大学生
60 1
朝阳39
|
5月前
|
前端开发 SEO
css实用技巧——最佳可访问性隐藏（网站左上角的logo，用label替代表单提交按钮）
css实用技巧——最佳可访问性隐藏（网站左上角的logo，用label替代表单提交按钮）
朝阳39
43 0