image-000

Date: 2019/07/16

コピペで使える!CSSとHTMLだけで作るシンプルなボタン12個

こんにちは!ANDSPACE コーダーの足立です。

今回は以前の記事に引き続き、CSSとHTMLのみを使った、HTML・CSS初心者でもコピペで使用できるボタンのデザインを掲載していきたいと思います。

ベーシック

ボタンデザイン
HTML css

立体的

ボタンデザイン
css

シャドウ

ボタンデザイン
css

斜体

ボタンデザイン
css

発光

ボタンデザイン
css

グラデーション

ボタンデザイン
css

2色

ボタンデザイン
css

ボーダー

ボタンデザイン
css

上下線

ボタンデザイン
css

四隅

ボタンデザイン
css

罫線

ボタンデザイン
css

点線

ボタンデザイン
css

以上、使いやすいシンプルなデザインでまとめてみました。今回ご紹介したボタンは、全てCSSとHTMLのみで再現できます。
最近暑くなってきてアイスが恋しくなってきた足立でした。

足立

この記事を書いた人

2017年に成人したてながら、家族を支える鳥取出身の家族大好き娘。なんとなくふんわりと情報系の仕事に興味があった為、デザイン専門学校にてWebデザインを専攻する。講師の谷川から、真面目ぶりが買われてスカウトされ、インターンを経験後、入社を決める。コミュニケーションに対する苦手意識はあるものの、コーディング作業は楽しく、学べる事を嬉しく思っている。実家を離れてからは、趣味のTRPGを思う存分堪能している。