css按钮里面加入图标

CSS按钮常用于网站和应用程序的设计中，是用户与网站和应用程序进行交互的重要组件之一。加入图标可以使按钮更加形象化和易于识别，同时进一步提高用户的使用体验。在下面的代码示例中，我们将学习如何在CSS按钮中加入图标。

.button {display: inline-block;padding: 10px 20px;background-color: #4CAF50;color: white;font-size: 16px;border: none;cursor: pointer;border-radius: 4px;}.button.icon {padding-left: 30px;background-image: url("icon.png");background-position: 10px center;background-repeat: no-repeat;}.button:hover {background-color: #3e8e41;}.button.icon:hover {background-color: #3e8e41;}

首先，我们定义了一个基本的CSS按钮样式，其包括背景颜色、字体大小、边框等样式，同时为了使按钮能够成为一个指针，我们为其添加了cursor: pointer样式。然后，我们定义了一个新的类名为.button.icon，同时为其添加了一张图标背景图片。padding-left: 30px用于让按钮中的文本向右边移动，避免被图像覆盖；background-position: 10px center用于设置图标在按钮中的位置，此处设置为垂直居中水平偏移10px；background-repeat: no-repeat保证图像只显示一次。

最后，我们再进行按钮的hover效果设定。当用户鼠标移动到按钮上方，可以看到按钮颜色的变化。在新的.button.icon:hover样式中，我们设置了与基本按钮样式相同的按钮背景颜色变化，以及图标背景颜色变化效果。

在使用CSS按钮和图标时，请一定要注意图标的分辨率和大小，确保其在不同设备和浏览器中均能正常显示。

上一篇：CSS捉迷藏钢琴推荐

下一篇：JavaScript中如何控制小数