CSS 圓角扁平按鈕 誰能給我一個(gè)？ 不帶圖片CSS寫出來的

!doctype?html

創(chuàng)新互聯(lián)公司主要從事網(wǎng)站制作、成都網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)隴南,10年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

html?lang="en"

head

meta?charset="UTF-8"

titleDocument/title

style

.btn{display:inline-block;width:60px;height:?25px;line-height:?25px;text-align:center;color:#fff;border-radius:?5px;text-decoration:?none;

background:-webkit-linear-gradient(270deg,rgb(96,161,255),rgb(33,121,255)?30%,rgb(4,103,255)?30%,rgb(0,97,255))}

.btn:active{background:-webkit-linear-gradient(270deg,rgb(80,121,255),rgb(20,121,255)?30%,rgb(1,103,255)?30%,rgb(0,60,255))}

/style

/head

body

a?href="#"?class="btn"發(fā)貨/a

/body

/html

大小可以自己改一下

有辦法通過CSS將按鈕的形狀變成圓形的嗎？求解

有 你的按鈕應(yīng)該是正方形假設(shè)x=y那么如下

border-radius:x/2;就行了

但是IE9以下瀏覽器不支持，你的在比較高級的瀏覽器中查看

如何創(chuàng)建一個(gè)圓形的按鈕

教程參考Colin Garven提出的實(shí)現(xiàn)圓形進(jìn)度按鈕的思路。我們將使用Jake Archibald講過的SVG素描動(dòng)畫技術(shù)來實(shí)現(xiàn)圓形進(jìn)度過程，然后提供一個(gè)成功或失敗的狀態(tài)來顯示完成后的最終狀態(tài)。

今天給大家展示如何實(shí)現(xiàn)一個(gè)漂亮的進(jìn)度按鈕的思路，這個(gè)思路來自于Colin Garven的不可思議的提交按鈕。我們首先看一下實(shí)現(xiàn)這個(gè)思路需要的步驟，順便欣賞一下這個(gè)動(dòng)畫^^。正如Colin在評論中提到的，實(shí)現(xiàn)這個(gè)按鈕背后的想法如下：一旦點(diǎn)擊，提交按鈕就變成一個(gè)圓環(huán)，并且使用這個(gè)圓環(huán)的邊界展示一個(gè)進(jìn)度動(dòng)畫。當(dāng)這個(gè)進(jìn)度動(dòng)畫完成時(shí)，按鈕將再次恢復(fù)成原來大小，同時(shí)會顯示一個(gè)標(biāo)記用來確認(rèn)提交已完成。接下來我們將完成這個(gè)思路，并且針對提交失敗的情況我們添加另一個(gè)標(biāo)記。

如果只考慮CSS技術(shù)，也是有可能實(shí)現(xiàn)這樣的按鈕和動(dòng)畫效果的。其中最具挑戰(zhàn)的部分還是環(huán)形的進(jìn)度效果，這里提供一個(gè)聰明的技巧——使用Clip屬性來實(shí)現(xiàn)進(jìn)度效果。關(guān)于這個(gè)技巧，Anders Ingemann寫了一篇詳實(shí)的教程。但是這次我們還是基于SVG技術(shù),CSS轉(zhuǎn)換和一點(diǎn)兒JavaScript來實(shí)現(xiàn)。關(guān)于環(huán)形進(jìn)度效果和叉號，我們將使用Jake Archibald介紹的動(dòng)畫素描技術(shù)。

需要注意的是動(dòng)畫SVG在瀏覽器的兼容上還是存在問題，這些類型的技術(shù)仍在起步階段，所以本教程只用來實(shí)驗(yàn)練習(xí)，期待在未來可以派上用場。

所以，讓我們開始吧。

如果你有仔細(xì)觀察Colin的Dribbble上展示的效果動(dòng)畫，可能已經(jīng)注意到，我們需要關(guān)注按鈕的幾個(gè)狀態(tài)。

有意思的部分是按鈕從一個(gè)狀態(tài)轉(zhuǎn)換成另一個(gè)狀態(tài)。

首先，我們要使用透明背景和邊框顏色來展示一個(gè)簡單的按鈕，鼠標(biāo)懸停時(shí)，我們使用邊框色來填充該按鈕，并且把按鈕上的文本變成白色。

AnimatedProgressButton01_hover (1)

當(dāng)我們點(diǎn)擊按鈕(例如,為了提交一個(gè)表單)，我們要淡出文本，減少按鈕的寬度使它變成一圓圈，并且使按鈕的邊框變厚，在邊框上開始一個(gè)進(jìn)度動(dòng)畫。我們將使用SVG圓圈來實(shí)現(xiàn)進(jìn)度動(dòng)畫，因此我們需要確保動(dòng)畫開始的瞬間，按鈕圓圈和SVG圓圈大小一致，位置一致。然后我們繪制圓的邊線，模擬提交的過程。

AnimatedProgressButton02_progress

一旦提交完成，即邊線都繪制完。我們必須使按鈕再次擴(kuò)大到原來大小，并且在提交成功時(shí)繪制對號，把按鈕的顏色變成相應(yīng)的顏色。

AnimatedProgressButton03_success

提交失敗的情況下,我們也需要一個(gè)錯(cuò)誤狀態(tài)的風(fēng)格。

AnimatedProgressButton04_error

接下來，讓我們創(chuàng)建標(biāo)記與我們所需要的元素。

為創(chuàng)建我們的標(biāo)記，我們需要一個(gè)主容器，一個(gè)按鈕(其中有包含文本的一個(gè)span元素)和三個(gè)SVG:

!-- progress button --

div id="progress-button" class="progress-button"

!-- button with text --

buttonspanSubmit/span/button

!-- svg circle for progress indication --

svg class="progress-circle" width="70" height="70"

path d="m35,2.5c17.,0 32.5,14. 32.5,32.5c0,17. -14.,32.5 -32.5,32.5c-17.,0 -32.5,-14. -32.5,-32.5c0,-17. 14.,-32.5 32.5,-32.5z"/

/svg

!-- checkmark to show on success --

svg class="checkmark" width="70" height="70"

path d="m31.5,46.5l15.3,-23.2"/

path d="m31.5,46.5l-8.5,-7.1"/

/svg

!-- cross to show on error --

svg class="cross" width="70" height="70"

path d="m35,35l-9.3,-9.3"/

path d="m35,35l9.3,9.3"/

path d="m35,35l-9.3,9.3"/

path d="m35,35l9.3,-9.3"/

/svg

/div!-- /progress-button --

我們預(yù)先使用Method Draw（一個(gè)易于使用的在線SVG編輯器）繪制對號和叉號。所有SVG的尺寸為70×70，因?yàn)槲覀儼粹o的高度為70像素。我們希望圓的邊線為5像素，這樣看起來更像Colin的效果。當(dāng)我們在圖形編輯器中繪制時(shí)，需要設(shè)置正確的半徑，整個(gè)圓連同它的邊線為70像素。需要注意在SVG中邊線為半嵌入式（即一半在圓內(nèi)一半在圓外），例如，邊線為2，半徑為10的圓，它的寬和高為20+2，而不是10+4（邊線的2倍），因此公式為2r+邊界。所以在我們的案例中我們知道2r+5 = 70,因此我們需要一個(gè)半徑為32.5的圓。最終得到的形狀為：

circle cx = "35" cy="35" r="32.5"/

不幸的是，我們不能僅僅使用這個(gè)基本的形狀，因?yàn)椤奥窂健钡钠瘘c(diǎn)在瀏覽器中是不同的，所以我們不能控制“進(jìn)度動(dòng)畫”的起始點(diǎn)。所以，我們需要把這個(gè)圓轉(zhuǎn)成路徑，而不是（上面的基本形狀）。你可以使用Method Draw中Object菜單下的Convert to Path很容易實(shí)現(xiàn)。

叉號我們將使用4個(gè)路徑，這樣我們可以從中心點(diǎn)開始繪制，使它看起來跟對號的動(dòng)畫類似。

現(xiàn)在我們有了我們需要的所有元素。讓我們想想操作的流程，開始樣式！

