<!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. 什么是ETL--ETL定义、过程和工具选型思路

    ETL代表"提取.转换和加载".ETL 过程在数据集成策略中起着关键作用.ETL允许企业从多个来源收集数据并将其整合到一个集中的位置.ETL还使不同类型的数据可以协同工作. 概述 ...

  2. 【小工具系列】Python + OpenCV 图片序列转换成视频

    图片序列转换成视频 最近一直在找一个工具,能够将一堆图片转化成视频.网上找了一些小软件,还有 win10 的照片自带的视频制作功能,都不是很满意. 又不想下载那些专业的视频剪辑软件大材小用. 然后找到 ...

  3. 监控实战之Prometheus

    author:JevonWei 版权声明:原创作品 目录 一 背景 二 部署Prometheus Server Prometheus 主配置文件 targets 节点配置文件 rules 告警规则 运 ...

  4. IOS真机调试找不到设备:ERROR: Could not connect to lockdownd, error code -[x]

    报错信息: Could not connect to lockdownd, error code -3 解决方法:修改var/db/lockdown文件夹的读写权限 在终端找到文件夹cd var/db ...

  5. Dapr 客户端 搭配 WebApiClientCore 玩耍服务调用

    使用Dapr 客户端 处理服务调用,需要遵循的他的模式,通常代码是这个样子的: var client = DaprClient.CreateInvokeHttpClient(appId: " ...

  6. Java面向对象15——内部类

    内部类(了解) 成员内部类  package oop.demon01.demon10; ​ public class Outer { ​     private int id = 10;     pu ...

  7. 7.算法竞赛中的常用JAVA API ：String 、StringBuilder、StringBuffer常用方法和区别（转载）

    7.算法竞赛中的常用JAVA API :String .StringBuilder.StringBuffer常用方法和区别 摘要 本文将介绍String.StringBuilder类的常用方法. 在j ...

  8. Spark的两种核心Shuffle详解

    在 MapReduce 框架中, Shuffle 阶段是连接 Map 与 Reduce 之间的桥梁, Map 阶段通过 Shuffle 过程将数据输出到 Reduce 阶段中.由于 Shuffle 涉 ...

  9. WPF自定义控件一：StackPanel 控件轮播

    实现效果 带定时器的轮播图 using引用 using System.Windows; using System.Windows.Controls; using System.Windows.Mark ...

  10. Java EE-下载安装eclipse并设置环境变量的步骤

    1.下载eclipse: 官网:https://www.eclipse.org/downloads/ (1)点击链接后显示如图 (2)点击Download Packages 下载安装包,不要点击&qu ...