前言：
现时姐妹们对“css按钮生成”都比较关切，姐妹们都想要学习一些“css按钮生成”的相关资讯。那么小编同时在网络上收集了一些有关“css按钮生成””的相关内容，希望看官们能喜欢，朋友们一起来学习一下吧！这是一个简单的，带有动态效果的按钮，纯CSS做。
图1
一、我们先做一个按钮。
图2
图3
二、按钮很丑，我们修改一下吧，加个样式，这样就好看很多了。
图4
图5
三、按钮好看了，我们加个简单的动态吧，就是当鼠标在按钮上面时，button这个词向左移一些。
图6
图7
四、如图7有动态了，但这个动态太生硬，我们让这个span的动态过渡持续0.5秒，再看一下效果。
图8
图9
五、图7和图9对比再明显不过了，接下来我们在span后面加"»"符号。
图10
图11
六、先把符号透明度变成0，就是透明的意思。
图12
图13
七、加入动态，当鼠标在按钮上面时，»符号出现。
图14
图15
八、你会发现»符号出现得有些生硬，透明到不透明间没有过渡，我们给它加个过渡吧。
图16
图17
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .bt{ border: none; /* 去掉边框 */ background: #c33; /* 改背景色 */ color: white; /* 字改成白色 */ font-size: 28px; /* 改字体大小 */ padding: 20px; /* 按钮内边距离 */ width: 200px; /* 按钮宽度 */ border-radius: 5px; /* 圆角5px */ } .bt span{ transition: 0.5s; /* 过渡0.5秒 */ } .bt:hover span{ padding-right: 25px; /* 当鼠标在按钮上时span内边右距离25px */ } .bt span:after{ content: "»"; /* span后面追加内容为» */ opacity: 0; /* 透明度为0 */ transition: 0.5s; /* 加个0.5秒的过渡 */ } .bt:hover span:after{ opacity: 1; /* 透明度为1，就是显示 */ } </style></head><body> <button class="bt"> <span>Button</span><!-- 因为等下要单独处理按钮里面的字所以单独用span处理 --> </button></body></html> 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
