CSS按钮特效,多种样式,不同颜色

  • 内容
  • 相关

转载请注明本文链接:https://blog.l9s.cc/.html  [生成短网址]

214259qvhzmvhb6r5ob76s.jpg 
<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>


本文标签:

版权声明:若无特殊注明,本文皆为《王晓明》原创,转载请保留文章出处。

本文链接:CSS按钮特效,多种样式,不同颜色 - https://blog.l9s.cc/教程代码/172.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注