开发者学堂课程【jQuery 开发教程：jQuery 特效实例_幽灵按钮1】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/362/deta
jQuery 特效实例_幽灵按钮1
幽灵按钮:
也叫透明按钮,顾名思义,也就是在设计网页中的按钮之时,不再设计复杂色彩、样式和纹理,而是外仅以线框示意轮廓,只脑示意功能，背景透出,与整个页面背景合而为-的设计方式。
国外的设计师称之为“幽灵按钮”( Ghost Buttons ),盛赞这种按钮通透简约,贴合整体风格又不失神韵,别具魅力。这种按钮的设计早已有之,但是在iOS安卓双双风格转向之后,成了网页设计的新趋势,拥有类似设计的网页设计作品入雨后春笋一般,映入眼帘。
代码部分：
首先创建一个新的工程，GhostButtons
< !DOCTYPE html>
<html Lang="en">
<head>
<meta charset="UTF-8">
<title></title>
//引入ccs
<link rel=”stylesheet” href=”app.css” type= “text/css”/>
</head>
<body>
//大盒子
<div class="box">
三个按钮都在一个大的布局当中
//第一个按钮
<div class="Link link-miss">
//span标签，承载图片
<span class= "icon"></span>
//承载button
<a href="#n class="button">
//4个span承载4条线，上下左右
<span class="Line line-top">< /span>
<span class="Line line-Left"></span>
<span class="line line-right"></span>
<span class="line line-bottom"></span>
MISSION
</a>
</div>
里面首先应该有一个承载图案的区域，下面会有个承载按钮的区域，仔细观察进入这个按钮Imagine,他有一个动画效果，事实上这个动画效果是由一个元素产生的，然后对这个元素进下动画处理即可。
//第二个按钮
<div class="link link-play">
<pan class="icon">< /span>
<a href="#" class="button">
<span class="Line line- top"></span>
<span class="line line-Left"></span>
<span class="line line-right></span>
<span class="line line- bottom"></ span>
PLAY
</a>
</div>
//第三个按钮
<div class="link line-touch">
<span class="icon">< / span>
<a href=”#” class="button'>
<span class="line line-top"></span>
<span class="Line line-left></span
<span class="line line-right"></span>
<span class="line line- bottom"></ span>
TOUCH
</a>
</div>
</div>
</body>
</htmL>
效果图：
、App.css:
*{
margin:0
padding:0
}
//背景颜色
body{
background-color; #33
}
//大box样式
.box{
width: 1000px;
height: 220px;
margin: 50px auto
}
设置完cs后效果图：
三个按钮样式已初步搭建完成