声明:博主本人第一次在CSDN上传自己的代码,有什么不对的地方,多多指教
本文主要是上传用label标签些一个按钮,按钮设计图是网上看到的,比较漂亮,所以自己用ps做了一个png图。
废话少说,直接上图上代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>label实现按钮功能</title> <style> label span{ width: 170px; height: 70px; display: inline-block; background: url("img/input1.png") 0 0 no-repeat; } label input{ display: none; } label input:checked + span{ background-position:-176px 0; } </style> </head> <body> <label for="i1"> <input type="checkbox" id="i1" /> <span></span> </label> </body> </html>引用的图片:(自己下载)