自定义Button样式
Source
Output
QRCode
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>自定义Button样式</title>
<link rel="stylesheet" type="text/css" href="//g.alicdn.com/kissy/k/5.0.1/css/base.css">
<link rel="stylesheet" type="text/css" href="//g.alicdn.com/kissy/k/5.0.1/button/assets/dpl.css">
<script type="text/javascript" src="//g.alicdn.com/kissy/k/5.0.1/seed.js"></script>
<style type="text/css">
.my-style-button {
text-align: center;
border: 1px solid #CCC;
padding: 4px 10px;
color: #666;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
margin: 10px 30px;
border: 1px solid #999;
background-image: -moz-linear-gradient(-90deg, #f7f7f7, #e2e2e2);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f7f7f7), color-stop(1, #e2e2e2));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr = '#f7f7f7', EndColorStr = '#e2e2e2');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f7f7f7', EndColorStr='#e2e2e2')";
}
.my-style-button-hover {
border-color: #86A33B;
-moz-box-shadow: 0 2px 10px #AAA;
-webkit-box-shadow: 0 2px 10px #AAA;
box-shadow: 0 2px 10px #AAA;
}
.my-style-button-active {
background-image: -moz-linear-gradient(-90deg, #e2e2e2, #f7f7f7);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e2e2e2), color-stop(1, #f7f7f7));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr = '#e2e2e2', EndColorStr = '#f7f7f7');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#e2e2e2', EndColorStr='#f7f7f7')";
}
.my-style-button-focused {
-moz-box-shadow: 0 2px 10px #AACF4C;
-webkit-box-shadow: 0 2px 10px #AACF4C;
box-shadow: 0 2px 10px #AACF4C;
}
.my-button-cls {
text-align: center;
background: #AACF4C;
border: 1px solid #86A33B;
padding: 4px 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
color: white;
margin: 10px 30px;
}
</style>
</head>
<body>
<div class="wrap" style="margin-left:50px;">
<h1>自定义Button样式</h1>
<h3>利用prefixCls自定义样式：</h3>
<div id="container1">
</div>
<h3>利用elCls自定义样式：</h3>
<div id="container2">
</div>
</div>
<script type="text/javascript">
require(['button'], function(Button){
var button1 = new Button({
content : 'Custom',
width : '100px',
prefixCls : 'my-style-',
render : '#container1'
});
button1.render();
var button2 = new Button({
content : 'Custom',
width : '100px',
elCls : 'my-button-cls',
render : '#container2'
});
button2.render();
});
</script>
</body>
</html>