在制作网页时,常常需要使用按钮来实现交互功能。而常规的按钮可能会显得单调,为了增加页面的美感和用户交互体验,我们可以使用CSS上方图标文字的按钮。 CSS上方图标文字的按钮是指按钮上方会显示一个小图标
.btn { display: inline-block; position: relative; padding: 10px 20px; font-size: 16px; font-weight: bold; text-align: center; color: #ffffff; background-color: #007bff; border: none; border-radius: 5px; cursor: pointer; } <br> .btn:before { content: ""; display: block; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 20px; height: 20px; background: url(icon.png) no-repeat center center; background-size: contain; border-radius: 50%; border: 2px solid #ffffff; } <br> .btn p { margin: 0; padding-top: 20px; border-top: 2px solid #ffffff; }
粉丝
0
关注
0
收藏
0