做网页设计时，大家都喜欢炫酷的动画式按钮？其实你根本不需要懂得什么编程知识，只需学会CSS3中的多重背景和动画技术，就可以随心所欲地制作出各种各样的动态按钮了。给链接添上特定类别，瞬间就让它变成有趣极了的按钮，整个页面也就变得活力四溢了！
CSS3动画按钮的优势
以前做网页设计，按钮要有互动效果的话就得用JavaScript。不过别急现在有了CSS3这个神奇的东西，咱们就能用它来玩各种动画了！这不仅省去了不少JavaScript代码，还能提升页面速度和加载速度哟~再说它还是个有着无数过渡和变化效果的魔法师，设计师们可以尽情发挥想象，创造出更加炫酷的按钮造型~
四色主题与三种大小
Download Submit Submit
选中4种独特的颜色装扮动画按钮：蓝绿橙灰；还有3个大小选择：小中大，随心搭配。这个小小的组合能根据环境和设计需要改变按钮颜色，丰富多样！
兼容性与推荐浏览器
千万记住，尽管CSS3真的很牛叉，网页效果也特别酷炫，可有些老点的浏览器可能会不支持。不过别怕，像Chrome和Firefox这种主流的浏览器都是可以的；就怕你还在使用IE 9甚至更早的版本，那可能就要出bug。所以，做动画按钮时，我们不仅要追求美感，还要注意兼容性，让大家无论在什么设备上都能爽快地玩起来！
CSS代码结构解析
每个动画按钮都在buttons.css里存着！既省事儿又好使，想怎么改就怎么改。不过得告诉你CSS里同一个属性有俩版本，每个浏览器显示出来可是有些区别。不怕，这样就能让新款浏览器享受到CSS3的新颖性，老款浏览器也不用担心。
CSS样式定义
首先咱们先搞个按钮呗，它主要是用来设置按钮外观的，包括位置、字号、背景色之类的。选好字体，再加点display:inline-block属性，这样就能和文字排在一块儿，还能有不错的边框和填充效果，挺好用的！然后，有时候咱们可能需要为每个按钮加四张背景图片，别看这事儿看上去挺复杂，但是做起来真的不难。
背景图像与渐变效果
每种颜色都自有特色，如文字标签色调呀、字影效果啊还有背景图之类的。尤其是那背景图，由好几层精心设计的图层层叠加而成，借助CSS3过渡效果就能让它变得生动有趣！不过碰到浏览器新功能不兼容的情况怎么办？不用担心，它们会自动换成默认背景色保证网页美感不减~
渐变规则与兼容性处理
/* BlueButton */
.blue.button{
color:#0f4b6d !important;
border:1px solid #84acc3 !important;
/* A fallback background color */
background-color: #48b5f2;
/* Specifying a version with gradients according to */
background-image: url('button_bg.png'), url('button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
background-image: url('button_bg.png'), url('button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}
.blue.button:hover{
background-color:#63c7fe;
background-image: url('button_bg.png'), url('button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
background-image: url('button_bg.png'), url('button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
提醒你我们这教程里的那些渐变色定义就是给大家做个参考，毕竟不同浏览器有自己的理解。所以咱们就借用了WebKit跟Mozilla的语法，让这些效果看起来更完美~不过注意，这不是统一的标准
定制与扩展
在buttons.css里面动动手脚，就能打造出跟你品牌或网页风格相符的按钮！换个颜色，改个造型，加些专属的动画特效，就可以独树一帜！用起这些自定义样式也是超简单的，只需要引入相应的类名字符串即可。
总结与展望
这篇文章教你如何运用CSS3做出炫酷动感的按钮！其中提到了一些优点和你需要注意的地方，了解了这些内容后，相信你也能在以后的网页设过程中玩出更多新鲜花样！
看这篇文章教你如何用CSS3做出炫酷的小动画按钮，甚至可以随意用到你自己的项目里去。小伙伴们对这个有什么问题或见解，大胆留在评论区！
评论0