DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS實例教程:簡單的button風格的UI按鈕
CSS實例教程:簡單的button風格的UI按鈕
編輯:CSS詳解     
文章簡介:CSS實例教程:簡單的button風格的UI按鈕。

button應該是UI庫中最常用到的一種。我個人對google+的那種簡單的button風格比較喜歡,因為那樣在不同的浏覽器下視覺差異不是很大。不過現在自己確實已經沒有心思去琢磨怎麼去彌補ie的不足,所以下面的東西就不要拿IE打開了。還是貼出代碼吧

<!DOCTYPE Html>

<Html>

<head>
<title></title>

<style type="text/CSS">

.mt{margin-top: 20px;}

.button{

display: inline-block;

*display: inline;

zoom: 1;

padding: 6px 20px;

margin: 0;

cursor: pointer;

border: 1px solid #bbb;

overflow: visible;

font: bold 13px arial, 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 .2s ease-out;

-moz-transition: background-color .2s ease-out;

background-clip: padding-box; /* Fix bleeding */

border-radius: 3px;

box-shadow: 0 1px 0 rgba(0, 0, 0, .3),

0 2px 2px -1px rgba(0, 0, 0, .5),

0 1px 0 rgba(255, 255, 255, .3) inset;

text-shadow: 0 1px 0 rgba(255,255,255, .9);

}

.button:hover{

background-color: #eee;

color: #333;

}

.button:active{

background: #e9e9e9;

position: relative;

top: 1px;

text-shadow: none;

box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;

}

.button.small{

padding: 4px 12px;

}

/* Larger buttons styles */

.button.large{

padding: 12px 30px;

text-transform: uppercase;

}

.button.large:active{

top: 2px;

}

.button.green,.button.red,.button.blue{

color: #FFF;

text-shadow: 0 1px 0 rgba(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));

}

/*********green button***********/

.button.green{

background-color: #57a957;

border-color: #57a957;

}

.button.green:hover{

background-color: #62c462;

}

.button.green:active{

background: #57a957;

}

/************red button***********/

.button.red{

background-color: #c43c35;

border-color: #c43c35;

}

.button.red:hover{

background-color: #ee5f5b;

}

.button.red:active{

background: #c43c35;

}

/*************blue button***************/

.button.blue{

background-color: #269CE9;

border-color: #269CE9;

}

.button.blue:hover{

background-color: #70B9E8;

}

.button.blue:active{

background: #269CE9;

}

/*******disabled button*********/

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

border-color: #eaeaea;

background: #fafafa;

cursor: default;

position: static;

color: #999;

/* Usually, !important should be avoided but here it's really needed :) */

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;

}

/*********group button**********/

.button-group,.button-group li{

display: inline-block;

*display: inline;

zoom: 1;

}

.button-group{

font-size: 0; /* Inline block elements gap - fix */

margin: 0;

padding: 0;

background:#f1f1f1;

border-bottom: 1px solid rgba(0, 0, 0, .07);

padding: 7px;

border-radius: 7px;
}

.button-group li{

margin-right: -1px; /* Overlap each right button border */

}

.button-group .button{

font-size: 13px; /* Set the font size, different from inherited 0 */

border-radius: 0;
}

.button-group .button:active{

box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset,

5px 0 5px -3px rgba(0, 0, 0, .2) inset,

-5px 0 5px -3px rgba(0, 0, 0, .2) inset;

}

.button-group li:first-child .button{

border-radius: 3px 0 0 3px;

}

.button-group li:first-child .button:active{

box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset,

-5px 0 5px -3px rgba(0, 0, 0, .2) inset;

}

.button-group li:last-child .button{

border-radius: 0 3px 3px 0;

}

.button-group li:last-child .button:active{

box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset,

5px 0 5px -3px rgba(0, 0, 0, .2) inset;

}

</style>

</head>

<body>

<button class="small button">Button</button>

<button class="button">Button</button>

<button class="large button">Button</button>

<div class="mt">

<button class="button">Button</button>

<button class="button green">Button</button>

<button class="button red">Button</button>

<button class="button blue">Button</button>

</div>
<div class="mt">

<button class="button" disabled="disabled">Button</button>

<button class="button green" disabled="disabled">Button</button>

<button class="button red" disabled="disabled">Button</button>

<button class="button blue" disabled="disabled">Button</button>

</div>
<div class="mt">

<ul class="button-group">

<li><button class="button">Button1</button></li>

<li><button class="button">Button2</button></li>

<li><button class="button">Button3</button></li>

<li><button class="button">Button4</button></li>

</ul>

</div>

<div class="mt">

<ul class="button-group">

<li><button class="button">Button1</button></li>

<li><button class="button green">Button2</button></li>

<li><button class="button red">Button3</button></li>

<li><button class="button blue">Button4</button></li>

</ul>

</div>

</body>

</Html>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved