CSS3-button-hover-effect-20-type
这是一款集合20组不同 CSS3 按钮样式和按钮鼠标滑过特效的插件。这20组CSS3按钮每一组都有3种示例,每一个示例都使用CSS3制作炫酷的鼠标滑过动画。这些按钮适用于各种场合,相信总有一款适合你。
该按钮插件中使用鼠标HOVER来作为按钮动画的触发事件,有一些按钮动画效果更适合于鼠标点击事件,这些都可以十分容易修改和实现。
请注意这些按钮动画效果只在最新版本的现代浏览器上工作,(Mobile)Safari浏览器只支持其中很少的效果。
该按钮动画特效中大多数使用的是CSS transitions,但有一些动画效果也使用CSS animations来完成。
使用方法
HTML结构
<button class="button button--ujarak">Vote</button>
通用按钮样式
下面是所有按钮的通用样式:
/* Common button styles */ .button { float: left; min-width: 150px; max-width: 250px; display: block; margin: 1em; padding: 1em 2em; border: none; background: none; color: inherit; vertical-align: middle; position: relative; z-index: 1; } .button:focus { outline: none; } .button > span { vertical-align: middle; }
在某些按钮效果中,在按钮中添加了一些额外的标签例如一个span或几个span。还有一些效果使用了超链接,在这些效果中需要将HTML元素替换为元素,并调整它的样式。
下面是按钮的一些控制样式,如:border、border-radius和尺寸大小。
/* Sizes */ .button--size-s { font-size: 14px; } .button--size-m { font-size: 16px; } .button--size-l { font-size: 18px; } /* Typography and Roundedness */ .button--text-upper { letter-spacing: 2px; text-transform: uppercase; } .button--text-thin { font-weight: 300; } .button--text-medium { font-weight: 500; } .button--text-thick { font-weight: 600; } .button--round-s { border-radius: 5px; } .button--round-m { border-radius: 15px; } .button--round-l { border-radius: 40px; } /* Borders */ .button--border-thin { border: 1px solid; } .button--border-medium { border: 2px solid; } .button--border-thick { border: 3px solid; }
注意这些class不是对所有的按钮效果都有意义。有些效果依赖于使用元素的伪元素,例如使用伪元素来制作边框动画。
应用举例
下面来看一个”Itzel”效果的例子:
Itzel按钮样式和CSS3动画效果
这个效果在按钮的伪元素上使用clip-path
来剪切掉一部分边框,这个效果只能工作在支持clip-path
属性的浏览器上,IE浏览器上看不到效果。要在Firefox浏览器中看到效果,需要在HTML中使用SVG
来制作clipPath
。
在这个效果中,在按钮中有一个裁剪区域,使用伪元素来将之隐藏起来,隐藏的方法是使用transform
来将它往下推到按钮的下面,然后在鼠标滑过时使用另外一个transform
将它推会原来的位置。因为使用了overflow:hidden
,因此在按钮区域外是看不见它的。按钮上的小图标也使用相同的方法来制作。在鼠标滑过的时候,设置文字的透明度为0,以使文字销售,显示出小图标。
/* Itzel */ .button--itzel { border: none; padding: 0px; overflow: hidden; width: 255px; } .button--itzel::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid; border-radius: inherit; -webkit-clip-path: polygon(0% 0%, 0% 100%, 35% 100%, 35% 60%, 65% 60%, 65% 100%, 100% 100%, 100% 0%); clip-path: url(../index.html#clipBox); transform: translate3d(0, 100%, 0) translate3d(0, -2px, 0); transform-origin: 50% 100%; } .button--itzel.button--border-thin::before { border: 1px solid; transform: translate3d(0, 100%, 0) translate3d(0, -1px, 0); } .button--itzel.button--border-thick::before { border: 3px solid; transform: translate3d(0, 100%, 0) translate3d(0, -3px, 0); } .button--itzel::before, .button--itzel .button__icon { transition: transform 0.3s; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); } .button--itzel .button__icon { position: absolute; top: 100%; left: 50%; padding: 20px; font-size: 20px; transform: translate3d(-50%, 0, 0); } .button--itzel > span { display: block; padding: 20px; transition: transform 0.3s, opacity 0.3s; transition-delay: 0.3s; } .button--itzel:hover::before { transform: translate3d(0, 0, 0); } .button--itzel:hover .button__icon { transition-delay: 0.1s; transform: translate3d(-50%, -100%, 0); } .button--itzel:hover > span { opacity: 0; transform: translate3d(0, -50%, 0); transition-delay: 0s; }
以上就是这个按钮效果的全部代码。
在(Mobile) Safari浏览器中,这些按钮动画效果会有许多问题,特别是border-radius
和 overflow hidden
的问题。在这个浏览器中,伪元素视乎不能解析overflow:hidden
(特别是在transition
的时候)。还有一个gap问题,解决方案是使用 -webkit-backface-visibility: hidden。