久久天天躁狠狠躁夜夜躁综合,日本一区二区三区四区公司,日日夜夜精品视频

超酷的CSS3制作漂亮圓角漸變風(fēng)格按鈕

2012.12.09

超酷的CSS3制作漂亮圓角漸變風(fēng)格按鈕

今天，與大家分享一個(gè)非常實(shí)用的CSS3圓角漸變風(fēng)格。
先看看演示，已經(jīng)創(chuàng)建了CSS（無需圖片或者JavaScript）的一組漸變按鈕。可擴(kuò)展性的基礎(chǔ)上的字體大小的按鈕。按鈕的大小，可以很容易地調(diào)整，通過改變填充和字體大小的值。這種方法的最好的部分是它可以應(yīng)用到任何HTML元素，如DIV，SPAN，P，A，按鈕，輸入等。

這些按鈕是太酷了？是的
純CSS：沒有圖片或JavaScript。
風(fēng)格跨瀏覽器支持（IE，火狐3.6，Chrome瀏覽器和Safari瀏覽器）。
靈活和可擴(kuò)展性：通過改變字體大小和填充值，按鈕的大小和圓角的可調(diào)節(jié)。
它有三個(gè)按鈕狀態(tài)：正常，懸停和活動(dòng)。
它可以應(yīng)用于任何HTML元素：，輸入按鈕，跨度，電話號碼，標(biāo)題等
回退：如果CSS3不支持，它會(huì)顯示一個(gè)的常規(guī)按鈕（沒有漸變和陰影）。

按鈕狀態(tài)
正常狀態(tài)=漸變邊框和陰影樣式。
懸停=較深的梯度
積極的梯度逆轉(zhuǎn)，1px的下降，而較暗的字體顏色。

普通按鈕風(fēng)格

下面的代碼是普通風(fēng)格。按鈕類。我使用em值padding和border-radius屬性，使其可擴(kuò)展的基礎(chǔ)上的字體大小。要調(diào)整圓角和按鈕的大小，簡單地改變邊界半徑，字體大小和填充值。例如：我可以做一個(gè)小的按鈕，通過減少字體大小和填充值（見演示）。

邊界半徑，文字陰影，和box-shadow的詳細(xì)信息，請閱讀我的文章的CSS3的基礎(chǔ) 。

.button { 
    display: inline-block; 
    outline: none; 
    cursor: pointer; 
    text-align: center; 
    text-decoration: none; 
    font: 14px/100% Arial, Helvetica, sans-serif; 
    padding: .5em 2em .55em; 
    text-shadow: 0 1px 1px rgba(0,0,0,.3); 
    -webkit-border-radius: .5em;  
    -moz-border-radius: .5em; 
    border-radius: .5em; 
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    box-shadow: 0 1px 2px rgba(0,0,0,.2); 
} 
.button:hover { 
    text-decoration: none; 
} 
.button:active { 
    position: relative; 
    top: 1px; 
}

顏色漸變樣式

下面的代碼是橙色按鈕的CSS樣式。第一個(gè)背景線是一個(gè)備用的非CSS3的瀏覽器，第二行是Webkit瀏覽器，第三行是為Firefox，最后一行是由Internet Explorer漸變?yōu)V鏡是只讀的

.orange { 
    color: #fef4e9; 
    border: solid 1px #da7c0c; 
    background: #f78d1d; 
    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); 
    background: -moz-linear-gradient(top,  #faa51a,  #f47a20); 
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); 
} 
.orange:hover { 
    background: #f47c20; 
    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015)); 
    background: -moz-linear-gradient(top,  #f88e11,  #f06015); 
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015'); 
} 
  
.orange:active { 
    color: #fcd3a5; 
    background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a)); 
    background: -moz-linear-gradient(top,  #f47a20,  #faa51a); 
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a'); 
}

如何使用我的按鈕？
比方說，你喜歡藍(lán)色的按鈕，想用它在您的網(wǎng)頁上：

首先，將按鈕和藍(lán)色CSS（查看演示源代碼）。
然后，添加class =“按鈕，藍(lán)色的”您希望該按鈕的HTML元素（如

1.<A class="button blue" href="#">Button</A>

的CSS類可以應(yīng)用到鏈接電話號碼，跨度，格，輸入，按鈕等的任何元素，如

本文地址：http://www.boofan.org/archives/179.html

本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊舉報(bào)。

打開APP，閱讀全文并永久保存查看更多類似文章

無需圖片，使用 CSS3 實(shí)現(xiàn)圓角按鈕

CSS3圓角氣泡框，評論對話框非常漂亮

基于jQuery加入購物車飛入動(dòng)畫特效

CSS3系列教程:邊框半徑和圓角 | CSS | 前端觀察

CSS3中支持IE9, Firefox, Safari, Chrome的圓角

HTML5+CSS3 表格設(shè)計(jì)（Table）

更多類似文章 >>

九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

超酷的CSS3制作漂亮圓角漸變風(fēng)格按鈕