在现代网页设计中,按钮是最基本的用户界面元素之一。为了让按钮更加醒目,我们可以在其中添加图标。在CSS中,我们可以使用背景图片或伪元素来实现这一效果。首先,我们可以使用背景图片来为按钮添加图标。我们可...
在现代网页设计中,按钮是最基本的用户界面元素之一。为了让按钮更加醒目,我们可以在其中添加图标。在CSS中,我们可以使用背景图片或伪元素来实现这一效果。
首先,我们可以使用背景图片来为按钮添加图标。我们可以使用background-image属性来为按钮设置背景图片,并利用background-repeat和background-position属性来控制图片的重复和位置。例如:
.btn {
background-image: url('icon.png');
background-repeat: no-repeat;
background-position: center center;
}
.btn {
background-image: url('icon-normal.png');
background-repeat: no-repeat;
background-position: center center;
}
.btn:hover {
background-image: url('icon-hover.png');
}
.btn:active {
background-image: url('icon-active.png');
}
.btn:before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
background-image: url('icon.png');
background-repeat: no-repeat;
background-position: center center;
margin-right: 5px;
}