. CSSとhtmlだけの使い勝手のいいボタンデザイン15選 - コピペっと ｜パーツで探す、web制作に使えるコピペサイト。
CSSとhtmlだけの使い勝手のいいボタンデザイン15選 - コピペっと ｜パーツで探す、web制作に使えるコピペサイト。
CSSとhtmlだけの使い勝手のいいボタンデザイン15選 - コピペっと ｜パーツで探す、web制作に使えるコピペサイト。

Без кейворда

2018.01.15 2024.07.25

色は好みで変えていただければ、かまいません。 色には 6桁の16進数のカラーコード (#000000)も使えますが、他に、

  • 3桁の16進数カラーコード (#000)
  • RGB色相・彩度・明度 (rgb(0,0,0))
  • RGBA色相・彩度・明度・透明度 (rgb(0,0,0,1))

なども使用できます。 RGBA値での指定は、サポートしていないブラウザだと、透明度だけが無視されるのではなく、 色指定そのものが認識されずに無効となるので注意が必要 です。

browser: ✔︎ ✔︎

使い勝手のいいボタンデザイン [15種] シンプルな押したら凹むボタン a.cp_btn < position: relative; display: block; width: 160px; padding: 0.8em; text-align: center; text-decoration: none; color: #FFF; background: #26C6DA; border-bottom: 2px solid #00838F; border-radius: 4px; box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.2); >a.cp_btn:active HOVERで囲みから塗り潰しに a.cp_btn < display: block; width: 160px; padding: 0.8em; text-align: center; text-decoration: none; color: #EC407A; border: 2px solid #EC407A; border-radius: 3px; transition: .4s; >a.cp_btn:hover HOVERで下線がグッと上がる a.cp_btn < position: relative; display: block; width: 160px; padding: 0.8em; text-align: center; font-weight: bold; text-decoration: none; color: #4CAF50; >a.cp_btn:before < position: absolute; content: ''; width: 100%; height: 4px; top:100%; left: 0; border-radius: 3px; background:#4CAF50; transition: .4s; >a.cp_btn:hover:before HOVERで上下のラインがグッとテキストに近づく a.cp_btn < position: relative; display: block; width: 160px; padding: 0.8em; text-align: center; font-weight: bold; text-decoration: none; color: #FF9800; transition: .4s; >a.cp_btn:before, a.cp_btn:after < position: absolute; left: 0; content: ''; width: 100%; height: 4px; border-radius: 3px; background:#FF9800; transition: .4s; >a.cp_btn:before < top:100%; >a.cp_btn:after < top:0; >a.cp_btn:hover:before < top: calc(100% - 3px); >a.cp_btn:hover:after HOVERで左右のラインが斜めに倒れる a.cp_btn < position: relative; display: block; width: 160px; padding: 0.8em; text-align: center; font-weight: bold; text-decoration: none; color: #2196F3; transition: .4s; >a.cp_btn:before, a.cp_btn:after < position: absolute; top: 0; content: ''; width: 4px; height: 100%; border-radius: 3px; background:#2196F3; transition: .2s ease-in; >a.cp_btn:before < left: 0; >a.cp_btn:after < left: 100%; >a.cp_btn:hover:before, a.cp_btn:hover:after HOVERで背景のストライプが大きくなる a.cp_btn < position: relative; display: block; width: 160px; padding: 0.8em; text-align: center; font-weight: bold; text-decoration: none; color: #8E24AA; text-shadow: 0 0 5px white; background: repeating-linear-gradient(-45deg, #CE93D8, #CE93D8 3px,#E1BEE7 3px, #E1BEE7 7px); border-radius: 4px; transition: .4s ease-in-out; >a.cp_btn:hover HOVERでテキストがふわっと光る a.cp_btn < position: relative; display: block; width: 160px; padding: 0.8em; text-align: center; font-weight: bold; text-decoration: none; color: #FFF; text-shadow: 0 0 5px rgba(255, 255, 255, 0.0); background: #1A237E; border-radius: 4px; transition: .4s ease-in-out; >a.cp_btn:hover 丸いボタンでHOVERでくるくる回る a.cp_btn < display: flex; align-items: center; justify-content: center; width: 120px; height: 120px; text-decoration: none; color: #FF5722; border: double 4px #FF5722; border-radius: 50%; transition: .6s ease-in-out; >a.cp_btn:hover HOVERでテキストがくるくる上下に回転 a.cp_btn < display: block; width: 160px; padding: 0.8em; text-align: center; text-decoration:none; color: #FFF; border-radius: 4px; background: #4DD0E1; >a.cp_btn span < display: inline-block; transition: .5s ease-in-out; >a.cp_btn:hover span 格子の囲みがHOVERで交差がフィット a.cp_btn < position: relative; display: inline-block; width: 160px; padding: 0.8em; text-align: center; text-decoration: none; font-weight: bold; color: #FBC02D; border-top: 2px solid #FBC02D; border-bottom: 2px solid #FBC02D; >a.cp_btn:before, a.cp_btn:after < position: absolute; top: -7px; width: 2px; content: ''; height: calc(100% + 14px); background-color: #FBC02D; transition: .3s ease-in-out; >a.cp_btn:before < left: 7px; >a.cp_btn:after < right: 7px; >a.cp_btn:hover:before, a.cp_btn:hover:after < top: 0; height: 100%; >a.cp_btn:hover:before < left:0; >a.cp_btn:hover:after HOVERで斜めに光が通る a.cp_btn < position: relative; display: block; width: 160px; padding: 0.8em; text-align: center; text-decoration: none; color: #fff; background: #2196F3; border:solid 1px #fff; overflow: hidden; >a.cp_btn:before < position: absolute; top: -25px; left: -20px; content:''; height:90px; width:20px; background : #fff; opacity: 0.3; transform: rotate(40deg); transition: 0.4s ease-in-out; >a.cp_btn:hover:before 付箋風ボタンHOVERで付箋の色が横に伸びる a.cp_btn < position: relative; display: block; width: 160px; padding: 0.8em; text-align: center; text-decoration: none; color: #fff; background: #EC407A; border:1px solid #fff; >a.cp_btn:before < position: absolute; top: 0px; left: -90%; content:''; height: 100%; width: 100%; background : #fff; opacity: 0.3; transition: .4s ease-in-out; >a.cp_btn:hover:before HOVERで左上から斜めに背景の色が変わる a.cp_btn < position: relative; display: block; width: 160px; padding: 0.8em; text-align: center; text-decoration: none; color: #fff; background: #455A64; border:1px solid #fff; overflow: hidden; >a.cp_btn:after < position: absolute; content:''; top: -100%; left: -100%; height: 100%; width: 100%; background : #fff; opacity: 0.3; transition: .4s ease-in-out; >a.cp_btn:hover:after HOVERで中央から斜めに背景の色が変わる a.cp_btn < position: relative; display: block; width: 160px; padding: 0.8em; text-align: center; text-decoration: none; color: #fff; border:1px solid #8BC34A; background: #8BC34A; overflow: hidden; z-index: 0; >a.cp_btn:after < position: absolute; top: 50%; left: 50%; content:''; height: 0; width: 100%; background : #fff; opacity: 0; transform: translate(-50%,-50%) rotate(45deg); transition: 0.3s; z-index: -1; >a.cp_btn:hover < color: #8BC34A; >a.cp_btn:hover:after < height: 250%; opacity: 1; >a.cp_btn:active:after HOVERで枠の色が中央から外に向かって変化 a.cp_btn < position: relative; display: block; width: 160px; padding: 0.8em; text-align: center; border: 3px solid #9C27B0; text-decoration: none; transition: all .4s ease-in-out; >a.cp_btn::before, a.cp_btn::after < position: absolute; top: -3px; right: -3px; bottom: -3px; left: -3px; content: ''; z-index: 2; transition: all .4s ease-in-out; >a.cp_btn::before < border-top: 3px solid #FF5722; border-bottom: 3px solid #FF5722; transform: scale(0, 1); >a.cp_btn::after < border-right: 3px solid #FF5722; border-left: 3px solid #FF5722; transform: scale(1, 0); >a.cp_btn:hover < color: #FF5722; >a.cp_btn:hover::after, a.cp_btn:hover::before ホバーがいい感じの気のきいたボタンデザイン15種はこちら

copypet.jp

こんな記事はいかがですか？ category Link スポンサー 免責事項

© 2026 コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。 All Rights Reserved.

📎📎📎📎📎📎📎📎📎📎