<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>超酷的CSS3复古风格和字体的3D按钮</title> <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <div class="header-wrap"> <h1>3D Retro Buttons</h1> </div> </div> <br/><br/> <div class='wrapper'> <div role='button' class='retro-btn'> <a class='btn'> <span class='btn-inner'> <span class='content-wrapper'> <span class='btn-content'> <span class='btn-content-inner' label='Retro Button'> </span> </span> </span> </span> </a> </div> </div> <div style="display: inline-block; width: 50px"></div> <div class="wrapper"> <button class="loader-button">Loader</button> </div> <br/> <div class='wrapper'> <div role='button' class='retro-btn lg primary'> <a class='btn'> <span class='btn-inner'> <span class='content-wrapper'> <span class='btn-content'> <span class='btn-content-inner' label='Large'> </span> </span> </span> </span> </a> </div> </div> <div style="display: inline-block; width: 30px"></div> <div class='wrapper'> <div role='button' class='retro-btn primary'> <a class='btn'> <span class='btn-inner'> <span class='content-wrapper'> <span class='btn-content'> <span class='btn-content-inner' label='Medium'> </span> </span> </span> </span> </a> </div> </div> <div style="display: inline-block; width: 30px"></div> <div class='wrapper'> <div role='button' class='retro-btn sm primary'> <a class='btn'> <span class='btn-inner'> <span class='content-wrapper'> <span class='btn-content'> <span class='btn-content-inner' label='Small'> </span> </span> </span> </span> </a> </div> </div> <br /> <div class='wrapper'> <div role='button' class='retro-btn primary'> <a class='btn'> <span class='btn-inner'> <span class='content-wrapper'> <span class='btn-content'> <span class='btn-content-inner' label='Primary'> </span> </span> </span> </span> </a> </div> </div> <div style="display: inline-block; width: 30px"></div> <div class='wrapper'> <div role='button' class='retro-btn secondary'> <a class='btn'> <span class='btn-inner'> <span class='content-wrapper'> <span class='btn-content'> <span class='btn-content-inner' label="Secondary"> </span> </span> </span> </span> </a> </div> </div> <div style="display: inline-block; width: 30px"></div> <div class='wrapper'> <div role='button' class='retro-btn danger'> <a class='btn'> <span class='btn-inner'> <span class='content-wrapper'> <span class='btn-content'> <span class='btn-content-inner' label="Danger"> </span> </span> </span> </span> </a> </div> </div> <br /> <div class='wrapper'> <div role='button' class='retro-btn warning'> <a class='btn'> <span class='btn-inner'> <span class='content-wrapper'> <span class='btn-content'> <span class='btn-content-inner' label="Warning"> </span> </span> </span> </span> </a> </div> </div> <div style="display: inline-block; width: 30px"></div> <div class='wrapper'> <div role='button' class='retro-btn success'> <a class='btn'> <span class='btn-inner'> <span class='content-wrapper'> <span class='btn-content'> <span class='btn-content-inner' label="Success"> </span> </span> </span> </span> </a> </div> </div> <div style="display: inline-block; width: 30px"></div> <div class='wrapper'> <div role='button' class='retro-btn info'> <a class='btn'> <span class='btn-inner'> <span class='content-wrapper'> <span class='btn-content'> <span class='btn-content-inner' label="Info"> </span> </span> </span> </span> </a> </div> </div> <script src="index.js"></script> </body> </html>
超酷的CSS3复古风格和字体的3D按钮
标签：
评论者:[[ schemeInfo.user.username ]]
评论内容:[[ schemeInfo.pbody ]]
评论时间:[[ schemeInfo.ptime ]]
发表你的评论:
提交评论
上一篇：
CSS3和SVG实现的圆环菜单动画
下一篇：
基于CSS3的iOS风格开关切换按钮