トップページへ戻るボタンを作ってみよう！
トップページへ戻るボタン
コード（Codepen）
コードはこちらから見ることができます。
See the Pen TopPage Back Button by Shin (@shin-ichi) on CodePen.
解説
【HTML解説】
buttonタグで、ボタンを作り、aタグでリンクを作ります。pタグに「text-align:center;」CSSを直接書いて中央寄せしています。
※リンクは便宜上つけておりません。
【CSS解説】
.TopPageBack{
//ToPageBackのCSSです。
width: 300px;
//ボタンの幅を300pxにします。
cursor: pointer;
//カーソルをポインターにします。
padding: 7px 7px;
//余白を上下左右7pxにします
border: 2px solid #ff6347;
//枠線を太さ2px、実線、オレンジ色に指定します。
font-size: medium;
//文字の大きさをMediumにします。
color: #ffffff;
//ボタンの文字色を白にします。
background-color: #ff6347;
//ボタンの背景をオレンジ色にします。
border-radius: 20px;
//ボタンの角の丸みの半径を20xにします。
box-shadow: 4px 4px #efefef;
//影を右と下に灰色4pxで作ります。
}
/*hover時に文字色、背景色が反転するCSS*/
.TopPageBack:hover{
//ホバー時におけるTopPageBackのCSSです。
background-color:#ffffff;
//背景を白にします。
color:#ff6347;
//文字色をオレンジ色にします。
transition:0.3s;
//0.3秒間で色が変化します。
box-shadow: 4px 4px #ff6347;
//影の色をオレンジ色にします。
}