CSS按钮特效,多种样式,不同颜色
转载请注明本文链接:https://blog.l9s.cc/.html [生成短网址]
<style type="text/css"> html { text-align: center; } body { margin:0; padding:0; background-color:#FFF; /*background:url(images/bg.jpg);*/ background-size: 100% 100%; } .content hr { border:0 none; margin:0 0 1em 0; } label:after { color: #fff; content: '#'; } input { background: #fff0f5; border: 1px solid #222; color: #333; margin-right: 5.5em; padding: .5em;}
html 按钮添加代码
<p>Red</p> <a class="button large regular red" href="javascript:void(0);">Button</a> <a class="button medium regular red" href="javascript:void(0);">Button</a> <a class="button small regular red" href="javascript:void(0);">Button</a> <a class="button large square red" href="javascript:void(0);">Button</a> <a class="button medium square red" href="javascript:void(0);">Button</a> <a class="button small square red" href="javascript:void(0);">Button</a> <a class="button large round red" href="javascript:void(0);">Button</a> <a class="button medium round red" href="javascript:void(0);">Button</a> <a class="button small round red" href="javascript:void(0);">Button</a> <hr> <p>Orange</p> <a class="button large regular orange" href="javascript:void(0);">Button</a> <a class="button medium regular orange" href="javascript:void(0);">Button</a> <a class="button small regular orange" href="javascript:void(0);">Button</a> <a class="button large square orange" href="javascript:void(0);">Button</a> <a class="button medium square orange" href="javascript:void(0);">Button</a> <a class="button small square orange" href="javascript:void(0);">Button</a> <a class="button large round orange" href="javascript:void(0);">Button</a> <a class="button medium round orange" href="javascript:void(0);">Button</a> <a class="button small round orange" href="javascript:void(0);">Button</a> <hr> <p>Yellow</p> <a class="button large regular yellow" href="javascript:void(0);">Button</a> <a class="button medium regular yellow" href="javascript:void(0);">Button</a> <a class="button small regular yellow" href="javascript:void(0);">Button</a> <a class="button large square yellow" href="javascript:void(0);">Button</a> <a class="button medium square yellow" href="javascript:void(0);">Button</a> <a class="button small square yellow" href="javascript:void(0);">Button</a> <a class="button large round yellow" href="javascript:void(0);">Button</a> <a class="button medium round yellow" href="javascript:void(0);">Button</a> <a class="button small round yellow" href="javascript:void(0);">Button</a> <hr> <p>Green</p> <a class="button large regular green" href="javascript:void(0);">Button</a> <a class="button medium regular green" href="javascript:void(0);">Button</a> <a class="button small regular green" href="javascript:void(0);">Button</a> <a class="button large square green" href="javascript:void(0);">Button</a> <a class="button medium square green" href="javascript:void(0);">Button</a> <a class="button small square green" href="javascript:void(0);">Button</a> <a class="button large round green" href="javascript:void(0);">Button</a> <a class="button medium round green" href="javascript:void(0);">Button</a> <a class="button small round green" href="javascript:void(0);">Button</a> <hr> <p>Blue</p> <a class="button large regular blue" href="javascript:void(0);">Button</a> <a class="button medium regular blue" href="javascript:void(0);">Button</a> <a class="button small regular blue" href="javascript:void(0);">Button</a> <a class="button large square blue" href="javascript:void(0);">Button</a> <a class="button medium square blue" href="javascript:void(0);">Button</a> <a class="button small square blue" href="javascript:void(0);">Button</a> <a class="button large round blue" href="javascript:void(0);">Button</a> <a class="button medium round blue" href="javascript:void(0);">Button</a> <a class="button small round blue" href="javascript:void(0);">Button</a> <hr> <p>Purple</p> <a class="button large regular purple" href="javascript:void(0);">Button</a> <a class="button medium regular purple" href="javascript:void(0);">Button</a> <a class="button small regular purple" href="javascript:void(0);">Button</a> <a class="button large square purple" href="javascript:void(0);">Button</a> <a class="button medium square purple" href="javascript:void(0);">Button</a> <a class="button small square purple" href="javascript:void(0);">Button</a> <a class="button large round purple" href="javascript:void(0);">Button</a> <a class="button medium round purple" href="javascript:void(0);">Button</a> <a class="button small round purple" href="javascript:void(0);">Button</a> <hr> <p>White</p> <a class="button large regular white" href="javascript:void(0);">Button</a> <a class="button medium regular white" href="javascript:void(0);">Button</a> <a class="button small regular white" href="javascript:void(0);">Button</a> <a class="button large square white" href="javascript:void(0);">Button</a> <a class="button medium square white" href="javascript:void(0);">Button</a> <a class="button small square white" href="javascript:void(0);">Button</a> <a class="button large round white" href="javascript:void(0);">Button</a> <a class="button medium round white" href="javascript:void(0);">Button</a> <a class="button small round white" href="javascript:void(0);">Button</a> <hr> <p>Grey</p> <a class="button lightText large regular grey" href="javascript:void(0);">Button</a> <a class="button lightText medium regular grey" href="javascript:void(0);">Button</a> <a class="button lightText small regular grey" href="javascript:void(0);">Button</a> <a class="button lightText large square grey" href="javascript:void(0);">Button</a> <a class="button lightText medium square grey" href="javascript:void(0);">Button</a> <a class="button lightText small square grey" href="javascript:void(0);">Button</a> <a class="button lightText large round grey" href="javascript:void(0);">Button</a> <a class="button lightText medium round grey" href="javascript:void(0);">Button</a> <a class="button lightText small round grey" href="javascript:void(0);">Button</a> <hr> <p>Black</p> <a class="button lightText large regular black" href="javascript:void(0);">Button</a> <a class="button lightText medium regular black" href="javascript:void(0);">Button</a> <a class="button lightText small regular black" href="javascript:void(0);">Button</a> <a class="button lightText large square black" href="javascript:void(0);">Button</a> <a class="button lightText medium square black" href="javascript:void(0);">Button</a> <a class="button lightText small square black" href="javascript:void(0);">Button</a> <a class="button lightText large round black" href="javascript:void(0);">Button</a> <a class="button lightText medium round black" href="javascript:void(0);">Button</a> <a class="button lightText small round black" href="javascript:void(0);">Button</a>