之前的 文章 《 新手 篇：如何用ccs 制作 一个 简单 的布局（附代码）》中，给大家介绍了如何用ccs制作一个简单的布局。下面本篇文章给大家介绍怎么使用css3制作按钮添加动态效果，我们一起看看怎么做。
css 如何实现 button 按钮效果?
HT ML 结构：
首先定义一个 body ，使用 button 按钮，添加文字 value 设置为“ 开始 游戏”以方便设置 class 转为 id 选择器。
<body> <input id="se Arch " n am e="cx" ty PE ="button" value="开始游戏" class=" BT n search"> </body>
效果代码
效果出来了，能看到按钮效果了，但是没有给它添加动态装饰，通过使用 css 给它添加动态效果，一起看看怎么做。
css编辑代码：
1、在 style 之间，对 search 进行样式初始化，添加设置高度和 宽 度，然后使用设置背景 background ，设置 no-repeat 这个属性背景图将不会被重复。
.search {
width: 185px;
h ei ght: 70px;
background: url(images/btn_08. jpg ) no-repeat center ;
}代码效果
2、接着，给 css3 按钮添加 圆 角效果设置属性每个 border 的四个值，最后设置 居中对齐 使用 float: left 。
border-radius: 8px; - webkit -border-radius: 8px; -o-border-radius: 8px; -moz-border-radius: 8px; float: left;
代码效果
四点边圆角效果出来了
3、再给 search 进行样式添加字体大小、文本对齐方式、字体的粗细，设置 border 元素所有边框的样式、颜色、形状。
font- Size: 30px; text-align: center; font-weight : bold; border: none; color: # fff; cursor: pointer; line-height: 70px; font-f ami ly: 微软雅黑 ;
4、在 style 之间，对 btn 进行样式初始化，添加设置高度和宽度，然后使用设置背景 background 。
.btn {
width: 383px;
height: 70px;line-height: 0;
border: 2px solid #a2f3ff;
background: #f3682d;
}代码效果
5、再给 btn 进行样式添加字体大小、文本对齐方式、字体的粗细，设置 border 元素所有边框的样式、颜色、形状。
border-radius: 37px; -webk IT -border-radius: 37px; -o-border-radius: 37px; -moz-border-radius: 37px; text -s hadow: 3px 2px #d4481b; -webkit -t ext-shadow: 3px 2px #d4481b; -o-text-shadow: 3px 2px #d4481b; -moz-text-shadow: 3px 2px #d4481b; font-family: 微软 雅黑;
代码效果
6、将动画与 search 绑定
#search{
animation: br eathe 1.1s infinite;7、使用 @keyframes 规则，创建动画。
@keyframes breathe{
0%{ transform: scale(.99); }
50%{ transform: scale(1.03); }
100%{ transform: scale(.99); }
}代码效果
ok,编辑代码完成。
完整代码
<!DOCTYPE html>
<html>
<head>
< ;m eta charset="UTF-8">
<title>button按钮</title>
<style type="text/css">
.search {
width: 185px;
height: 70px;
background: url(images/btn_08.jpg) no-repeat center;
border-radius: 8px;
-webkit-border-radius: 8px;
-o-border-radius: 8px;
-moz-border-radius: 8px;
float: left;
font-size: 30px;
text-align: center;
font-weight: bold;
border: none;
color: #fff;
cursor: pointer;
line-height: 70px;
font-family: 微软雅黑;
}
.btn {
width: 383px;
height: 70px;line-height: 0;
border: 2px solid #a2f3ff;
background: #f3682d;
m arg in: 22px 0 0 17px;
border-radius: 37px;
-webkit-border-radius: 37px;
-o-border-radius: 37px;
-moz-border-radius: 37px;
text-shadow: 3px 2px #d4481b;
-webkit-text-shadow: 3px 2px #d4481b;
-o-text-shadow: 3px 2px #d4481b;
-moz-text-shadow: 3px 2px #d4481b;
font-family: 微软雅黑;
}
#search{
animation: breathe 1.1s infinite;
}
@keyframes breathe{
0%{ transform: scale(.99); }
50%{ transform: scale(1.03); }
100%{ transform: scale(.99); }
}
</style>
</head>
<body>
<input id="search" name="cx" type="button" value="开始游戏" class="btn search">
</body>
</html>推荐学习：CSS3视频教程
以上就是一招教你使用css3制作按钮添加动态效果（代码分享）的详细内容，更多请关注其它相关文章！
总结
以上是 为你收集整理的 一招教你使用css3制作按钮添加动态效果（代码分享） 全部内容，希望文章能够帮你解决 一招教你使用css3制作按钮添加动态效果（代码分享） 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于一招教你使用css3制作按钮添加动态效果（代码分享）的详细内容...