一款純css3實現的翻轉按鈕

2022-02-14 13:04:58 字數 1660 閱讀 4365

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

實現的**

html**:

<

article

>

<

a target

="_blank"

class

="btn-fold-1"

href

=""><

span

>donate

span

><

span

>

to rif

span

>

a>

<

a target

="_blank"

class

="btn-fold-2"

href

=""><

span

>don

span

><

span

>ate

span

>

a>

article

>

css3**:

*, *:before, *:after

body

article

article p

article p::-moz-selection

article p::selection

article p a

article p a:hover

article p a::-moz-selection

article p a::selection

.btn-fold-1

.btn-fold-1 span

.btn-fold-1 span:last-child

.btn-fold-1 span:first-child

.btn-fold-1 span:first-child:before

.btn-fold-1:hover

.btn-fold-1:hover > span:first-child

.btn-fold-1:hover > span:first-child:before

.btn-fold-2

.btn-fold-2 span

.btn-fold-2 span:after

.btn-fold-2 span:first-child

.btn-fold-2 span:first-child:after

.btn-fold-2 span:last-child

.btn-fold-2 span:last-child:after

.btn-fold-2:hover

.btn-fold-2:hover > span:first-child

.btn-fold-2:hover > span:first-child:after

.btn-fold-2:hover > span:last-child:after

一款純css3實現的動畫按鈕

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

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

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

一款純css3實現的滑鼠經過按鈕特效

今天再給大家帶來一款純css3實現的滑鼠經過按鈕特效。這款按鈕非常簡單,但效果很好,非常漂亮。一起看下效果圖 實現的 html div align center div class contener div class txt button wifeo div div class circle di...