一组我很喜欢的按钮样式(纯CSS实现)
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>三十客-定制按钮(button)样式</title> <style> *{margin: 0px; padding: 0px} .button-du { text-align: center; cursor: pointer; font-size:24px; border-radius: 4px; border: none; padding: 8px 12px; width: 130px; transition: all 0.5s; } .button-du span { cursor: pointer; display: inline-block; position: relative; transition: 0.5s; } .button-du span:after { content: '»'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s; } .button-du:hover span { padding-right: 25px; } .button-du:hover span:after { opacity: 1; right: 0; } .default { color:#fff; background-color:#007bff; } .secondary { color:#fff; background-color:#6c757d; } .success { color:#fff; background-color:#28a745; } .danger { color:#fff; background-color:#dc3545; } .warning { color:#212529; background-color:#ffc107; } .info { color:#fff; background-color:#17a2b8; } .dark { color:#fff; background-color:#343a40; } .buttons { padding: 8px; } .buttons >button { margin: 8px; } </style> </head> <body> <div class="buttons"> <button class="button-du default"><span>缺 省</span></button> <button class="button-du secondary"><span>次 要</span></button> <button class="button-du success"><span>成 功</span></button> <button class="button-du danger"><span>危 险</span></button> <button class="button-du warning"><span>警 告</span></button> <button class="button-du info"><span>信 息</span></button> <button class="button-du dark"><span>暗 色</span></button> </div> </body> </html>