大家好，精选小编来为大家解答以上问题。css3按钮动画，css3按钮很多人还不知道，现在让我们一起来看看吧！

1、 下载jquery-1.5.2.min.js包。在浏览器输入这个包都可以下载。已经测试过。

2、 新建超文本标记语言文档。

3、 添加jquery-1.5.2.min.js包路径。

4、 书写钢性铸铁样式。

5、 style type='text/css '。all { margin:20px auto；宽度：1010px高度：70px}。全部。bll { width:70px；高度：70px浮动：左；左边距：10px}。全部。bll。list { width:50px；高度：50px-moz-border-radius:10px；边框半径：10px光标：指针；边距：0px自动；页边距-顶部：10px行高：50px文本对齐：居中；颜色：白色；字体粗细：500；字体大小：18px字体系列：@新宋体；

6、 }。div radius {-moz-border-radius:50px；边框半径：50px行高：60px}。全部。bll . back C1:hover {-moz-border-radius:50px；边框半径：50px}。全部。bll . back C6:hover {-moz-border-radius:50px；边框半径：50px}。全部。bll . back 7:hover {-moz-box-shadow:5px 5px 5px # 888888；盒影：5px 5px 5px # 888888}。全部。bll .backc8 { transition:宽度1s，高度1s；-moz-transition:宽度1s，高度1s，-moz-transform 1s；/* Firefox 4 */-webkit-transition:宽度1s，高度1s，-WebKit-transform 1s；/* Safari和Chrome */-o-transition:宽度1s，高度1s，-o-transform 1s；/* Opera */}。全部。bll . back c8:hover { transform:rotateY(360 deg)；-moz-transform:rotateY(360 deg)；/* Firefox 4 */-WebKit-transform:rotateY(360 deg)；/* Safari和Chrome */-o-transform:rotateY(360 deg)；/* Opera */}。全部。bll .backc9 { transition:宽度1s，高度1s；-moz-transition:宽度1s，高度1s，-moz-transform 1s；/* Firefox 4 */-webkit-transition:宽度1s，高度1s，-WebKit-transform 1s；/* Safari和Chrome */-o-transition:宽度1s，高度1s，-o-transform 1s；/* Opera */}。全部。bll . back 9:hover { transform:rotateX(360 deg)；-moz-transform:rotateX(360 deg)；/* Firefox 4 */-WebKit-transform:rotateX(360 deg)；/* Safari和Chrome */-o-transform:rotateX(360 deg)；/* Opera */}。全部。bll .backc10 { transition:宽度0.5s，高度0.5s；-moz-transition:宽度0.5s，高度0.5s，-moz-transform 0.5s；/* Firefox 4 */-webkit-transition:宽度0.5s，高度0.5s，-WebKit-transform 0.5s；/* Safari和Chrome */-o-transition:宽度0.5s，高度0.5s，-o-transform 0.5s；/* Opera */}。全部。bll . back C10:hover { transform:rotate(45 deg)；-moz-transform:旋转(45度)；/* Firefox 4 */-webkit-transform:旋转(45度)；/* Safari和Chrome */-o-transform:旋转(45度)；/* Opera */}。全部。bll .backc11 { transition:宽度0.5s，高度0.5s；-moz-transition:宽度0.5s，高度0.5s，-moz-transform 0.5s；/* Firefox 4 */-webkit-transition:宽度0.5s，高度0.5s，-WebKit-transform 0.5s；/* Safari和Chrome */-o-transition:宽度0.5s，高度0.5s，-o-transform 0.5s；/* Opera */}。全部。bll . back 11:hover { width:60px；高度：60px行高：60px边距-顶部：5px变换：旋转(360度)；-moz-transform:旋转(360 deg)；/* Firefox 4 */-webkit-transform:旋转(360 deg)；/* Safari和Chrome */-o-transform:旋转(360 deg)；/* Opera */}。全部。bll a { text-decoration:无；}

7、 . back C1 { background-color:# 66 cccc；}

8、 . back C2 { background-color:# cc 6633；}

9、 . back C3 { background-color:# 999933；}

10、 . back C4 { background-color:# 669933；}

11、 . back C5 { background-color:# cc 9933；}

12、 . back C6 { background-color:# cc 6666；}

13、 . back 7 { background-color:# 336666；}

14、 . back c8 { background-color:# cc 6633；}

15、 . back 9 { background-color:# 5b 5b 00；}

16、 . back C10 { background-color:# ff 9966；}

17、 . back c11 { background-color:# 669999；}

18、 /风格

19、 书写js .

20、 脚本类型='文本/javascript '

21、 $(function () {

22、 $(' back C2 ')。mouseover(function () {

23、 $(这个)。animate({ marginTop: '5px' }，200)；

24、 });

25、 $(' back C2 ')。mouseleave(function () {

26、 $(这个)。animate({ marginTop: '10px' }，200)；

27、 });

28、 $(' back C3 ')。mouseover(function () {

29、 $(这个)。animate({ marginTop: '5px' }，200)；

30、 $(这个)。animate({ marginTop: '10px' }，200)；

31、 });

32、 $(' back C4 ')。mouseover(function () {

33、 $(这个)。fadeTo(300，0.3)；

34、 });

35、 $(' back C4 ')。mouseleave(function () {

36、 $(这个)。fadeTo(300，1)；

37、 });

38、 $(' back C5 ')。mouseover(function () {

39、 $(这个)。fadeTo(400，0.3)；

40、 $(这个)。fadeTo(400，1)；

41、 });

42、 $(' back C6 ')。mouseover(function () {

43、 $(这个)。addClass('divradius ')。fadeTo(300，0.3)；

44、 });

45、 $(' back C6 ')。mouseleave(function () {

46、 $(这个)。removeClass('divradius ')。fadeTo(300，1)；

47、 });

48、 });

49、 /脚本

50、 书写html .

51、 div class='all '

52、 div class='bll'a href='# '

53、 div class='list backc1 '音乐/div

54、 /a/div

55、 div class='bll'a href='# '

56、 div class=' list back C2 ' style=' margin-top:10px；'电影/div

57、 /a/div

58、 div class='bll'a href='# '

59、 div class=' list back C3 ' style=' margin-top:10px；'文章/div

60、 /a/div

61、 div class='bll'a href='# '

62、 div class=' list back C4 ' style=' opacity:1；'图片/div

63、 /a/div

64、 div class='bll'a href='# '

65、 div class=' list back C5 ' style=' opacity:0.81134100206046；'心情/div

66、 /a/div

67、 div class='bll'a href='# '

68、 div class=' list back C6 ' style=' opacity:1；'分享/div

69、 /a/div

70、 div class='bll'a href='# '

71、 div class=' list backc7 '晒晒/div

72、 /a/div

73、 div class='bll'a href='# '

74、 div class='list backc8 '新闻/div

75、 /a/div

76、 div class='bll'a href='# '

77、 div class=' list backc9 '周刊/div

78、 /a/div

79、 div class='bll'a href='# '

80、 div class=' list backc10 '笑话/div

81、 /a/div

82、 div class='bll'a href='# '

83、 div class=' list backc11 '空间/div

84、 /a/div

85、 /div

86、 浏览器查看效果。

本文到此结束，希望对大家有所帮助。