给大家带来CSS实例教程:复杂的button作风的UI按钮

只看该作者 · 发表于 2015-1-15 22:52:03

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

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[disabled],.button[disabled]:hover,.button[disabled]:active{

border-color:#eaeaea;

background:#fafafa;

cursor:default;

position:static;

color:#999;

/*Usually,!importantshouldbeavoidedbuthereitsreallyneeded:)*/

box-shadow:none!important;

text-shadow:none!important;

}

.green[disabled],.green[disabled]:hover,.green[disabled]:active{

border-color:#57A957;

background:#57A957;

color:#D2FFD2;

}

.red[disabled],.red[disabled]:hover,.red[disabled]:active{

border-color:#C43C35;

background:#C43C35;

color:#FFD3D3;

}

.blue[disabled],.blue[disabled]:hover,.blue[disabled]: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支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。

只看该作者 · 发表于 2015-1-17 19:15:34

Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

只看该作者 · 发表于 2015-1-24 11:27:22

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

只看该作者 · 发表于 2015-2-1 10:00:41

运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

只看该作者 · 发表于 2015-2-7 04:44:15

是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

只看该作者 · 发表于 2015-3-6 19:27:51

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

只看该作者 · 发表于 2015-3-13 08:08:25

直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

只看该作者 · 发表于 2015-3-20 17:17:45

是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 给大家带来CSS实例教程:复杂的button作风的UI按钮

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子