首先，我們需要給按鈕容器添加樣式。它就像按鈕的外層皮膚，讓我們使它更像一個(gè)按鈕，我們把它的顯示設(shè)置為inline-block。這樣我們可以在文檔流里使用它。

.progress-button {

position: relative;

display: inline-block;

text-align: center;

}

我們的按鈕需要一些著色和排版，為了讓它看起來更像Colin的按鈕，我們需要設(shè)置正確的邊框，使用Montserrat字體：

.progress-button button {

display: block;

margin: 0 auto;

padding: 0;

width: 250px;

height: 70px;

border: 2px solid #1ECD97;

border-radius: 40px;

background: transparent;

color: #1ECD97;

letter-spacing: 1px;

font-size: 18px;

font-family: 'Montserrat', sans-serif;

-webkit-transition: background-color 0.3s, color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s;

transition: background-color 0.3s, color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s;

}

我們還需要為那些將使用動(dòng)畫的屬性添加一個(gè)過渡效果，如background-color,width等等。

在鼠標(biāo)懸停時(shí)，我們將更改背景色和字體色：

.progress-button button:hover {

background-color: #1ECD97;

color: #fff;

}

讓我們移除任何高亮的輪廓：

.progress-button button:focus {

outline: none;

}

所有的SVG需要絕對定位在中心位置，并且我們將不允許任何pointer-events：

.progress-button svg {

position: absolute;

top: 0;

left: 50%;

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

pointer-events: none;

}

因?yàn)槲覀冎幌氩僮鬟吘€，所以路徑不應(yīng)該有任何填充。路徑除了在特殊狀態(tài)下，其他狀態(tài)都不需要展示它們，所以我們通過設(shè)置它們的透明度為0來隱藏它們。

.progress-button svg path {

opacity: 0;

fill: none;

}

我們的進(jìn)度環(huán)將通過設(shè)置圓形路徑的邊線為5來實(shí)現(xiàn)：

.progress-button svg.progress-circle path {

stroke: #1ECD97;

stroke-width: 5;

}

成功/錯(cuò)誤的指示符號將由細(xì)的白色邊線繪制，我們還將設(shè)置邊線的linecap為round,這樣看起來更加柔和。這兩個(gè)符號都會有一個(gè)快速的不透明度的過渡效果。

.progress-button svg.checkmark path,

.progress-button svg.cross path {

stroke: #fff;

stroke-linecap: round;

stroke-width: 4;

-webkit-transition: opacity 0.1s;

transition: opacity 0.1s;

}

現(xiàn)在讓我們回顧一下，記住我們的總體規(guī)劃。我們需要可以“樣式化”按鈕和它的特殊元素的三種額外狀態(tài)（除了默認(rèn)狀態(tài)），加載狀態(tài)，成功和錯(cuò)誤的狀態(tài)。因此我們將使用類“l(fā)oading”,”success”,”error”來表示這三種狀態(tài)。

當(dāng)我們開始加載過程時(shí)，這個(gè)按鈕將轉(zhuǎn)變成一個(gè)圓，看起來更像一個(gè)表示進(jìn)度的圓環(huán)。

.loading.progress-button button {

width: 70px; /* make a circle */

border-width: 5px;

border-color: #ddd;

background-color: transparent;

color: #fff;

}

還記得么，我們在定義按鈕樣式時(shí)已經(jīng)設(shè)置了過渡效果。

當(dāng)我們開始進(jìn)度動(dòng)畫時(shí)，文本應(yīng)該快速淡出。

.loading.progress-button span {

-webkit-transition: opacity 0.15s;

transition: opacity 0.15s;

}

……通過設(shè)置opacity為0：

.loading.progress-button span,

.success.progress-button span,

.error.progress-button span {

opacity: 0; /* keep it hidden in all states */

}

當(dāng)從加載狀態(tài)變成成功或錯(cuò)誤的狀態(tài)時(shí)，我們不需要設(shè)置過渡，只需把文本簡單的隱藏掉就可以。

當(dāng)我們刪除所有類返回到默認(rèn)狀態(tài)時(shí)，我們需要稍長一點(diǎn)兒的時(shí)間來顯示文本。所以我們需要定義不同的過渡和延時(shí)時(shí)間來回到正常的顯示狀態(tài)。

/* Transition for when returning to default state */

.progress-button button span {

-webkit-transition: opacity 0.3s 0.1s;

transition: opacity 0.3s 0.1s;

}

當(dāng)我們到達(dá)最后的狀態(tài)，提交成功或失敗。這時(shí)我們需要重新定義一下按鈕的過渡效果。

.success.progress-button button,

.error.progress-button button {

-webkit-transition: background-color 0.3s, width 0.3s, border-width 0.3s;

transition: background-color 0.3s, width 0.3s, border-width 0.3s;

}

接下來我們?yōu)樽罱K狀態(tài)設(shè)置顏色相關(guān)的樣式：

.success.progress-button button {

border-color: #1ECD97;

background-color: #1ECD97;

}

.error.progress-button button {

border-color: #FB797E;

background-color: #FB797E;

}

當(dāng)我們應(yīng)用相應(yīng)類的同時(shí)，需要展示SVG路徑，并通過下面設(shè)置的過渡效果來實(shí)現(xiàn)stroke-dashoffset的動(dòng)畫。

.loading.progress-button svg.progress-circle path,

.success.progress-button svg.checkmark path,

.error.progress-button svg.cross path {

opacity: 1;

-webkit-transition: stroke-dashoffset 0.3s;

transition: stroke-dashoffset 0.3s;

}

通過定義一個(gè)額外的樣式類為按鈕的寬度動(dòng)畫添加一些可選的easing

.elastic.progress-button button {

-webkit-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.25, 0.25, 0.4, 1), border-width 0.3s, border-color 0.3s;

-webkit-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.25, 0.25, 0.4, 1.6), border-width 0.3s, border-color 0.3s;

transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.25, 0.25, 0.4, 1.6), border-width 0.3s, border-color 0.3s;

}

.loading.elastic.progress-button button {

-webkit-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.6, 0, 0.75, 0.75), border-width 0.3s, border-color 0.3s;

-webkit-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.6, -0.6, 0.75, 0.75), border-width 0.3s, border-color 0.3s;

transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.6, -0.6, 0.75, 0.75), border-width 0.3s, border-color 0.3s;

}

如果你想研究其他的easing函數(shù)，可以使用Ceaser,這個(gè)工具是由Matthew Lein提供的CSS Easing動(dòng)畫工具。

目前為止樣式已經(jīng)OK，讓我們繼續(xù)我們的魔術(shù)^^

JAVASCRIPT

我們將首先初始化/緩存一些元素:button是一個(gè)HTML的按鈕元素，progressEl是SVG元素用來表示圓形進(jìn)度條，successEl,errorEl兩個(gè)SVG元素分別用來表示對號和叉號。

function UIProgressButton( el, options ) {

this.el = el;

this.options = extend( {}, this.options );

extend( this.options, options );

this._init();

}

UIProgressButton.prototype._init = function() {

this.button = this.el.querySelector( 'button' );

this.progressEl = new SVGEl( this.el.querySelector( 'svg.progress-circle' ) );

this.successEl = new SVGEl( this.el.querySelector( 'svg.checkmark' ) );

this.errorEl = new SVGEl( this.el.querySelector( 'svg.cross' ) );

// init events

this._initEvents();

// enable button

this._enable();

}

}

SVGEl.prototype._init = function() {

var self = this;

this.paths.forEach( function( path, i ) {

self.pathsArr[i] = path;

path.style.strokeDasharray = self.lengthsArr[i] = path.getTotalLength();

} );

// undraw stroke

this.draw(0);

}

// val in [0,1] : 0 - no stroke is visible, 1 - stroke is visible

SVGEl.prototype.draw = function( val ) {

for( var i = 0, len = this.pathsArr.length; i len; ++i ){

this.pathsArr[ i ].style.strokeDashoffset = this.lengthsArr[ i ] * ( 1 - val );

}

}

