一款基於css3的動畫按鈕

2021-09-06 19:46:58 字數 3022 閱讀 7993

之前為大家分享了 推薦10款純css3實現的實用按鈕。今天給大家帶來一款基於css3的動畫按鈕。實現的效果圖如下:

實現的**。

html**:

<

div

class

="share-buttons"

>

<

div

class

="share-button"

>

<

div

class

="share-button-secondary"

>

<

div

class

="share-button-secondary-content"

>

share on twitter

div>

div>

<

div

class

="share-button-primary"

>

<

i class

="share-button-icon fa fa-twitter"

>

i>

div>

div>

<

div

class

="share-button"

>

<

div

class

="share-button-secondary"

>

<

div

class

="share-button-secondary-content"

>

share on facebook

div>

div>

<

div

class

="share-button-primary"

>

<

i class

="share-button-icon fa fa-facebook"

>

i>

div>

div>

<

div

class

="share-button"

>

<

div

class

="share-button-secondary"

>

<

div

class

="share-button-secondary-content"

>

pin on pinterest

div>

div>

<

div

class

="share-button-primary"

>

<

i class

="share-button-icon fa fa-pinterest"

>

i>

div>

div>

<

div

class

="share-button"

>

<

div

class

="share-button-secondary"

>

<

div

class

="share-button-secondary-content"

>

share on tumblr

div>

div>

<

div

class

="share-button-primary"

>

<

i class

="share-button-icon fa fa-tumblr"

>

i>

div>

div>

<

div

class

="share-button"

>

<

div

class

="share-button-secondary"

>

<

div

class

="share-button-secondary-content"

>

share on google+

div>

div>

<

div

class

="share-button-primary"

>

<

i class

="share-button-icon fa fa-google-plus"

>

i>

div>

div>

div>

css3**:

body

*.share-buttons

.share-buttons .share-button

.share-buttons .share-button:first-child

.share-buttons .share-button:after

.share-button

.share-button:hover

.share-button:hover .share-button-primary

.share-button:hover .share-button-secondary-content

.share-button-primary

.share-button-icon

.share-button-secondary

.share-button-secondary-content

一款純css3實現的動畫按鈕

今天給大家分享一款純css3實現的動畫按鈕。第一排的按鈕當滑鼠經過的背景色動畫切換,圖示從右側飛入,第二排的按鈕當滑鼠經過的時候邊框動畫切換,圖示右側飛入,效果非常好,一起看下效果圖 實現的 html div class black a href class btn span become a me...

一款純css3實現的翻轉按鈕

之前為大家介紹了好多純css3實現的很漂亮的按鈕。今天小編要給各再分享一款純css3實現的翻轉按鈕。實現中給出了兩種的翻轉特效,一種是基於按扭的左邊緣為中心線,另一種是基於按鈕的中間為中心線。我們一起看下效果圖 實現的 html article a target blank class btn fo...

一款純css3實現的顏色漸變按鈕

之前為大家分享了推薦10款純css3實現的實用按鈕,今天給大家帶來一款純css3實現的顏色漸變按鈕。這款按鈕的邊框和文字的顏色通過css3實現兩種顏色的漸變,效果非常好看,一起看下效果圖 實現的 html div class container a target blank class btn gr...