初心者JUNが作ったプロセス
基本のコードを調べる
開発者による開発者向けのリソースのサイトへ
Resources for Developers, by Developers 👈こちらのサイトに入ります
英語で 「button」と検索して<ボタン要素＞のページへ
<button>: ボタン要素のページ
*こちらの HTMLとCSSをそれぞれコピペします
HTMLの作業
ワードプレスのカスタムHTMLへそのままHTMLのコードを入れて
「Add to favorites」 を「Youtube ドイツの暮らし」 に変更し、ボタンにリンクをつけます。
プレビューでは骨組みができています
CSSの作業
外観からカスタマイズへ
追加CSSにコードをそのまま入れます
大きさを変更する
コードをチェックして高さに関する二つの部分をピックアップ
.styled {
border: 0;
line-height: 2.5;
padding: 0 20px;
font-size: 1rem;
text-align: center;
color: #fff;
text-shadow: 1px 1px 1px #000;
border-radius: 10px;
background-color: rgba(220, 0, 0, 1);
background-image: linear-gradient(to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0));
box-shadow:
inset 2px 2px 3px rgba(255, 255, 255, 0.6),
inset -2px -2px 3px rgba(0, 0, 0, 0.6);
}
.styled:hover {
background-color: rgba(255, 0, 0, 1);
}
.styled:active {
box-shadow:
inset -2px -2px 3px rgba(255, 255, 255, 0.6),
inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}
最終的にこの大きさに変えました。
結果！
トップ画：UnsplashのOskar Yildizが撮影した写真