分享几个精美的网页按钮样式,纯CSS实现,无JS(拿来即用)

简介: 分享几个精美的网页按钮样式,纯CSS实现,无JS(拿来即用)

点击按钮:

<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      button {
       position: relative;
       display: inline-block;
       cursor: pointer;
       outline: none;
       border: 0;
       vertical-align: middle;
       text-decoration: none;
       font-family: inherit;
       font-size: 15px;
      }
      button.learn-more {
       font-weight: 600;
       color: #382b22;
       text-transform: uppercase;
       padding: 1.25em 2em;
       background: #fff0f0;
       border: 2px solid #727bb1;
       border-radius: 0.75em;
       -webkit-transform-style: preserve-3d;
       transform-style: preserve-3d;
       -webkit-transition: background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
       transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
      }
      button.learn-more::before {
       position: absolute;
       content: '';
       width: 100%;
       height: 100%;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: #c6ccf9;
       border-radius: inherit;
       -webkit-box-shadow: 0 0 0 2px #727bb1, 0 0.625em 0 0 #ffe3e2;
       box-shadow: 0 0 0 2px #727bb1, 0 0.625em 0 0 #ffe3e2;
       -webkit-transform: translate3d(0, 0.75em, -1em);
       transform: translate3d(0, 0.75em, -1em);
       transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
      }
      button.learn-more:hover {
       background: #ffe4ce;
       -webkit-transform: translate(0, 0.25em);
       transform: translate(0, 0.25em);
      }
      button.learn-more:hover::before {
       -webkit-box-shadow: 0 0 0 2px #727bb1, 0 0.5em 0 0 #ffe3e2;
       box-shadow: 0 0 0 2px #727bb1, 0 0.5em 0 0 #ffe3e2;
       -webkit-transform: translate3d(0, 0.5em, -1em);
       transform: translate3d(0, 0.5em, -1em);
      }
      button.learn-more:active {
       background: #ffe4ce;
       -webkit-transform: translate(0em, 0.75em);
       transform: translate(0em, 0.75em);
      }
      button.learn-more:active::before {
       -webkit-box-shadow: 0 0 0 2px #727bb1, 0 0 #d1cbff;
       box-shadow: 0 0 0 2px #727bb1, 0 0 #d1cbff;
       -webkit-transform: translate3d(0, 0, -1em);
       transform: translate3d(0, 0, -1em);
      }
    </style>
  </head>
  <body>
    <button class="learn-more">> w <;;;</button>
  </body>
</html>

效果:

凹陷效果:

<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      body{
        background-color: #f0f0f0;
      }
      button {
       color: #090909;
       padding: 0.7em 1.7em;
       font-size: 18px;
       border-radius: 0.5em;
       background: #e8e8e8;
       border: 1px solid #e8e8e8;
       transition: all .3s;
       box-shadow: 6px 6px 12px #c5c5c5,
                   -6px -6px 12px #ffffff;
      }
      button:active {
       color: #666;
       box-shadow: inset 4px 4px 12px #c5c5c5,
                   inset -4px -4px 12px #ffffff;
      }
    </style>
  </head>
  <body>
    <button>T____T</button>
  </body>
</html>

效果:

开关按钮:

<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      /* 开关:滑块周围的盒子 */
      .switch {
        font-size: 17px;
        position: relative;
        display: inline-block;
        width: 3.5em;
        height: 2em;
      }
      /* 隐藏默认的HTML复选框 */
      .switch input {
        opacity: 0;
        width: 0;
        height: 0;
      }
      /* 滑块 */
      .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #B0B0B0;
        border: 1px solid #B0B0B0;
        transition: .4s;
        border-radius: 32px;
        outline: none;
      }
      .slider:before {
        position: absolute;
        content: "";
        height: 2rem;
        width: 2rem;
        border-radius: 50%;
        outline: 2px solid #B0B0B0;
        left: -1px;
        bottom: -1px;
        background-color: #fff;
        transition: transform .25s ease-in-out 0s;
      }
      .slider-icon {
        opacity: 0;
        height: 12px;
        width: 12px;
        stroke-width: 8;
        position: absolute;
        z-index: 999;
        stroke: #222222;
        right: 60%;
        top: 30%;
        transition: right ease-in-out .3s, opacity ease-in-out .15s;
      }
      input:checked + .slider {
        background-color: #222222;
      }
      input:checked + .slider .slider-icon {
        opacity: 1;
        right: 20%;
      }
      input:checked + .slider:before {
        transform: translateX(1.5em);
        outline-color: #181818;
      }
    </style>
  </head>
  <body>
    <label class="switch">
      <input type="checkbox">
      <span class="slider">
       <svg class="slider-icon" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation"><path fill="none" d="m4 16.5 8 8 16-16"></path></svg> 
      </span>
    </label>
  </body>
</html>

效果:

谢谢大家观看,T________T

目录
相关文章
|
1月前
|
数据采集 Web App开发 JavaScript
JavaScript爬虫进阶攻略:从网页采集到数据可视化
JavaScript爬虫进阶攻略:从网页采集到数据可视化
|
7天前
|
JavaScript 前端开发 iOS开发
js实用方法记录-动态加载css/js
js实用方法记录-动态加载css/js
12 0
|
12天前
|
前端开发
|
15天前
|
JSON JavaScript 前端开发
js是什么、html、css
js是什么、html、css
|
15天前
|
移动开发 前端开发
【通用CSS模板】移动端H5页面统一样式.css
【通用CSS模板】移动端H5页面统一样式.css
|
19天前
|
XML 前端开发 数据格式
css添加样式
【4月更文挑战第4天】css添加样式
20 9
|
21天前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性
N..
|
29天前
|
前端开发 容器
DIV+CSS网页布局
DIV+CSS网页布局
N..
8 0
|
1月前
|
前端开发 UED 容器
CSS3美化网页元素
CSS3美化网页元素
10 0
|
1月前
|
前端开发 开发者 UED
CSS:塑造网页外观的艺术
CSS(层叠样式表)是前端开发的核心技术之一,它负责网页的样式设计和布局。通过CSS,开发者能够控制网页元素的外观、位置以及交互效果,从而打造出美观、易用的网页界面。本文将探讨CSS的基本概念、使用技巧以及在前端开发中的重要性。

相关实验场景

更多