前端技术延长按钮生命周期demo实例页面

展示

回到相关文章 »

改变文字的大小:

改变按钮环境行高:

改变文字的内容:

改变左边控件的值: 我是红色按钮 >

代码

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>