接下來我們需要給按鈕綁定click事件。這個(gè)按鈕最初為一個(gè)圓形動(dòng)畫（通過添加loading類）。該動(dòng)畫結(jié)束后，現(xiàn)有的回調(diào)函數(shù)被調(diào)用（如果在options里有指定的話）或者我們只是將進(jìn)行到100%（這個(gè)“假”動(dòng)畫的速度與css中定義的stroke-dashoffset的過渡是相同的），在這個(gè)點(diǎn)時(shí)按鈕是不可點(diǎn)擊的。

UIProgressButton.prototype._initEvents = function() {

var self = this;

this.button.addEventListener( 'click', function() { self._submit(); } );

}

UIProgressButton.prototype._submit = function() {

classie.addClass( this.el, 'loading' );

var self = this,

onEndBtnTransitionFn = function( ev ) {

if( support.transitions ) {

this.removeEventListener( transEndEventName, onEndBtnTransitionFn );

}

this.setAttribute( 'disabled', '' );

if( typeof self.options.callback === 'function' ) {

self.options.callback( self );

}

else {

self.setProgress(1);

self.stop();

}

};

if( support.transitions ) {

this.button.addEventListener( transEndEventName, onEndBtnTransitionFn );

}

else {

onEndBtnTransitionFn();

}

}

一旦進(jìn)度達(dá)到100%,我們需要重置的圓形進(jìn)度條的路徑。同時(shí),我們會顯示成功的對號標(biāo)識或錯(cuò)誤的叉號標(biāo)識的路徑。一段時(shí)間后(options.statusTime)我們“拉開”任何狀態(tài)指示器的路徑，再次啟用按鈕。注意,如圖所示,我們通過CSS控制轉(zhuǎn)換。

UIProgressButton.prototype.stop = function( status ) {

var self = this,

endLoading = function() {

self.progressEl.draw(0);

if( typeof status === 'number' ) {

var statusClass = status = 0 ? 'success' : 'error',

statusEl = status =0 ? self.successEl : self.errorEl;

statusEl.draw( 1 );

// add respective class to the element

classie.addClass( self.el, statusClass );

// after options.statusTime remove status and undraw the respective stroke and enable the button

setTimeout( function() {

classie.remove( self.el, statusClass );

statusEl.draw(0);

self._enable();

}, self.options.statusTime );

}

else {

self._enable();

}

classie.removeClass( self.el, 'loading' );

};

// give it a little time (ideally the same like the transition time) so that the last progress increment animation is still visible.

setTimeout( endLoading, 300 );

}

按鈕完成！

如何用CSS代碼設(shè)定按鈕的圓角樣式？

用 圖片做個(gè)你想要的按鈕，然后給他加超鏈接唄，要是想提交表單，那么需要用js

div+css中將默認(rèn)的單選按鈕樣式（圓的）變成正方形的樣式怎么寫?

1、首先打開hbuilder軟件，新建幾個(gè)默認(rèn)的復(fù)選框。

2、然后在上方的style標(biāo)簽設(shè)置input的樣式，先設(shè)置input的display屬性為none，將默認(rèn)的單選框去掉，在設(shè)置一下各個(gè)單選框的margin的距離。

3、接著在下方繼續(xù)設(shè)置樣式，設(shè)置label標(biāo)簽的before和after偽元素，將原有before的單選框選中狀態(tài)的屬性“checked+label”設(shè)置變?yōu)榧t色實(shí)心框，同時(shí)未選中的狀態(tài)的“l(fā)abel::after”為白色空心方框。

4、最后打開瀏覽器，即可看到設(shè)置好的樣式，其中被選中的是紅色的實(shí)心方框，沒被選擇的則是沒有顏色的方框。

css圓形按鍵下方有字

css圓形按鍵下方有字可以帶提示信息div。步驟如下：

1、新建html文檔。

2、書寫hmtl代碼。

3、書寫css公用樣式表代碼。

4、書寫css代碼。代碼整體結(jié)構(gòu)。

6、查看效果。

分享文章：css圓形按鈕樣式,圓形button
標(biāo)題鏈接：http://chinadenli.net/article25/dsggoji.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、、定制開發(fā)、網(wǎng)站營銷、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)