<!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. [SqlServer] 理解数据库中的数据页结构

    这边文章,我将会带你深入分析数据库中 数据页 的结构.通过这篇文章的学习,你将掌握如下知识点: 1. 查看一个 表/索引 占用了多少了页. 2. 查看某一页中存储了什么的数据. 3. 验证在数据库中用 ...

  2. 01MATLAB导论

    MATLAB语言的主要功能 数值计算 符号计算 图形绘制 程序流程控制 工具箱 课程的学习目标 要求理解MATLAB功能实现的数学背景与算法原理 掌握利用MATLAB进行问题求解的基本规律 能够利用M ...

  3. Linux下Nginx基础应用

    Nginx简介: Nginx ("engine x") 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器.其将源代码以类BSD许可证的形式发布,因 ...

  4. vscode配置及插件

    编辑vue时候的用户配置 { "workbench.colorTheme": "Solarized Dark", // 主题 "editor.dete ...

  5. 几百行代码写个Mybatis，原理搞的透透的！

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 Mybatis 最核心的原理也是它最便于使用的体现,为什么这说? 因为我们在使用 M ...

  6. SpringCloud升级之路2020.0.x版-3.Eureka Server 与 API 网关要考虑的问题

    本系列为之前系列的整理重启版,随着项目的发展以及项目中的使用,之前系列里面很多东西发生了变化,并且还有一些东西之前系列并没有提到,所以重启这个系列重新整理下,欢迎各位留言交流,谢谢!~ 之前我们提到了 ...

  7. Apereo CAS 4.1 反序列化命令执行漏洞

    命令执行 java -jar apereo-cas-attack-1.0-SNAPSHOT-all.jar CommonsCollections4 "touch /tmp/success&q ...

  8. 大数据学习（15）—— B+树和LSM

    这一节介绍数据库存储引擎常用的两种数据结构.作为关系型数据库的代表,MySql的InnoDB使用B+树来存储索引.作为NoSQL的代表,HBase使用的LSM树,我们来看看两者有什么区别. B+树 B ...

  9. ASPX页面传参中文乱码处理

    前端 function() { var msg='这是一段中文参数'; window.location.href="New.aspx?name="+escape(msg); } 后 ...

  10. 指向结构的指针 struct结构名称 *结构指针变量名

    //指向结构的指针 struct结构名称 *结构指针变量名 //(*结构指针变量名).成员变量名//结构指针变量->成员变量名 1 #include<stdio.h> 2 #incl ...