幽灵按钮

原创 2015年07月09日 13:50:36



思路

  按钮特效:在按钮的上下左右各置一个点,鼠标经过是令点的宽(或高)、位置改变

  tiptool:鼠标经过时tiptool的位置发生变化


知识点

1   box-sizing  属性允许您以特定的方式定义匹配某个区域的特定元素。
      参数:content-box(指盒子的宽度=width+border+padding+margin,默认值)
                border-box(指盒子的宽度=width)

      兼容性

   

2、过渡、位移、圆角 参照css3系列文章

html代码

<body>
<div class="box">
  <a>
    <p>this is home demo<span></span></p>
  	<span class="line line-top"></span>
  	<span class="line line-left"></span>
  	<span class="line line-right"></span>
  	<span class="line line-bottom"></span>
  	Home
  </a>
  <a>
    <p>this is about  demo<span></span></p>
  	<span class="line line-top"></span>
  	<span class="line line-left"></span>
  	<span class="line line-right"></span>
  	<span class="line line-bottom"></span>
  	About
  </a>
  <a>
    <p>this is contact demo<span></span></p>
  	<span class="line line-top"></span>
  	<span class="line line-left"></span>
  	<span class="line line-right"></span>
  	<span class="line line-bottom"></span>
  	contact
  </a>
</div>
</body>

css


<style type="text/css">
*{margin:0;padding: 0;}
body{background: #333;}
.box{width: 700px;margin: 340px auto;}
a{display:inline-block;text-decoration: none;width: 180px; height: 50px;line-height:50px;position:relative;margin: 0px 20px;color:#2DCB70;border:2px solid rgba(255,255,255,0.8);
  font-weight:bold;font-size:18px;text-decoration:none;font-family:Arial; padding-left: 20px;
  text-transform: uppercase;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -ms-box-sizing:border-box;
  -o-box-sizing:border-box;
   box-sizing:border-box;
   /*box-sizing 属性允许以特定的方式匹配某个区域的特定元素
      参数:content-box(指盒子的宽度=width+border+padding+margin,默认值)
            border-box(指盒子的宽度=width)
  */
  -moz-transition:ease 0.4s;
  -o-transition:ease 0.4s;
  -webkit-transition:ease 0.4s;
  transition:ease 0.4s;
}
a:hover{background-position: 140px center; border:2px solid rgba(255,255,255,1);}
.line{ display: block; position: absolute;
  -webkit-transition:0.4s ease;
  -moz-transition:0.4s ease;
  -ms-transition:0.4s ease;
  -o-transition:0.4s ease;
  transition:0.4s ease;
}
a:hover .line{background:#fff;}
.line-top{width:0px; height:2px;left:-100%;top:-2px;}
a:hover .line-top{width:100%; left:-2px;}
.line-left{width:2px;height:0px;left:-2px;top:200%;}
a:hover .line-left{height:100%;top:-2px;}
.line-right{width:2px;height:0px;right:-2px;top:-100%;}
a:hover .line-right{height:100%;top:-2px;}
.line-bottom{width:0px;height:2px;left:200%; top:100%;}
a:hover .line-bottom{width:100%; left:-2px;}
/*tip*/
p{width:180px;position: absolute; background:#2DCB70;color:#fff;border-radius: 3px;bottom:200%;left: 50%;font-size:13px;font-weight: 500;padding:0px;text-align: center;opacity: 0;
  -webkit-transform:translateX(-50%);
  transform:translateX(-50%);
  text-transform: lowercase;
  box-sizing:border-box;
  -webkit-transition:0.3s ease-in-out;
  -moz-transition:0.3s ease-in-out;
  -ms-transition:0.3s ease-in-out;
  -o-transition:0.3s ease-in-out;
  transition:0.3s ease-in-out;
}
p span{width:0px;height: 0px; border:8px solid transparent;border-top-color:#2DCB70;
  position: absolute;bottom:-15px; left: 50%; margin-left: -8px;}
a:hover p{bottom:170%;opacity: 1;}
</style>



版权声明:本文为博主原创文章,未经博主允许不得转载。

幽灵按钮css3

暑假第14天,学习了幽灵按钮。 幽灵按钮,也就是Ghost Buttons,是一个透明的按钮,通常是矩形或者圆角矩形,仅保留基本的形制,使用细线来标识边界;按钮内的文字通常使用纤细的非衬线体字体的纯...
  • Christine95
  • Christine95
  • 2015年07月16日 00:36
  • 1486

HTML+CSS3前端开发幽灵按钮

幽灵按钮,也就是Ghost Buttons,是一个透明的按钮,通常是矩形或者圆角矩形,仅保留基本的形制,使用细线来标识边界;按钮内的文字通常使用纤细的非衬线体字体的纯文本,来指明按钮功能。 举个例子,...
  • Topkipa
  • Topkipa
  • 2016年09月30日 22:57
  • 840

CSS3实现幽灵按钮(下)

CSS3实现幽灵按钮实现边框的特效
  • Simagle
  • Simagle
  • 2015年06月30日 19:32
  • 356

幽灵按钮-按钮特效

效果是:图标鼠标以上旋转并缩放,按钮鼠标移上有线条飞入且箭头移动有提示框鼠标移开线条飞出 效果图如下: 代码如下: html> html> head lang="en"> m...
  • liona_koukou
  • liona_koukou
  • 2016年08月01日 15:59
  • 349

CSS3下实现幽灵按钮

CSS3下实现幽灵按钮
  • Simagle
  • Simagle
  • 2015年06月30日 19:03
  • 715

幽灵按钮的制作

幽灵按钮的详细代码
  • qq_33308180
  • qq_33308180
  • 2017年04月01日 17:19
  • 175

H5实战(五):幽灵按钮效果

1.目标效果 现在幽灵按钮是网站上十分常见的一种效果,通过使按钮变的薄透来提高页面的美观性,这里我们要实现的效果是有三个图片,在鼠标悬浮时可以放大并旋转360度,每个图标下面都有一个幽灵按钮,当鼠标...
  • weiweitb8
  • weiweitb8
  • 2017年09月20日 10:04
  • 361

关于“幽灵按钮”的一些事

最近,扁平化UI越来越充斥在我们的生活中,应用了扁平化UI设计思想的东西也是随处可见,而在这种大环境下一个新的名词也就应运而生了:幽灵按钮(Ghost Buttons)。 幽灵按钮应当算得上是网页前...
  • u010571913
  • u010571913
  • 2015年01月10日 20:27
  • 1372

幽灵按钮的实现

话不多说直接上源码 这里我没有重新创建一个新的css样式   无标题文档 * { margin: 0; padding: 0; } body { b...
  • i_need_try
  • i_need_try
  • 2016年05月01日 20:10
  • 86

幽灵按钮--感谢极客学院

今天浏览极客学院的学习视频,发现一个叫幽灵按钮的,感觉挺有趣,就点进去看了一下。一共8节课,一看就是一下午。真心感谢极客学院,讲的很细致,有趣。 附上网址:http://www.jikexueyua...
  • nyxuem
  • nyxuem
  • 2015年03月20日 20:29
  • 382
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:幽灵按钮
举报原因:
原因补充:

(最多只允许输入30个字)