<!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. 用好Git stash，助你事半功倍

    git stash: 用法:git stash list [<选项>] 或:git stash show [<选项>] [<stash>] 或:git stash ...

  2. Django orm 常用查询筛选总结

    本文主要列举一下django orm中的常用查询的筛选方法: 大于.大于等于 小于.小于等于 in like is null / is not null 不等于/不包含于 其他模糊查询 model: ...

  3. java继承基础详解

    java继承基础详解 继承是一种由已存在的类型创建一个或多个子类的机制,即在现有类的基础上构建子类. 在java中使用关键字extends表示继承关系. 基本语法结构: 访问控制符 class 子类名 ...

  4. OSPF多区域

    目录 一.OSPF的多区域 1.1 生成OSPF多区域的原因 1.2 路由器的类型 1.3 区域的类型 二.链路状态数据库 2.1 链路状态数据库的组成 2.2链路状态通告 三.OSPF多区域配置 四 ...

  5. MFC发送自定义消息

    1.在窗口的头文件中声明: afx_msg LRESULT OnMyMessage(WPARAM wParam, LPARAM lParam); 2.在cpp的BEGIN_MESSAGE_MAP和EN ...

  6. C++ 封装类 2 设计一个学生类 属性有姓名学号 可以给姓名 和学号赋值 可以显示学生的姓名和学号

    1 //设计一个学生类 属性有姓名学号 可以给姓名 和学号赋值 可以显示学生的姓名和学号 2 #include <iostream> 3 #include<string> 4 ...

  7. 遗传算法 TSP(Python代码)

    该代码是本人根据B站up主侯昶曦的代码所修改的. 原代码github地址:https://github.com/Houchangxi/heuristic-algorithm/blob/master/T ...

  8. Java compareTo() 方法（转载）

    Java compareTo() 方法 compareTo() 方法用于两种方式的比较: 字符串与对象进行比较. 按字典顺序比较两个字符串. 语法: int compareTo(Object o)// ...

  9. JavaScript学习07（jQuery）

    jQuery 什么是JQuery jQuery 由 John Resig 于 2006 年创建.它旨在处理浏览器不兼容性并简化 HTML DOM 操作.事件处理.动画和 Ajax. 十多年来,jQue ...

  10. MOOC大学计算机课程推荐

    转自:https://zhuanlan.zhihu.com/p/30659834  这个是大佬总结的, 大学计算机课程 以下课程是我在MOOC上找到的所有我认为讲的好的. 主要是中国大学MOOC,学堂 ...