在网页设计中，按钮是一个非常重要的元素，它能够让用户更加方便地操作页面。而如何制作一个漂亮、实用的按钮，则成为了前端开发者需要面对的问题之一。本文将会介绍一种使用CSS3技术来制作按钮并添加动态效果的方法，并且分享代码供大家参考。

首先我们需要准备一个基础样式：

“`css

.btn {

display: inline-block;

padding: 10px 20px;

font-size: 16px;

color: #fff;

}

“`

这是一个最基础的样式，我们可以根据自己需要进行修改。

接下来我们来实现第一个动态效果：鼠标悬停时改变背景颜色。

.btn:hover {

background-color: #00bcd4;

这里我们使用:hover伪类选择器，表示当鼠标悬停在按钮上时触发该样式。background-color属性则用于设置背景颜色。

第二个动态效果：点击后改变背景颜色。

.btn:active {

background-color: #0097a7;

同样地，我们使用 :active伪类选择器表示当鼠标按下时触发该样式。background-color属性则用于设置背景颜色。

第三个动态效果：添加阴影。

box-shadow: 0px 2px 5px rgba(0, 0, 0, .26);

这里我们使用了box-shadow属性，它可以用来设置元素的阴影效果。其中第一个参数表示水平偏移量，第二个参数表示垂直偏移量，第三个参数表示模糊程度，最后一个参数则表示颜色。

第四个动态效果：添加过渡效果。

transition: all .3s ease-in-out;

这里我们使用了transition属性，它可以用来设置元素的过渡（transition）效果。其中all代表所有属性都会产生过渡效果，.3s代表过渡时间为0.3秒，ease-in-out则是一种缓动函数。

好了，以上就是本文所分享的使用CSS3技术制作按钮并添加动态效果的方法及代码。大家可以根据自己需要进行修改和扩展，并且欢迎在评论区分享自己的经验和想法。

最后附上本文中所介绍代码的在线演示链接：