漂亮的3D按钮

最新推荐文章于 2020-11-28 05:17:06 发布

freya0608

最新推荐文章于 2020-11-28 05:17:06 发布

阅读量458

点赞数

分类专栏： HTML学习笔记文章标签： 3d

HTML学习笔记专栏收录该内容

45 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css" media="screen">
        @import url(http://fonts.googlepis.com/css?family-Arvo);
        body{
            background: #f8fcd4;
            background: -webkit-linear-gradient(to bottom,#f8fcd4 19%,#dbfacd 100%);
            background: linear-gradient(to bottom,#f8fcd4 19%,#dbfacd 100%);
            background-attachment: fixed;
        }
        body>div{
            text-align: center;
            display: block;
            width: 800px;
            margin: 50px auto;
        }
        .button-bevel{
            vertical-align: top;
            border-radius: 4px;
            border: none;
            padding: 10px 25px 12px;
        }
        .button-bevel:active{
            position: relative;
            top: 5px;
        }
        .button-bevel.orange{
            box-shadow: #c46d00 0 6px 0,rgba(0,0,0,0.3) 0 10px 3px;
        }
        .button-bevel.orange:active{
            box-shadow: #c46d00 0 3px 0,rgba(0,0,0,0.2) 0 6px 3px;
        }
        .button-bevel span{
            font-family: 'EntypoRegular';
            font-size: 20px;
            font-weight: normal;
            vertical-align: middle;
            line-height: 0;
            margin-right: 0.1em;
        }
        .refresh:after{content: "h";font-size: 34px}
        .shuffle:after{content: "f";font-size: 34px}
        .preview:after{content: "h";font-size: 34px}
        .tea:after{content: "h";font-size: 34px}
        .wifi:after{content: "h";font-size: 34px}
        .locator:after{content: "h";font-size: 34px}


    </style>
</head>
<body>
<div data-for="beveled">
    <div>
        <a href="javascript:void(0)" class="button-bevel orange">
            <span class="refresh"></span>refresh</a>
        <a href="javascript:void(0)" class="button-bevel orange">
            <span class="shuffle"></span>shuffle</a>
        <a href="javascript:void(0)" class="button-bevel orange">
            <span class="preview"></span>preview</a>
        <a href="javascript:void(0)" class="button-bevel orange">
            <span class="tea"></span>tea</a>
        <a href="javascript:void(0)" class="button-bevel orange">
            <span class="wifi"></span>wifi</a>
        <a href="javascript:void(0)" class="button-bevel orange">
            <span class="locator"></span>locator</a>
    </div>
</div>
</body>
</html>

这里写图片描述

freya0608

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
漂亮的3D按钮

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css" media="screen"> @import url(http://fonts.googlepis.com/css?family-Arvo);
复制链接

扫一扫