给大家带来CSS实例教程:复杂的button作风的UI按钮
Div全称division意为“区分”使用DIV的方法跟使用其他tag的方法一样。破洛洛文章简介：CSS实例教程:复杂的button作风的UI按钮。
button应当是UI库中最经常使用到的一种。我团体对google+的那种复杂的button作风对照喜好，由于那样在分歧的扫瞄器下视觉差别不是很年夜。不外如今本人的确已没故意思往揣摩怎样往填补ie的不敷，以是上面的器材就不要拿ie翻开了。仍是贴出代码吧
<!DOCTYPEhtml>
<html>
<head>
<title></title>
<styletype="text/css">
.mt{margin-top:20px;}
.button{
display:inline-block;
*display:inline;
zoom:1;
padding:6px20px;
margin:0;
cursor:pointer;
border:1pxsolid#bbb;
overflow:visible;
font:bold13pxarial,helvetica,sans-serif;
text-decoration:none;
white-space:nowrap;
color:#555;
background-color:#ddd;
background-image:linear-gradient(top,rgba(255,255,255,1),
rgba(255,255,255,0));
-webkit-transition:background-color.2sease-out;
-moz-transition:background-color.2sease-out;
background-clip:padding-box;/*Fixbleeding*/
border-radius:3px;
box-shadow:01px0rgba(0,0,0,.3),
02px2px-1pxrgba(0,0,0,.5),
01px0rgba(255,255,255,.3)inset;
text-shadow:01px0rgba(255,255,255,.9);
}
.button:hover{
background-color:#eee;
color:#333;
}
.button:active{
background:#e9e9e9;
position:relative;
top:1px;
text-shadow:none;
box-shadow:01px1pxrgba(0,0,0,.3)inset;
}
.button.small{
padding:4px12px;
}
/*Largerbuttonsstyles*/
.button.large{
padding:12px30px;
text-transform:uppercase;
}
.button.large:active{
top:2px;
}
.button.green,.button.red,.button.blue{
color:#FFF;
text-shadow:01px0rgba(0,0,0,.5);
background-image:-webkit-linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0));
background-image:-moz-linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0));
background-image:-o-linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0));
background-image:-ms-linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0));
background-image:linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0));
}
/*********greenbutton***********/
.button.green{
background-color:#57a957;
border-color:#57a957;
}
.button.green:hover{
background-color:#62c462;
}
.button.green:active{
background:#57a957;
}
/************redbutton***********/
.button.red{
background-color:#c43c35;
border-color:#c43c35;
}
.button.red:hover{
background-color:#ee5f5b;
}
.button.red:active{
background:#c43c35;
}
/*************bluebutton***************/
.button.blue{
background-color:#269CE9;
border-color:#269CE9;
}
.button.blue:hover{
background-color:#70B9E8;
}
.button.blue:active{
background:#269CE9;
}
/*******disabledbutton*********/
.button,.button:hover,.button:active{
border-color:#eaeaea;
background:#fafafa;
cursor:default;
position:static;
color:#999;
/*Usually,!importantshouldbeavoidedbuthereitsreallyneeded:)*/
box-shadow:none!important;
text-shadow:none!important;
}
.green,.green:hover,.green:active{
border-color:#57A957;
background:#57A957;
color:#D2FFD2;
}
.red,.red:hover,.red:active{
border-color:#C43C35;
background:#C43C35;
color:#FFD3D3;
}
.blue,.blue:hover,.blue:active{
border-color:#269CE9;
background:#269CE9;
color:#93D5FF;
}
/*********groupbutton**********/
.button-group,.button-groupli{
display:inline-block;
*display:inline;
zoom:1;
}
.button-group{
font-size:0;/*Inlineblockelementsgap-fix*/
margin:0;
padding:0;
background:#f1f1f1;
border-bottom:1pxsolidrgba(0,0,0,.07);
padding:7px;
border-radius:7px;
}
.button-groupli{
margin-right:-1px;/*Overlapeachrightbuttonborder*/
}
.button-group.button{
font-size:13px;/*Setthefontsize,differentfrominherited0*/
border-radius:0;
}
.button-group.button:active{
box-shadow:001pxrgba(0,0,0,.2)inset,
5px05px-3pxrgba(0,0,0,.2)inset,
-5px05px-3pxrgba(0,0,0,.2)inset;
}
.button-groupli:first-child.button{
border-radius:3px003px;
}
.button-groupli:first-child.button:active{
box-shadow:001pxrgba(0,0,0,.2)inset,
-5px05px-3pxrgba(0,0,0,.2)inset;
}
.button-groupli:last-child.button{
border-radius:03px3px0;
}
.button-groupli:last-child.button:active{
box-shadow:001pxrgba(0,0,0,.2)inset,
5px05px-3pxrgba(0,0,0,.2)inset;
}
</style>
</head>
<body>
<buttonclass="smallbutton">Button</button>
<buttonclass="button">Button</button>
<buttonclass="largebutton">Button</button>
<divclass="mt">
<buttonclass="button">Button</button>
<buttonclass="buttongreen">Button</button>
<buttonclass="buttonred">Button</button>
<buttonclass="buttonblue">Button</button>
</div>
<divclass="mt">
<buttonclass="button"disabled="disabled">Button</button>
<buttonclass="buttongreen"disabled="disabled">Button</button>
<buttonclass="buttonred"disabled="disabled">Button</button>
<buttonclass="buttonblue"disabled="disabled">Button</button>
</div>
<divclass="mt">
<ulclass="button-group">
<li><buttonclass="button">Button1</button></li>
<li><buttonclass="button">Button2</button></li>
<li><buttonclass="button">Button3</button></li>
<li><buttonclass="button">Button4</button></li>
</ul>
</div>
<divclass="mt">
<ulclass="button-group">
<li><buttonclass="button">Button1</button></li>
<li><buttonclass="buttongreen">Button2</button></li>
<li><buttonclass="buttonred">Button3</button></li>
<li><buttonclass="buttonblue">Button4</button></li>
</ul>
</div>
</body>
</html>
</p>
符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。 Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。 Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。 运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环 是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。 Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。 直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。 是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。
页:
[1]