<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <div class="rbutton">

        <div class="rbutton-item"></div>

        <div class="rbutton-item"></div>

        <div class="rbutton-item"></div>

        <div class="rbutton-item"></div>

        <div class="rbutton-item"></div>

    </div>

</body>

</html>

<style>

    html,

    body {

        width: 100%;

        height: 100vh;

        padding: 0;

        margin: 0;

        background-color: #fff;

        background-image: linear-gradient( 109.6deg,  rgba(24,138,141,1) 11.2%, rgba(96,221,142,1) 91.1% );

    }

    .rbutton {

        width: 100%;

        height: 100%;

        display: flex;

        justify-content: center;

        align-items: center;

        flex-direction: row;

    }

    .rbutton-item {

        transition: .2s;

        width: 100px;

        height: 100px;

        margin: 10px;

        background-color: rgba(255, 255, 255, .1);

        ;

        border-radius: 20px;

        box-shadow:

            8px 8px 16px rgba(0, 0, 0, .3),

            inset 8px 8px 16px rgba(255, 255, 255, .3),

            inset -8px -8px 16px rgba(0, 0, 0, .3);

    }

    .rbutton-item:hover {

        transform: translateY(-2px);

        box-shadow:

            8px 8px 16px rgba(0, 0, 0, .3),

            inset 8px 8px 16px rgba(255, 255, 255, .3),

            inset -8px -8px 16px rgba(0, 0, 0, .3);

    }

    .rbutton-item:active {

        transform: scale(1.05);

        border-radius: 25px;

        box-shadow:

            4px 4px 8px rgba(0, 0, 0, .3),

            inset 4px 4px 8px rgba(255, 255, 255, .3),

            inset -4px -4px 8px rgba(0, 0, 0, .3);

    }

</style>

Document

html, body { width: 100%; height: 100vh; padding: 0; margin: 0; background-color: rgba(255, 255, 255, 1); background-image: linear-gradient(109.6deg, rgba(24, 138, 141, 1) 11.2%, rgba(96, 221, 142, 1) 91.1%) }
.rbutton { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: row }
.rbutton-item { transition: 0.2s; width: 100px; height: 100px; margin: 10px; background-color: rgba(255, 255, 255, 0.1); border-radius: 20px; box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.3), inset 8px 8px 16px rgba(255, 255, 255, 0.3), inset -8px -8px 16px rgba(0, 0, 0, 0.3) }
.rbutton-item:hover { transform: translateY(-2px); box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.3), inset 8px 8px 16px rgba(255, 255, 255, 0.3), inset -8px -8px 16px rgba(0, 0, 0, 0.3) }
.rbutton-item:active { transform: scale(1.05); border-radius: 25px; box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3), inset 4px 4px 8px rgba(255, 255, 255, 0.3), inset -4px -4px 8px rgba(0, 0, 0, 0.3) }

