SVGでアニメーション効果を与えたイカしたチェックボックスとラジオボタンのデザインの8種 『Checkboxes and Radio Buttons with SVG』

SVGでアニメーション効果を与えたイカしたチェックボックスとラジオボタンのデザインの8種 『Checkboxes and Radio Buttons with SVG』
このエントリーをはてなブックマークに追加
PR

Checkboxes and Radio Buttons with SVG
By @felipekm

DEMO 表示

SVGを使ったアニメーションで、チェックボックス、ラジオボタンをクリックした時にチェックする様をアニメーションで表したものです、全部で8種類のパターンが作られており、ひとつはお気に入りのものが見つかるかな?と思います

通常のチェックボックスやラジオボタンじゃ味気ない時に、アクセントとして導入するものいいのじゃないかなと思います

 

チェックボックスにペケマークをつけるアニメーション

svg001

 

ラジオボタンを塗りつぶすアニメーション

svg002

 

チェックボックスにチェックマークをつけるアニメーション

svg003

 

ラジオボタンに丸印をつけるアニメーション

svg004

 

チェックボックス内を塗りつぶすアニメーション

svg005

 

ラジオボタン内をグリグリと塗りつぶすアニメーション

svg006

 

チェックボックスを線を入れるアニメーション

svg007

 

二重線でチェックするアニメーション

svg008

 

 

コードをダウンロードする

DOWNLOAD
PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)