使用CSS3制作幽灵按钮

最新推荐文章于 2021-06-19 14:49:53 发布
最新推荐文章于 2021-06-19 14:49:53 发布
阅读量1.8k 收藏 4
点赞数 1
分类专栏： 常用效果 文章标签： CSS3 CSS3按钮 按钮 幽灵按钮
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sinat_38328891/article/details/79612060
版权

使用CSS3制作幽灵按钮

1、什么是幽灵按钮

    透明按钮，顾名思义，就是在设计网页按钮时，不再设计复杂色彩、样式和纹理，
    而是外仅以线框示意轮廓，内只用文字示意功能，背景透出，与整个页面/背景合而为一的设计方式。
    国外的设计师称之为“幽灵按钮”（Ghost Buttons），盛赞这种按钮通透简约，
    贴合整体风格又不失神韵，别具魅力。这种按钮的设计早已有之，但是在iOS和安卓双双风格转向之后， 
    它携了扁平之风雷，成了网页设计的新趋势。

幽灵按钮设计相关案例

2、幽灵按钮基础DEMO（基础html样式）

幽灵按钮制作图示

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>幽灵按钮html基础样式制作</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        body{
            background:#313031;
        }
        .container{
            width:800px;
            height:300px;
            margin:100px auto;
        }
        .link{
            display:inline-block;
            width:180px;
            height:300px;
            margin-left:60px;
        }
        .img{
            width:100%;
            height:200px;
        }
        .link_one .img{
            background:url("images/mission.png") no-repeat center center;
        }
        .link_two .img{
            background:url("images/play.png") no-repeat center center;
        }
        .link_three .img{
            background:url("images/touch.png") no-repeat center center;
        }
        .btn{
            display:block;
            width:180px;
            height:50px;
            border:2px solid rgba(255,255,255,0.7);
            margin:10px auto;
            line-height:50px;
            text-decoration:none;
            color:#2DCB70;
            padding-left:20px;
            box-sizing:border-box;
            -webkit-box-sizing:border-box;
            -o-box-sizing:border-box;
            -moz-box-sizing:border-box;
            font-weight:bold;
            font-size:18px;
            text-transform:uppercase;
            font-family:Arial;
            background:url('images/allow.png') no-repeat 130px center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="link link_one">
            <p class="img"></p>
            <a href="javascript:void(0)" class="btn">
                MISSION
            </a>
        </div>
        <div class="link link_two">
            <p class="img"></p>
            <a href="javascript:void(0)" class="btn">
                PLAY
            </a>
        </div>
        <div class="link link_three">
            <p class="img"></p>
            <a href="javascript:void(0)" class="btn">
                TOUCH
            </a>
        </div>
    </div>
</body>
</html>

3、幽灵按钮基础DEMO（基础html样式+CSS3动画）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>幽灵按钮动画添加</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        body{
            background:#313031;
        }
        .container{
            width:800px;
            height:300px;
            margin:100px auto;
        }
        .link{
            display:inline-block;
            width:180px;
            height:300px;
            margin-left:60px;
        }
        .img{
            width:100%;
            height:200px;
            transition:all 0.3s ease-out;
            -moz-transition:all 0.3s ease-out;
            -o-transition:all 0.3s ease-out;
            -webkit-transition:all 0.3s ease-out;
        }
        .link_one .img{
            background:url("images/mission.png") no-repeat center center;
        }
        .link_two .img{
            background:url("images/play.png") no-repeat center center;
        }
        .link_three .img{
            background:url("images/touch.png") no-repeat center center;
        }
        .btn{
            display:block;
            width:180px;
            height:50px;
            border:2px solid rgba(255,255,255,0.7);
            margin:10px auto;
            line-height:50px;
            text-decoration:none;
            color:#2DCB70;
            padding-left:20px;
            box-sizing:border-box;
            -webkit-box-sizing:border-box;
            -o-box-sizing:border-box;
            -moz-box-sizing:border-box;
            font-weight:bold;
            font-size:18px;
            text-transform:uppercase;
            font-family:Arial;
            background:url('images/allow.png') no-repeat 130px center;
            transition:all 0.3s ease-out;
            -moz-transition:all 0.3s ease-out;
            -o-transition:all 0.3s ease-out;
            -webkit-transition:all 0.3s ease-out;
            position:relative;
        }
        /*动画*/
        .link:hover .img{
            transform:rotate(360deg) scale(1.2);
            -ms-transform:rotate(360deg) scale(1.2);
            -moz-transform:rotate(360deg) scale(1.2);
            -o-transform:rotate(360deg) scale(1.2);
            -webkit-transform:rotate(360deg) scale(1.2);
        }
        .btn:hover{
            border:2px solid rgba(255,255,255,1);
            background-position:140px center;
        }
        .line{
            display:block;
            background:#fff;
            position:absolute;
            -moz-transition:ease 0.4s;
            -o-transition:ease 0.4s;
            -webkit-transition:ease 0.4s;
            transition:ease 0.4s;
        }
        .line_top{
            width:0px;
            height:2px;
            top:-2px;
            left:-110%;
        }
        .btn:hover .line_top{
            width:100%;
            left:-2px;
        }
        .line_left{
             width:2px;
             height:0px;
             bottom:-110%;
             left:-2px;
         }
        .btn:hover .line_left{
            height:100%;
            bottom:-2px;
        }
        .line_bottom{
            width:0px;
            height:2px;
            right:-110%;
            bottom:-2px;
        }
        .btn:hover .line_bottom{
            width:100%;
            right:-2px;
        }
        .line_right{
            width:2px;
            height:0px;
            top:-110%;
            right:-2px;
        }
        .btn:hover .line_right{
            height:100%;
            top:-2px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="link link_one">
            <p class="img"></p>
            <a href="javascript:void(0)" class="btn">
                MISSION
                <span class="line line_top"></span>
                <span class="line line_left"></span>
                <span class="line line_bottom"></span>
                <span class="line line_right"></span>
            </a>
        </div>
        <div class="link link_two">
            <p class="img"></p>
            <a href="javascript:void(0)" class="btn">
                PLAY
                <span class="line line_top"></span>
                <span class="line line_left"></span>
                <span class="line line_bottom"></span>
                <span class="line line_right"></span>
            </a>
        </div>
        <div class="link link_three">
            <p class="img"></p>
            <a href="javascript:void(0)" class="btn">
                TOUCH
                <span class="line line_top"></span>
                <span class="line line_left"></span>
                <span class="line line_bottom"></span>
                <span class="line line_right"></span>
            </a>
        </div>
    </div>
</body>
</html>

4、幽灵按钮基础DEMO（基础html样式+CSS3动画+jq制作提示）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>幽灵按钮提示信息制作</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        body{
            background:#313031;
        }
        .container{
            width:800px;
            height:300px;
            margin:100px auto;
        }
        .link{
            display:inline-block;
            width:180px;
            height:300px;
            margin-left:60px;
        }
        .img{
            width:100%;
            height:200px;
            transition:all 0.3s ease-out;
            -moz-transition:all 0.3s ease-out;
            -o-transition:all 0.3s ease-out;
            -webkit-transition:all 0.3s ease-out;
        }
        .link_one .img{
            background:url("images/mission.png") no-repeat center center;
        }
        .link_two .img{
            background:url("images/play.png") no-repeat center center;
        }
        .link_three .img{
            background:url("images/touch.png") no-repeat center center;
        }
        .btn{
            display:block;
            width:180px;
            height:50px;
            border:2px solid rgba(255,255,255,0.7);
            margin:10px auto;
            line-height:50px;
            text-decoration:none;
            color:#2DCB70;
            padding-left:20px;
            box-sizing:border-box;
            -webkit-box-sizing:border-box;
            -o-box-sizing:border-box;
            -moz-box-sizing:border-box;
            font-weight:bold;
            font-size:18px;
            text-transform:uppercase;
            font-family:Arial;
            background:url('images/allow.png') no-repeat 130px center;
            transition:all 0.3s ease-out;
            -moz-transition:all 0.3s ease-out;
            -o-transition:all 0.3s ease-out;
            -webkit-transition:all 0.3s ease-out;
            position:relative;
        }
        /*动画*/
        .link:hover .img{
            transform:rotate(360deg) scale(1.2);
            -ms-transform:rotate(360deg) scale(1.2);
            -moz-transform:rotate(360deg) scale(1.2);
            -o-transform:rotate(360deg) scale(1.2);
            -webkit-transform:rotate(360deg) scale(1.2);
        }
        .btn:hover{
            border:2px solid rgba(255,255,255,1);
            background-position:140px center;
        }
        .line{
            display:block;
            background:#fff;
            position:absolute;
            -moz-transition:ease 0.4s;
            -o-transition:ease 0.4s;
            -webkit-transition:ease 0.4s;
            transition:ease 0.4s;
        }
        .line_top{
            width:0px;
            height:2px;
            top:-2px;
            left:-110%;
        }
        .btn:hover .line_top{
            width:100%;
            left:-2px;
        }
        .line_left{
             width:2px;
             height:0px;
             bottom:-110%;
             left:-2px;
         }
        .btn:hover .line_left{
            height:100%;
            bottom:-2px;
        }
        .line_bottom{
            width:0px;
            height:2px;
            right:-110%;
            bottom:-2px;
        }
        .btn:hover .line_bottom{
            width:100%;
            right:-2px;
        }
        .line_right{
            width:2px;
            height:0px;
            top:-110%;
            right:-2px;
        }
        .btn:hover .line_right{
            height:100%;
            top:-2px;
        }
        /*提示*/
        .tips{
            position:absolute;
            padding:10px 14px;
            background:#2DCB70;
            color:#fff;
            top:160px;
            font-size:16px;
            font-weight:normal;
            text-transform:none;
            margin:0 auto;
            opacity:0;
            border-radius:3px;
            -moz-border-radius:3px;
            -ms-border-radius:3px;
            -o-border-radius:3px;
            -webkit-border-radius:3px;
        }
        .tips em{
            font-style:normal;
        }
        .tips span{
            position:absolute;
            width:0;
            height:0;
            overflow:hidden;
            border:7px solid transparent;
            border-top-color:#2DCB70;
            left:50%;
            margin-left:-3px;
            bottom:-14px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="link link_one">
            <p class="img"></p>
            <a href="javascript:void(0)" class="btn" data="My mission is clear">
                MISSION
                <span class="line line_top"></span>
                <span class="line line_left"></span>
                <span class="line line_bottom"></span>
                <span class="line line_right"></span>
            </a>
        </div>
        <div class="link link_two">
            <p class="img"></p>
            <a href="javascript:void(0)" class="btn" data="My play is clear">
                PLAY
                <span class="line line_top"></span>
                <span class="line line_left"></span>
                <span class="line line_bottom"></span>
                <span class="line line_right"></span>
            </a>
        </div>
        <div class="link link_three">
            <p class="img"></p>
            <a href="javascript:void(0)" class="btn" data="My touch is clear">
                TOUCH
                <span class="line line_top"></span>
                <span class="line line_left"></span>
                <span class="line line_bottom"></span>
                <span class="line line_right"></span>
            </a>
        </div>
        <!--提示-->
        <div class="tips">
            <em></em>
            <span></span>
        </div>
    </div>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('.link .btn').hover(function(){
                var title=$(this).attr('data');
                $('.tips em').text(title);
                var pos=$(this).offset().left;
                var dis=($('.tips').outerWidth()-$(this).outerWidth())/2;
                var l=pos-dis;
                $('.tips').css({'left':l+'px'}).animate({'top':255,'opacity':1},500);
            },function(){
                if(!$('.tips').is(':animated')){
                    $('.tips').animate({'top':230,'opacity':0},500);
                }
            })
        })
    </script>
</body>
</html>
幽灵按钮css3
Christine95的博客
07-16 2668
暑假第14天，学习了幽灵按钮。 幽灵按钮，也就是Ghost Buttons，是一个透明的按钮，通常是矩形或者圆角矩形，仅保留基本的形制，使用细线来标识边界；按钮内的文字通常使用纤细的非衬线体字体的纯文本，来指明按钮功能。 幽灵按钮有时候也被称为“空按钮”，通常会被设计得比普通的按钮更大一些。而它们之所以被命名为“幽灵”，是应为这种按钮如同鬼魂一样透明，但是独特的造型会立刻吸引用户的注意
CSS实现具有方面感知的幽灵按钮
在线学习web前端开发教程
01-19 407
本文中，我们将构建一个幽灵按钮，实现按钮很简单，但有趣而棘手的部分是使按钮背景色从鼠标进入的方向开始填充。 我们可以先看看最终实现的效果： 接下来，我们把实现步骤分解开来。 基础 我们先创建一个按钮，很简单！ <button>Boo!</button> 我们使用 CSS 自定义属性完成样式，这样更易于维护。 web前端开发学习Q-q-u-n： 731771211，分享...
CSS-幽灵按钮
zhou
12-11 540
  这里为了体现效果，添加了一张图片作为背景。具体效果可以根据个人需求调试。 HTML <div class="backimg"> <img src="img/hero.jpg" /> </div> <div class="btnBox"> <div class="btn"> <div class="btn-bord...
css3做幽灵按钮
Mr_li13的博客
10-05 1896
问题？有时候我们会看到那种非常炫酷，又很有动画感的页面或者图标动画或者那种透明又由动画的按钮。那应该怎么做呢？ 原理：运用css3中的几个属性及jquery，css3，js 属性介绍： 举个例子：像这样的幽灵按钮。       像这样的按钮怎么做呢？ 例子：     例子目录 ： 目录文件有那些：
css3幽灵按钮样本
10-05
我们常常会用css3的相关属性来做那些非常炫酷的按钮或者动画。这个例子就是一个css3的按钮动画效果。
幽灵按钮html透明度,CSS3之传说中的幽灵按钮详解
weixin_26976635的博客
06-19 486
大家好，自CSS3诞生之日起，网页特效较之以往变得越来越简单，样式也越来越多，那么今天我们来分享下所谓幽灵按钮的实现方法，首先我们来看下效果：幽灵按钮1.结构分析基本结构图解由上图不难看出，该示例主要由三部分组成，每部分各包含一个图标(由背景图像生成)和一个按钮(由带边框的超链接生成)，按钮中有一个右指向的箭头(也由背景图像生成)，除此之外，在效果图中，当鼠标滑过按钮时有四条线从四个方向飞入与按钮...
CSS3制作炫酷幽灵按钮动画效果
下面将详细探讨标题中提及的“css3幽灵按钮样本”的相关知识点。 ### 幽灵按钮的设计理念 幽灵按钮的设计理念基于极简主义，它弱化了背景元素，使得按钮具有较高的视觉穿透力。在设计时，一般将按钮的背景色设置为...
制作特效按钮：CSS幽灵按钮教程与示例
在学习如何制作幽灵按钮的过程中，学习者将掌握以下核心知识点： 1. HTML基础：了解和掌握创建按钮所必需的HTML结构，包括按钮元素的使用。 2. CSS基础：学习选择器的使用，包括类选择器、ID选择器等，以及如何...
CSS3幽灵按钮设计与变换技术研究
本节将讨论如何使用CSS3技术来制作样式丰富的按钮。我们会关注几个重要的CSS3属性，比如`border-radius`、`box-shadow`、`text-shadow`、`background`以及各种伪类选择器来创建吸引人的按钮效果。此外，还会探讨响应...
CSS3制作的炫酷幽灵按键效果
在本例中，压缩包子文件的文件名称列表提到了“幽灵按键”，这可能指向了一个具体的CSS3按钮风格，即“幽灵按钮”（Ghost Button）。幽灵按钮是一种透明按钮，带有边框，通常具有清晰的视觉效果，常用于现代的网页...
css-ghost-buttons:一组灵感来自真实世界示例的幽灵按钮
07-13
CSS 幽灵按钮 一组灵感来自现实世界示例的幽灵按钮。 源代码是免费和开源的。 演示 查看以查看操作中的幽灵按钮。 该演示展示了受现实世界示例启发的八个幽灵按钮变体。 如何使用 下载 ，然后将适当的样式规则复制并粘贴到项目的 CSS 中。 根据需要进行修改以获得您想要的外观和过渡效果。 关于 这是的演示页面。 这是由 Jacob Gube 创建的。 源文件是发布到公共领域的免费且不受阻碍的软件； 阅读文件以获取更多详细信息。
幽灵按钮 源代码HTML5开发实战
06-03
幽灵按钮 源代码HTML5开发实战 幽灵按钮，代码实现。HTML5实现。
html中特效按钮(幽灵按钮)制作.zip
05-14
含代码和演示视频，利用按钮组实现三个特效按钮。涉及绝对定位和相对定位，选择器的使用，基本动画。上手简单，比较容易看懂，涉及的主要是利用CSS来实现如何制作特效按钮，比较简洁，仅供参考。
css幽灵按钮
RUYIBIG的博客
05-01 467
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">         Document     *{         margin: 0;         padding: 0;     }     body{    
CSS3下实现幽灵按钮
Simagle的专栏
06-30 1692
CSS3下实现幽灵按钮
CSS3实现幽灵按钮（下）
Simagle的专栏
06-30 742
CSS3实现幽灵按钮实现边框的特效
HTML+CSS3前端开发幽灵按钮
穿裤衩的文叔的专栏
09-30 2310
幽灵按钮，也就是Ghost Buttons，是一个透明的按钮，通常是矩形或者圆角矩形，仅保留基本的形制，使用细线来标识边界；按钮内的文字通常使用纤细的非衬线体字体的纯文本，来指明按钮功能。 举个例子，09年的星际迷航里企业号控制端的UI就大多采用的是幽灵按钮。其通透简约，贴合整体风格别具魅力。 那么，首先呢给大家瞅瞅我自己做的一个幽灵按钮（界面有点丑，希望大家见谅啊）： 好了，不废话
幽灵按钮（按钮过渡，纯css）
dreamy_wx的博客
08-25 518
鼠标经过按钮样式改变，动画过渡 HTML部分： <div class="wrap"> <div class="top"></div> <div class="bottom"></div> 幽灵按钮 </div> CSS部分： * { margin: 0; padding: 0 } .wrap {
html5: 幽灵按钮
weixin_34202952的博客
04-13 259
html: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <!-- 主要知识点： 1.transform 事件发生后需要变的样子 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值