概要
この記事はプログラミングの記事です
プログラミングの、ボタンの記事です
実態
プログラミングでボタンを作ってみました
①ボタンです
「ボタンのコードです」
<div>
<button
style=
"color: #32a852;
background-color:
#d95d5d;
font-size: 35px;
padding:
4px 10px 7px 10px;
border-right:
solid
3px #D9CF5D;
border-bottom:
solid
3px #D9CF5D;
border-radius: 13px;
display: inline-block;">
<a style=
"text-decoration:none;">
<span style=
"color: #ffffff;">
テスト
</span>
</a>
</button>
</div>
②リンクが繋がったボタンです
これはテストです
「リンクが繋がったボタン」の、コードです
<div>
<button
style=
"color: #32a852;
background-color:
#d95d5d;
font-size: 35px;
padding:
4px 10px 7px 10px;
border-right:
solid
3px #D9CF5D;
border-bottom:
solid
3px #D9CF5D;
border-radius: 13px;
display: inline-block;">
<a
href="#AA"
style=
"text-decoration: none;">
<span style=
"color: #ffffff;">
テスト
</span>
</a>
</button>
</div>
参考資料
- https://developer.mozilla.org/
ja/docs/
Web/
HTML/
Reference/
Elements/
button
（ボタンの資料） - https://saruwakakun.com/
html-css/
reference/
buttons#:~:text=
押し込み式
（ボタンの資料） - https://web-camp.io/
magazine/
archives/
105528/
（<a>の中に、他のコードを足すことは可能
（a href=""だけではなく、style=""も可能）） - https://developer.mozilla.org/
ja/docs/
Web/
CSS/
Reference/
Properties/
border-radius
（半径の資料）
