css按钮特效 怎么写呀

html-css024

css按钮特效 怎么写呀,第1张

border-radius:3px

border:1px solid #ddd

background-image: -moz-linear-gradient(top, #DDD, #FFF) /* Firefox */

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #DDD), color-stop(1, #FFF)) /* Saf4+, Chrome */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DDD', endColorstr='#FFF', GradientType='0') /* IE*/

text-align:center

方法/步骤

HTML结构

该鼠标点击按钮特效中每一个可点击的元素都是一个<button>按钮

CSS样式

以下是该css3点击按钮特效的通用CSS样式：

插件中通过在点击按钮时使用javascript来为它添加相应的动画CLASS来执行动画效果：

上面的CSS代码可以生成如下图的动画效果：

在“Stana”效果中，使用了html5 SVG clipPath，在它上面添加了一个transition。这个效果只能在Chrome浏览器中才能看到效果。

在“Stoja”效果中使用了CSS clip-path属性，这个效果也需要浏览器的支持才能看得到的。