template模板 templates/button.htmlcss
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>測試 pure button</title> <link rel="stylesheet" href="/static/css/pure/buttons.css" /> </head> <body> <div> <style scoped> .button-success, .button-error, .button-warning, .button-secondary { color: white; border-radius: 4px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } .button-success { background: rgb(28, 184, 65); /* this is a green */ } .button-error { background: rgb(202, 60, 60); /* this is a maroon */ } .button-warning { background: rgb(223, 117, 20); /* this is an orange */ } .button-secondary { background: rgb(66, 184, 221); /* this is a light blue */ } </style> <button class="button-success pure-button">Success Button</button> <button class="button-error pure-button">Error Button</button> <button class="button-warning pure-button">Warning Button</button> <button class="button-secondary pure-button">Secondary Button</button> </div> </body> </html>
效果圖html