自定义button按钮样式

最新推荐文章于 2017-10-12 09:47:00 发布

长江

最新推荐文章于 2017-10-12 09:47:00 发布

阅读量3.9k

点赞数

分类专栏： VS2010.net MVC+EXTJS4 文章标签： button border url

本文链接：https://blog.csdn.net/lonestar555/article/details/7095661

版权

博主花费一上午时间成功创建了无边框的自定义按钮，采用1*20像素的背景图片，并实现了正常、鼠标悬停和获取焦点时的不同样式效果。

摘要由CSDN通过智能技术生成

就为了这个破按钮,搞了一上午才郁闷的搞出来..

按钮没边框,使用1*20背景图片

包括正常样式,鼠标经过样式,取得焦点样式

/*自定义按钮
使用方法:
    cls: 'index-btn-custom',
    overCls: 'index-btn-custom-over',
    focusCls: 'index-btn-custom-focus', 
    margin: '10 0 0 100',
    style: { border: 0   },
    text: '<a style="font-size: 13px; color: #FFFFFF">保存</a>',
*/
.index-btn-custom
{ 
    background-image: url('../../Content/PanelStyle/06.gif') !important;
    background-repeat: repeat-x !important; 
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px; 
    /*
    border-bottom-color: #BE620D;
    border-top-color: #FFA451;  
    border-left-width-value: 1 !important; 
    border-right-width-value: 1 !important;   
    border-top-width: 1 !important;  
    border-bottom-width: 1 !important;