灵感来源于:Michael Schmid
下面就利用CSS3中的transition 和 ::after ::before来制作。
效果展示
Turial
画一个盒子装button
1 |
|
button调到中间
在button class里加上
1 | line-height: 100px;/*单行文字居中的trick*/ |
利用伪类::after ::before加入hover特效
1 | .button::after{ |
如果加上过渡效果:
1 | .button::after{ |
加了特效 ,效果duang duang duang:
为什么在整个body里?
为什么不是在button内部?
因为absolute布局相对的父元素是上一级的relative 或者 absolute布局,button class里我们没有为他布局,相当默认的static,所以他直接相对于body,top:0;left:0;都是相对body的。因为body默认本身就是一个relative
的布局。当我们为.button加上一个position:relative时:
1 | .button{ |
效果就出来了:
文字被遮住了
怎么解决文字被遮住的问题?
想到了用z-index,设置元素的堆叠顺序。默认是0,如果能让button比0高,不就可以一直在上面了。
1 | #button{ |
然而效果没有改变:
当:
1 | #button{ |
效果就实现了。为什么加了一个position就实现了?请阅读:CSS z-index 属性的使用方法和层级树的概念
结语
具体的色调 字体 大小 背景色就留给大家设计吧。