【CSS】シンプルなボタンデザイン実装サンプル集
- 2019.8.26
- CSS

いろんなボタンをまとめました。

ボタンだー

ボタンでーす
もくじ
1. しっかり企業系のボタン
HTMLとCSSはこちら
HTML
<section> <a href="#" class="btn_01">BUTTON</a> </section>
CSS
section { max-width: 300px; margin: 0 auto; } a.btn_01 { display: flex; justify-content: center; align-items: center; background: linear-gradient(#4fb5ef, #0076b9 100%); border: 1px solid #005e94; border-radius: 12px; box-shadow: inset 0px 0px 2px 0px rgb(255, 255, 255); box-shadow: 0px 4px 4px 0px rgb(175, 175, 175); box-sizing: border-box; width: 100%; height: 50px; padding: 0 20px 0 70px; color: #fff; font-size: 16px; text-align: left; text-decoration: none; position: relative; transition-duration: 0.2s; } a.btn_01:hover { opacity: .7; } a.btn_01:before { content: ""; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 8px; border-color: transparent transparent transparent #ffffff; position: absolute; top: 50%; left: 23px; margin-top: -7px; } a.btn_01:after { content: ""; display: inline-block; width: 1px; height: 100%; background-color: #005e94; box-shadow: 0px 0px 2px 0px rgb(255, 255, 255); position: absolute; top: 0; left: 50px; }
2.シンプルな四角ボタン、左に三角
HTMLとCSSはこちら
HTML
<section> <a href="#" class="btn_02">BUTTON</a> </section>
CSS
section { max-width: 300px; margin: 0 auto; } a.btn_02 { display: flex; justify-content: center; align-items: center; background: #fff; border: 1px solid #228bc8; box-sizing: border-box; width: 100%; height: 50px; padding: 0 6% 0 12%; color: #228bc8; font-size: 16px; text-align: left; text-decoration: none; position: relative; transition-duration: 0.2s; } a.btn_02:hover { background: #228bc8; color: #fff; } a.btn_02:before { content: ""; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 8px; border-color: transparent transparent transparent #228bc8; position: absolute; top: 50%; left: 6%; margin-top: -7px; } a.btn_02:hover:before { border-color: transparent transparent transparent #fff; }
HTMLとCSSはこちら
HTML
<section> <a href="#" class="btn_02_a"><span>BUTTON</span></a> </section>
CSS
section { max-width: 300px; margin: 0 auto; } a.btn_02_a { display: block; color: #fff; font-size: 16px; padding: 1.5rem .5rem; background-color: #e22939; text-align: center; text-decoration: none; transition-duration: 0.3s; } a.btn_02_a:hover { background: #000000; } a.btn_02_a span { position: relative; padding-left: 36px; } a.btn_02_a span:before { content: ''; width: 26px; height: 26px; background: #ffffff; border-radius: 50%; position: absolute; top: 50%; left: 0; margin-top: -13px; } a.btn_02_a span:after { content: ''; width: 6px; height: 6px; border: 0; border-top: 3px solid #e22939; border-right: 3px solid #e22939; transform: rotate(45deg); position: absolute; top: 50%; left: 7px; margin-top: -5px; } a.btn_02_a:hover span:after { border-top: 3px solid #000000; border-right: 3px solid #000000; }
3.シンプルな角丸ボタン、右に矢印
HTMLとCSSはこちら
HTML
<section> <a href="#" class="btn_03">BUTTON</a> </section>
CSS
section { max-width: 300px; margin: 0 auto; } a.btn_03 { display: flex; justify-content: center; align-items: center; width: 100%; height: 50px; position: relative; background: #228bc8; border: 1px solid #228bc8; border-radius: 30px; box-sizing: border-box; padding: 0 45px 0 25px; color: #fff; font-size: 16px; letter-spacing: 0.1em; line-height: 1.3; text-align: left; text-decoration: none; transition-duration: 0.3s; } a.btn_03:before { content: ''; width: 8px; height: 8px; border: 0; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); position: absolute; top: 50%; right: 25px; margin-top: -6px; } a.btn_03:hover { background: #fff; color: #228bc8; } a.btn_03:hover:before { border-top: 2px solid #228bc8; border-right: 2px solid #228bc8; }
4.シンプルな四角ボタン、左に矢印
HTMLとCSSはこちら
HTML
<section> <a href="#" class="btn_04">BUTTON</a> </section>
CSS
section { max-width: 300px; margin: 0 auto; } a.btn_04 { display: flex; justify-content: center; align-items: center; width: 100%; height: 50px; position: relative; background: #228bc8; border: 1px solid #228bc8; box-sizing: border-box; padding: 0 25px 0 40px; color: #fff; font-size: 16px; letter-spacing: 0.1em; line-height: 1.3; text-align: left; text-decoration: none; transition-duration: 0.3s; } a.btn_04:before { content: ''; width: 8px; height: 8px; border: 0; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); position: absolute; top: 50%; left: 25px; margin-top: -6px; } a.btn_04:hover { background: #fff; color: #228bc8; } a.btn_04:hover:before { border-top: 2px solid #228bc8; border-right: 2px solid #228bc8; }
5.付箋のようなボタン
HTMLとCSSはこちら
HTML
<section> <a href="#" class="btn_05"><span>BUTTON</span></a> </section>
CSS
section { max-width: 300px; margin: 0 auto; } a.btn_05 { display: flex; justify-content: center; align-items: center; width: 100%; height: 70px; background-color: #e8a48b; box-sizing: border-box; color: #fff; font-size: 16px; letter-spacing: 0.1em; line-height: 2.0; text-decoration: none; transition-duration: 0.3s; position: relative; } a.btn_05:before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 0; border-style: solid; border-width: 30px 40px 0 0; border-color: #ffffff transparent transparent transparent; } a.btn_05:after { content: ""; position: absolute; top: -6px; left: 5px; width: 0; height: 0; border-style: solid; border-width: 0 0 40px 30px; border-color: transparent transparent #efefef transparent; box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.15); transform: rotate(16deg); } a.btn_05:hover { background-color: #e6de6b; } a.btn_05 span { position: relative; padding-left: 16px; letter-spacing: 0.05em; } a.btn_05 span:before { content: ''; width: 6px; height: 6px; border: 0; border-top: solid 2px #fff; border-right: solid 2px #fff; transform: rotate(45deg); position: absolute; top: 50%; left: 0; margin-top: -4px; }
6.立体的なボタン、押せるので楽しい
HTMLとCSSはこちら
HTML
<section> <a href="#" class="btn_06"><span>BUTTON</span></a> </section>
CSS
section { max-width: 300px; margin: 0 auto; } a.btn_06 { display: flex; justify-content: center; align-items: center; width: 100%; height: 50px; box-sizing: border-box; background: repeating-linear-gradient(45deg, #ffffff, #ffffff 3px, #e7e7e7 3px, #e7e7e7 30px); color: #333; font-size: 14px; letter-spacing: 0.1em; text-decoration: none; position: relative; } a.btn_06 span { display: flex; justify-content: center; align-items: center; width: 100%; height: 50px; background: #fff; border: 1px solid #000; box-sizing: border-box; position: absolute; top: -6px; left: -6px; transition-duration: 0.2s; } a.btn_06:hover span { left: -1px; top: -1px; }
HTMLとCSSはこちら
HTML
<section> <a href="#" class="btn_06-2"><span>BUTTON</span></a> </section>
CSS
section { max-width: 300px; margin: 0 auto; } a.btn_06-2 { display: block; color: #ffffff; font-size: 20px; font-weight: bold; line-height: 1.2; text-decoration: none; text-align: center; padding: 1.3em .5em; background: rgba(0, 0, 0, 0.2); border: 1px solid transparent; border-radius: 6px; box-sizing: border-box; max-width: 360px; margin: 0 auto; position: relative; } a.btn_06-2 span { position: relative; display: block; transform: translate(-3px, -3px); transition: 0.3s; z-index: +1; } a.btn_06-2:after { content: ""; position: absolute; top: 0; left: 0; margin: auto; width: 100%; height: 100%; background: #e1000e; border-radius: 6px; box-sizing: border-box; transform: translate(-3px, -3px); transition: 0.3s; } a.btn_06-2:hover span { transform: translate(0, 0); } a.btn_06-2:hover:after { transform: translate(0, 0); } @media all and (max-width: 1023px) { a.btn_06-2 { font-size: 18px; } } @media all and (max-width: 767px) { a.btn_06-2 { font-size: 16px; } }
7.右下に三角マークを置いてみたボタン
HTMLとCSSはこちら
HTML
<section> <a href="#" class="btn_07">BUTTON<span></span></a> </section>
CSS
section { max-width: 300px; margin: 0 auto; } a.btn_07 { display: flex; justify-content: center; align-items: center; background: #fff; border: 1px solid #228bc8; box-sizing: border-box; width: 100%; height: 80px; padding: 0 25px; color: #228bc8; font-size: 16px; text-align: left; text-decoration: none; position: relative; transition-duration: 0.2s; } a.btn_07:hover { background: #228bc8; border: 1px solid #05639a; color: #fff; } a.btn_07:before { content: ""; position: absolute; right: 0; bottom: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 40px 50px; border-color: transparent transparent #228bc8 transparent; } a.btn_07 span { position: absolute; bottom: 12px; right: 20px; display: inline-block; } a.btn_07 span:before { content: ''; width: 16px; height: 16px; background: #ffffff; border-radius: 50%; position: absolute; top: 50%; left: 0; margin-top: -8px; } a.btn_07 span:after { content: ''; width: 6px; height: 6px; border: 0; border-top: 2px solid #228bc8; border-right: 2px solid #228bc8; transform: rotate(45deg); position: absolute; top: 50%; left: 4px; margin-top: -3px; }
8.きらっとひかるボタン、動いて楽しい
HTMLとCSSはこちら
HTML
<section> <a href="#" class="btn_08"><span>BUTTON</span></a> </section>
CSS
section { max-width: 300px; margin: 0 auto; } a.btn_08 { position: relative; display: block; color: #ffffff; font-size: 16px; text-decoration: none; text-align: center; } a.btn_08::before { content: ""; position: absolute; top: 0; left: 0; margin: auto; width: 100%; height: 100%; background: linear-gradient(155deg, #ffbfbf 20%, #c2fcf9 40%, #f9c5ff 51%, #ffbfbf 80%); border-radius: 7em; box-sizing: border-box; } a.btn_08::after { content: ""; position: absolute; top: 0; left: 0; margin: auto; width: 100%; height: 100%; background-color: #e90063; border-radius: 7em; box-sizing: border-box; transform: translate(0, -10px); } a.btn_08 span { position: relative; display: block; padding: 1rem 5rem; transform: translate(0, -10px); overflow: hidden; z-index: +1; } a.btn_08 span::before { content: ""; position: absolute; top: -180px; left: 0; width: 30px; height: 100%; background-color: rgba(255, 255, 255, 0.8); opacity: 0; transform: rotate(45deg); } a.btn_08::after, a.btn_08 span { transition-property: transform; transition-duration: 0.3s; } a.btn_08:hover::after, a.btn_08:hover span { transform: translate(0, 0); } a.btn_08:hover span::before { animation: shine 1s ease-in-out 1; } @keyframes shine { 0% { transform: scale(1) rotate(45deg); opacity: 0; } 10% { transform: scale(1) rotate(45deg); opacity: 0.5; } 20% { transform: scale(4) rotate(45deg); opacity: 1; } 80% { transform: scale(50) rotate(45deg); opacity: 0; } }
9.左側に画像(アイコン)を配置したボタン
HTMLとCSSはこちら
HTML
<section> <a href="#" class="btn_09"><span><span>BUTTON</span>BUTTON</span></a> </section>
CSS
section { max-width: 300px; margin: 60px auto; } a.btn_09 { display: flex; justify-content: center; align-items: center; color: #795548; text-align: center; text-decoration: none; width: 100%; height: 100px; padding: 20px 20px 20px 75px; background-color: #ffffff; border: 5px solid #FFC107; border-radius: 10px; box-sizing: border-box; position: relative; transition-duration: 0.3s; } a.btn_09::before { content: ''; width: 60px; height: 60px; position: absolute; top: 50%; left: 20px; margin-top: -30px; background-image: url("https://125naroom.com/wp/wp-content/themes/design125naroom/img/kinoko_pan.png"); background-size: contain; background-repeat: no-repeat; } a.btn_09 span { font-size: 26px; font-weight: bold; line-height: 1; } a.btn_09 span span { display: block; font-size: 16px; margin-bottom: 7px; } a.btn_09:hover { color: #ffffff; background-color: #FFC107; }
10.ふわっと浮き出したボタン、押せるので楽しい
HTMLとCSSはこちら
HTML
<section> <a href="#" class="btn_10"><span>BUTTON</span></a> </section>
CSS
section { max-width: 300px; margin: 0 auto; } a.btn_10 { display: flex; justify-content: center; align-items: center; width: 100%; height: 50px; box-sizing: border-box; background: #fff; position: relative; } a.btn_10 span { display: flex; justify-content: center; align-items: center; width: 100%; height: 50px; background: #fff; box-sizing: border-box; color: #333; font-size: 14px; letter-spacing: 0.1em; text-decoration: none; box-shadow: 0px 5px 12px #CAD4E2, -6px -6px 12px #FFF; border-radius: 10px; position: absolute; top: -5px; left: 0; transition-duration: 0.2s; } a.btn_10:hover span { left: 0; top: 0; box-shadow: 0 0 4px #CAD4E2, -2px -2px 4px #FFF; }
11.折り返しを揃えるシンプルなボタン
折り返しを揃えるシンプルなボタン折り返しを揃えるシンプルなボタン
HTMLとCSSはこちら
HTML
<section> <a href="#" class="btn_11"><span>BUTTON</span></a><br> <a href="#" class="btn_11"><span>折り返しを揃えるシンプルなボタン折り返しを揃えるシンプルなボタン</span></a> </section>
CSS
section { max-width: 300px; margin: 0 auto; } a.btn_11 { display: inline-block; color: #004386; font-size: 16px; line-height: 1.5; padding-left: 1.2em; text-indent: -1.2em; text-decoration: none; } a.btn_11 span:before { content: ''; display: inline-block; width: 7px; height: 7px; border-top: 2px solid #004386; border-right: 2px solid #004386; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-right: 10px; }
さいごに

かわいいのがいいですねー

シンプルなのがいいですねー
おすすめ
かんれん
- web / 2020.1.15
- 【CSS】簡単に固定できるposition: sticky;の実装サンプル集
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集(クリック時のエフェクトも集めました)
- web / 2021.2.12
- 【CSS】background-colorを透過する時の備忘録(IE11対策)
- web / 2018.8.29
- 【CSS】px(ピクセル)とem(エム)
Googleさんのおすすめ
人気記事
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集(クリック時のエフェクトも集めました)
- web / 2019.7.22
- 【jQuery】アコーディオン実装サンプル10選
- web / 2019.9.27
- 【jQuery】スライダープラグイン「slick」実装サンプル集
- web / 2019.7.24
- 【jQuery】ページ内リンクでスムーズスクロール(スクロール位置の調整も簡単にできる)
- web / 2019.7.19
- 【CSS】olのリストで①、②、③(丸数字)を表示させる
- web / 2019.10.2
- 【jQuery】モーダルプラグイン『Remodal』の実装サンプル集
- web / 2019.1.22
- 【CSS】三角アイコンと矢印アイコンをつくる
Googleさんのおすすめ
デザインの記事
- 2021.02.22New
- 幸福湯|和歌山市にある小さな銭湯
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2021.02.22New
- 幸福湯|和歌山市にある小さな銭湯
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2021.02.09
- 余白のある家だなと思います/窓の家と生活
- 余白のある家だなと思います この穴なくてもよかったかなと思うことがあります この穴…
- いつかのこと – 無印良品の家と暮らす
- 2021.02.01
- 寝返り、できた
- もくじ 娘ちゃん3か月と24日 あんよを上手に使います 一度覚えたら 2日後 くるんと起き…
- いつかのこと – 無印良品の家と暮らす