【CSS】按钮的更多相关文章

  1. 漂亮的CSS按钮样式集以及在线生成工具

    以前我们制作一样带带阴影.圆角或3D感的按钮都需要用图片来制作,但CSS3出来后就可以不用图片了,由于是代码写的按钮样式,在Retina上浏览依然清晰美观.虽然不错,但我们写一个阴影+质感的按钮还是挺 ...

  2. css 样式（checkbox开关、css按钮）

    checkbox开关 css .iosCheck { /* Blue edition */ } .iosCheck input { display: none; } .iosCheck i { dis ...

  3. CSS 按钮

    总结有关按钮的各种样式 ㈠基本按钮样式 看一下没有进行css样式设计时按钮的样子与进行样式设计的按钮样子 <!DOCTYPE html> <html> <head> ...

  4. css 按钮悬停效霓虹灯特效

    css 按钮悬停效霓虹灯特效 <!DOCTYPE html> <html lang="en"> <head> <meta charset=

  5. BUTTONS V. 2.0.0——CSS按钮库

    BUTTONS-V2-CSS库样式职责 CSS库样式职责分离优点 模块样式命名更清晰化 易于维护.扩展性强 动画效果——修改样式后有过度效果,默认样式 源码如下 <!DOCTYPE html&g ...

  6. css按钮自适应

    原理:利用a标签和i标签各自一个背景组合成为按钮,达到自适应. <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  7. 好看的CSS按钮

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  8. css按钮口诀 - CSS BUG顺口溜

    在进行CSS网页布局时遇到BUG,请认真阅读以下内容,非常容易记忆的,不知道哪位高人把CSS BUG编成了顺口溜了!看看好不好记住呢? 一.IE边框若显若无,须注意,定是高度设置已忘记: 二.浮动产生 ...

  9. bootstrap -- css -- 按钮

    本文中提到的按钮样式,适用于:<a>, <button>, 或 <input> 元素上 但最好在 <button> 元素上使用按钮 class,避免跨浏 ...

  10. 手写css按钮组

    css: .lf{float:left} .btn{ width:60px; height:24px; color:#fff; border-radius:4px; cursor:pointer; b ...

随机推荐

  1. 学会这十招，轻松搜索github优质项目

    大家好,我是青空. 今天我想给大家分享一下使用 GitHub 的一些心得体会.之前我是在分享 GitHub上的一些开源项目,通过这段时间的收集工作,我积累了一些相关的经验在这里分享给大家. 我做了一个 ...

  2. Tomcat7+ 弱口令 && 后台getshell漏洞

    打开tomcat管理页面http://192.168.49.2:8080/manager/html,输入弱密码tomcat:tomcat,即可访问后台 先将jsp大马压缩为zip,再将zip后缀改名为 ...

  3. 最高级的AutoHotkey重试源代码结构20191221.docx

    ;; 最高级的AutoHotkey重试源代码结构20191221.docx;; 在编写AutoHotkey脚本时经常要用到重试,; 单击控件无效时需要重新再单击,; 发送模拟按键无效时需要重新发送.; ...

  4. QML用Instantiator动态创建顶级窗口

    关键点 使用Model驱动Instantiator QML里面的hashmap: QQmlPropertyMap 上一次说到用 QQmlApplicationEngine 多次load的方式创建多个一 ...

  5. ICCV2021 | 重新思考视觉transformers的空间维度

    ​ 论文:Rethinking Spatial Dimensions of Vision Transformers 代码:https://github.com/naver-ai/pit 获取:在CV技 ...

  6. Python学习的十个阶段，学完神功大成，对应一下看看你自己在哪个阶段

    大家好,我是白云. 今天给大家整理了Python学习的十个阶段内容,看看你现在正处于哪个阶段,想学习的朋友也可以根据这个阶段规划学习. 阶段一:Python基础[ 初入江湖] Linux基础 目标: ...

  7. Jenkins自动化部署最完整教程

    1.概述 Jenkins 是一个可扩展的持续集成引擎.主要用于持续.自动地构建/测试软件项目.监控一些定时执行的任务.Jenkins用Java语言编写,可在Tomcat等流行的servlet容器中运行 ...

  8. ECDSA高性能硬件实现——算法详解与模块划分

    ECDSA全称椭圆曲线数字签名算法,它是基于素数域的椭圆曲线对信息进行加签与验签.其核心在于对信息的加签,及对加签的信息进行验签,那么下面介绍该算法流程. 假设Alice希望对消息m进行签名,并将消息 ...

  9. 为什么不建议使用WordPress呢？

    程序过于注重扩展性与动态配置解析,导致执行流程中包含大量的钩子.判断.文件加载等操作,导致执行效率偏低,对服务器要求较高.对系统的开销,尤其是CPU等部分消耗较大,据观察,单个请求在腾讯云s1主机单核 ...

  10. 初识MySQL，关系型数据库&非关系型数据库

    初识MySQL,关系型数据库&非关系型数据库 数据库的分类: 关系型数据库:(SQL) MySQL,Oracle,Sql Server,DB2,SQLlite 通过表和表之间,行和列之间的关系 ...