ーーーボタンデザインサンプル01：シンプルなフラットボタンーーーーーー
✙ タップしてコードを見る
HTML コード
<p><button onclick="location.href='ここでURLを指定してください'" style="font-weight: bold; padding: 10px 20px; background-color: #3498db; color: #fff; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s;" onmouseover="this.style.backgroundColor='#2980b9'" onmouseout="this.style.backgroundColor='#3498db'"onmousedown="this.style.backgroundColor='#2980b9'" onmouseup="this.style.backgroundColor='#3498db'">ボタンデザイン</button></p>
ーーーボタンデザインサンプル02：アウトラインボタンーーーーーーーーーー
✙ タップしてコードを見る
HTML コード
<p><button onclick="location.href='ここでURLを指定してください'" style="font-weight: bold; padding: 10px 20px; background-color: transparent; color: #3498db; border: 2px solid #3498db; border-radius: 4px; cursor: pointer; transition: all 0.3s;" onmouseover="this.style.backgroundColor='#3498db'; this.style.color='white'" onmouseout="this.style.backgroundColor='transparent'; this.style.color='#3498db'" onmousedown="this.style.backgroundColor='#2980b9'; this.style.color='white'" onmouseup="this.style.backgroundColor='#3498db'; this.style.color='white'">ボタンデザイン</button></p>
ーーーボタンデザインサンプル03：グラデーションボタンーーーーーーーーーー
✙ タップしてコードを見る
HTML コード
<p><button onclick="location.href='ここでURLを指定してください'" style="font-weight: bold; padding: 10px 20px; background: linear-gradient(45deg, #e67e22, #e74c3c); color: white; border: none; border-radius: 4px; cursor: pointer; transition: opacity 0.3s;" onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'">ボタンデザイン</button></p>
ーーーボタンデザインサンプル04：アイコン付きボタンーーーーーーーーーー
✙ タップしてコードを見る
HTML コード
<p><button onclick="location.href='ここでURLを指定してください'" style="font-weight: bold; padding: 10px 20px; background-color: #9b59b6; color: white; border: none; border-radius: 4px; font-weight: bold; cursor: pointer; transition: transform 0.2s;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">ボタンデザイン</button></p>
ーーーボタンデザインサンプル05：ホバーで文字色反転ボタンーーーーーーーーーー
✙ タップしてコードを見る
HTML コード
<p><button onclick="location.href='ここでURLを指定してください'" style="font-weight: bold; padding: 10px 20px; background-color: #f1c40f; color: black; border: none; border-radius: 4px; cursor: pointer; transition: color 0.3s, background-color 0.3s;" onmouseover="this.style.backgroundColor='black'; this.style.color='#f1c40f'" onmouseout="this.style.backgroundColor='#f1c40f'; this.style.color='black'">ボタンデザイン</button></p>
ーーーボタンデザインサンプル06：グラデーションと影ーーーーーーーーーー
✙ タップしてコードを見る
HTML コード
<p><button onclick="location.href='ここでURLを指定してください'" style="font-weight: bold; padding: 10px 20px; background: linear-gradient(90deg, #00c6ff, #0072ff); color: white; border: none; border-radius: 6px; box-shadow: 0 4px 8px rgba(0, 114, 255, 0.4); cursor: pointer; transition: box-shadow 0.3s;" onmouseover="this.style.boxShadow='0 6px 12px rgba(0, 114, 255, 0.6)'" onmouseout="this.style.boxShadow='0 4px 8px rgba(0, 114, 255, 0.4)'">ボタンデザイン</button></p>
ーーーボタンデザインサンプル07：縁のみボタンーーーーーーーーーー
✙ タップしてコードを見る
HTML コード
<p><button onclick="location.href='ここでURLを指定してください'" style="padding: 10px 20px; background-color: transparent; color: #e67e22; border: 2px dashed #e67e22; border-radius: 8px; cursor: pointer; font-weight: bold; transition: background-color 0.3s;" onmouseover="this.style.backgroundColor='#e67e22'; this.style.color='white'" onmouseout="this.style.backgroundColor='transparent'; this.style.color='#e67e22'">ボタンデザイン</button></p>
ーーーボタンデザインサンプル08：上下枠がホバーで変化ーーーーーーーーーー
✙ タップしてコードを見る
HTML コード
<p><button onclick="location.href='ここでURLを指定してください'" style="font-weight: bold; padding: 10px 20px; background-color: transparent; color: #2c3e50; border-top: 2px solid #2c3e50; border-bottom: 2px solid #2c3e50; border-left: none; border-right: none; cursor: pointer; transition: all 0.3s;" onmouseover="this.style.backgroundColor='#2c3e50'; this.style.color='white'" onmouseout="this.style.backgroundColor='transparent'; this.style.color='#2c3e50'">ボタンデザイン</button></p>
ーーーボタンデザインサンプル09：2色切り替えボタンーーーーーーーーーー
✙ タップしてコードを見る
HTML コード
<p><button onclick="location.href='ここでURLを指定してください'" style="font-weight: bold; padding: 10px 20px; background: linear-gradient(to right, #1abc9c 50%, #16a085 50%); background-size: 200% 100%; background-position: right bottom; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background-position 0.3s;" onmouseover="this.style.backgroundPosition='left bottom'" onmouseout="this.style.backgroundPosition='right bottom'">ボタンデザイン</button></p>
ーーーボタンデザインサンプル10：押せるボタンーーーーーーーーーー
✙ タップしてコードを見る
HTML コード
<p><button onclick="location.href='ここでURLを指定してください'" style="font-weight: bold; padding: 10px 20px; background-color: #2980b9; color: white; border: none; border-radius: 6px; cursor: pointer; box-shadow: 0 4px 0 #1f618d; transition: all 0.1s ease;" onmousedown="this.style.transform='translateY(2px)'; this.style.boxShadow='0 2px 0 #1f618d';" onmouseup="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 0 #1f618d';">ボタンデザイン</button></p>
ーーーボタンデザインサンプル11：浮き上がるフチ付きボタンーーーーーーーーーー
✙ タップしてコードを見る
HTML コード
<button onclick="location.href='ここでURLを指定してください'" style="padding: 10px 20px; background-color: #ecf0f1; color: #2c3e50; border: 2px solid #2c3e50; border-radius: 6px; box-shadow: 0 4px 0 #2c3e50; cursor: pointer; font-weight: bold;" onmousedown="this.style.transform='translateY(2px)'; this.style.boxShadow='0 2px 0 #1f618d';" onmouseup="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 0 #1f618d';">ボタンデザイン</button></p>
ーーーボタンデザインサンプル12：影が跳ねるボタンーーーーーーーーーー
✙ タップしてコードを見る
HTML コード
<p><button onclick="location.href='ここでURLを指定してください'" style="font-weight: bold; padding: 10px 20px; background-color: #34495e; color: white; border: none; border-radius: 6px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-3px)'; this.style.boxShadow='0 6px 10px rgba(0,0,0,0.2)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 6px rgba(0,0,0,0.1)'">ボタンデザイン</button></p>
ーーーボタンデザインサンプル13：影が跳ねるボタンーーーーーーーーーー
✙ タップしてコードを見る
HTML コード
<p><button onclick="location.href='ここでURLを指定してください'" style="font-weight: bold; padding: 10px 20px; background-color: #e74c3c; color: white; border: none; border-radius: 50px; cursor: pointer; font-weight: bold; transition: transform 0.2s ease-in-out;" onmousedown="this.style.transform='scale(0.9)';" onmouseup="this.style.transform='scale(1)';">ボタンデザイン</button></p>
ーーーボタンデザインサンプル14：押した際にボタンの形状が少し縮むーーーーーーーーーー
✙ タップしてコードを見る
HTML コード
<p><button onclick="location.href='ここでURLを指定してください'" style="font-weight: bold; padding: 10px 20px; background-color: #e74c3c; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; transition: transform 0.2s ease-in-out;" onmouseover="this.style.transform='scale(0.9)';" onmouseout="this.style.transform='scale(1)';">ボタンデザイン</button></p>
ーーーボタンデザインサンプル15：ホバーすると発光するデザインーーーーーーーーーー
✙ タップしてコードを見る
HTML コード
<p><button onclick="location.href='ここでURLを指定してください'" style="font-weight: bold; padding: 10px 20px; background-color: #8e44ad; color: white; border: none; border-radius: 6px; cursor: pointer; transition: box-shadow 0.3s ease-in-out;" onmouseover="this.style.boxShadow='0 0 10px rgba(142, 68, 173, 0.8), 0 0 20px rgba(142, 68, 173, 0.4)';" onmouseout="this.style.boxShadow='0 0 0 rgba(0, 0, 0, 0)';">ボタンデザイン</button></p>
ーーーボタンデザインサンプル16：ホバーすると押した感が出るーーーーーーーーーー
✙ タップしてコードを見る
HTML コード
<button style="background: #eee; border-radius: 3px; position: relative; display: flex; justify-content: center; align-items: center; margin: 0 auto; max-width: 220px; padding: 10px 25px; color: #313131; transition: 0.3s ease-in-out; font-weight: 600; box-shadow: 5px 5px 0 #6bb6ff;" onclick="location.href='ここでURLを指定してください'" onmouseover="this.style.backgroundColor='#b3d9ff'; this.style.boxShadow='0 0 0'; this.style.transform='translate(5px, 5px)';" onmouseout="this.style.backgroundColor='#eee'; this.style.boxShadow='5px 5px 0 #6bb6ff'; this.style.transform='translate(0, 0)';">ボタンデザイン</div>
ーーーボタンデザインサンプル17：押せるボタンーーーーーーーーーー
✙ タップしてコードを見る
HTML コード
<button onclick="location.href='ここでURLを指定してください'" style="padding: 10px 20px; background-color: #ecf0f1; color: #2c3e50; border: 2px solid #2c3e50; border-radius: 6px; box-shadow: 0 4px 0 #2c3e50; cursor: pointer; font-weight: bold; transition: all 0.1s ease;" onmouseover="this.style.transform='translateY(2px)'; this.style.boxShadow='0 2px 0 #1f618d';" onmousedown="this.style.transform='translateY(4px)'; this.style.boxShadow='0px 0 #1f618d';" onmouseup="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 0 #2c3e50';"> ボタンデザイン </button>