单选html美化,利用CSS3实现单选多选按钮美化特效

特效描述：利用CSS3实现 单选多选 按钮美化特效。利用CSS3实现单选多选按钮美化特效

代码结构

1. 引入CSS

2. HTML代码

基本的Checkbox

Square

Curvy

Circle

自定义图标

Include

Favorite

Add

checkbox的颜色

Primary

Success

Warning

Info

Danger

checkbox边框颜色

Primary

Success

Warning

Info

Danger

鼠标滑过效果

Solid

Outline

不带边框的checkbox

Include

Ignore

平滑的动画效果

Jan

Feb

Mar

Apr

另类的checkbox动画效果

Bounce

Jelly

Tada

Vibrate

Rotate

禁用checkbox

Disabled

Disabled

Disabled

---

checkbox切换效果

切换图标

ON

OFF

不带边框

WIFI ON

WIFI OFF

黑白色

Preview

Preview

Play

Pause

Read

Unread

切换时改变颜色

Good

Bad

Reply

Forward

---

单选按钮

基本的单选按钮

Male

Female

Special

单选按钮颜色

Primary

Success

Info

Warning

Danger

带矩形边框的单选按钮

Male

Female

Special

带矩形边框和颜色的单选按钮

Primary

Success

Info

Warning

Danger

边框颜色变化的单选按钮

$10

$50

$100

$500

$1000

不带边框的单选按钮

Single

Married

In relationship

单选按钮的平滑动画

Cool

Emotion

Happy

Neutral

Devil

另类动画的单选按钮

Lightning

Cloudy

Raining

Snowy

Windy

禁用单选按钮

Today

Tomorrow

Next week

切换单选按钮图标

Bluetooth

Bluetooth

Wifi

Wifi

Ethernet

Ethernet

不带labels

---

自定义字体图标

FONTAWESOME

fa-check

fa-close

fa-heart-o

fa-heart

BOOTSTRAP GLYPHICONS

glyphicon-ok

glyphicon-remove

glyphicon-heart-empty

glyphicon-heart

MATERIAL DESIGN ICONS (MDI)

mdi-check

mdi-close

mdi-heart-outline

mdi-heart

MATERIAL DESIGN ICONS (ZMDI)

zmdi-check

zmdi-close

zmdi-favorite-outline

zmdi-favorite

TYPICONS

typcn-tick

typcn-times

typcn-heart-outline

typcn-heart

IONICONS

ion-checkmark-round

ion-close-round

ion-ios-heart-outline

ion-ios-heart

GOOGLE MATERIAL DESIGN ICONS

done

clear

favorite_border

favorite