【CSS】按钮

<!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】按钮的更多相关文章

漂亮的CSS按钮样式集以及在线生成工具
以前我们制作一样带带阴影.圆角或3D感的按钮都需要用图片来制作,但CSS3出来后就可以不用图片了,由于是代码写的按钮样式,在Retina上浏览依然清晰美观.虽然不错,但我们写一个阴影+质感的按钮还是挺 ...
css 样式（checkbox开关、css按钮）
checkbox开关 css .iosCheck { /* Blue edition */ } .iosCheck input { display: none; } .iosCheck i { dis ...
CSS 按钮
总结有关按钮的各种样式㈠基本按钮样式看一下没有进行css样式设计时按钮的样子与进行样式设计的按钮样子 <!DOCTYPE html> <html> <head> ...
css 按钮悬停效霓虹灯特效
css 按钮悬停效霓虹灯特效 <!DOCTYPE html> <html lang="en"> <head> <meta charset=
BUTTONS V. 2.0.0——CSS按钮库
BUTTONS-V2-CSS库样式职责 CSS库样式职责分离优点模块样式命名更清晰化易于维护.扩展性强动画效果——修改样式后有过度效果,默认样式源码如下 <!DOCTYPE html&g ...
css按钮自适应
原理:利用a标签和i标签各自一个背景组合成为按钮,达到自适应. <!DOCTYPE html> <html> <head> <meta charset=&qu ...
好看的CSS按钮
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
css按钮口诀 - CSS BUG顺口溜
在进行CSS网页布局时遇到BUG,请认真阅读以下内容,非常容易记忆的,不知道哪位高人把CSS BUG编成了顺口溜了!看看好不好记住呢? 一.IE边框若显若无,须注意,定是高度设置已忘记: 二.浮动产生 ...
bootstrap -- css -- 按钮
本文中提到的按钮样式,适用于:<a>, <button>, 或 <input> 元素上但最好在 <button> 元素上使用按钮 class,避免跨浏 ...
手写css按钮组
css: .lf{float:left} .btn{ width:60px; height:24px; color:#fff; border-radius:4px; cursor:pointer; b ...

随机推荐

构建后端第5篇之---Idea 查看继承实现关系图
first question: how to show a class children class : move mousrmark to class name , Ctrl + H how t ...
js 跨域请求失败
注:错误返回:Failed to load http://xxxxxxxxxxx: No 'Access-Control-Allow-Origin' header is present on the ...
LATEX学习和IEEE Tran模板介绍
目录软件的选择 IEEE 模板下载模板正文图表格公式算法参考文献 Latex学习网站:http://www.latexstudio.net/page/tex-documents/ IEE ...
C# / vb.net 给PDF 添加可视化和不可见数字签名
本文通过C#程序代码展示如何给PDF文档添加可视化数字签名和不可见数字签名.可视化数字签名,即在PDF文档中的指定页面位置添加签名,包含相关文字信息和签名图片等:不可见数字签名,即添加签名时不在文档中 ...
Netty入门（三）：EventLoop
前言 Netty系列索引: 1.Netty入门(一):ByteBuf 2.Netty入门(二):Channel IO相关: 1.Java基础(一):I/O多路复用模型及Linux中的应用上文提到,早 ...
RHCSA_DAY11
删除逻辑卷逻辑卷的删除不允许联机操作,需要先卸载,在执行删除在执行删除操作时,首先删除LV逻辑卷,在删除VG卷组,最后删除PV物理卷删除命令:lvremove #删除逻辑卷错误示范 [root@ ...
Use Emacs as Personal Knowledge Base
http://stackoverflow.com/questions/2014636/how-to-maintain-an-emacs-based-knowledge-base
成为编程大牛很简单，把这些书看个八成就OK
原文链接:http://lucida.me/blog/developer-reading-list/ 本文把程序员所需掌握的关键知识总结为三大类19个关键概念,然后给出了掌握每个关键概念所需的入门书籍 ...
APP渗透测试之安卓APP抓包
之前说过一些信息搜集相关的东西(漏了APP没讲),按照渗透测试的完整流程,我作为测试,测个APP,也很合理吧既然能用burpsuite测试web,那就能用burpsuite测试APP(有大佬自称用b ...
Oracle 11g数据库下载安装教程
今天重装系统之后发现甲骨文的网站变化较大,下载安装废了一点时间,留下个笔记为以后再装留作参考.本教程是win10,64位系统环境下 1.下载下载的时候需要登陆甲骨文账号,如果没有的话申请一个也挺快. ...

【CSS】按钮

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

随机推荐

热门专题