展示
改变文字的大小:
改变按钮环境行高:
改变文字的内容:
改变左边控件的值:
我是红色按钮 >
代码
CSS代码:
.redbtn{display:inline-block; font-size:12px; line-height:1.2;} .redbtn_in{display:block; border-left:1px solid #B81212; border-right:1px solid #BE1514; background-color:#D71B1E;} .redbtn_bg{display:inline-block; padding:0.23em 1em 0.25em; border:1px solid; border-color:#F63125 #EC2A23 #D71B1E #E92822; background:#C11C1F url(../image/red_btn_bg.png) repeat-x; color:#fff; text-shadow:0 -1px #D42521; outline:0;} .redbtn_bg:hover{color:#fff; background-position:0 -30px; background-color:#D32A2D; text-decoration:none;} .redbtn_in:after{height:0; content:" "; margin:0 -2px; border:solid #ebebeb; background-color:#ccc; position:relative; bottom:-2px; overflow:hidden; } .red_line1{background:#DA231F; border:solid #F0B3B2;} .red_line2{background:#980205; border:solid #C39192;} .red_line1,.red_line2,.redbtn_in:after{display:block; padding-top:1px; border-width:0 1px;}
HTML代码:
<span class="redbtn"> <i class="red_line1"></i> <strong class="redbtn_in"><a href="javascript:" class="redbtn_bg">我是红色按钮 ></a></strong> <i class="red_line2"></i> </span>