初心忘れるべからずということです。

試したことを記録。

以下記事にて実装
投稿日：2021/11/04
・「何食べたい？」に対して「なんでもいい」以外の言葉、探してみませんか？
カラーコード
・WEB色見本 原色大辞典 - HTMLカラーコード

Web上の画面再読み込み

Web上で再読み込みボタンを作る
HTMLとCSSの記述のみで実装可能

参考
・See-SS

HTML

a href=""の""は「再読み込み」を行う指示
a href=""を"#"にすると「ページ上部へ戻る」の指示になる
やりたいことによって記述が変わるので注意。

    <a href="" class="button-19">他の料理も見たい場合は押してください</a>

CSS

.button-19 {
  position: relative;
  padding: 0.5em 1.6em;
  font-size: 0.8em;
  color: #8b4513;
  text-decoration: none;
  user-select: none;
  border-top: 1px #8b4513 solid;
  border-bottom: 1px #8b4513 solid;
  transition: 0.3s;
}

.button-19:hover {
  opacity: 0.5;
}

.button-19::after,
.button-19::before {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  content: '';
  background: #8b4513;
}

.button-19::after {
  top: 2px;
}

.button-19::before {
  bottom: 2px;
}

背景グラデーション

CSSの記述のみで実装可能
ごめんなさい。参考元がわからなくなってしまいました・・・

CSS

/*背景グラデーション*/
body {
  overflow: visible !important;
  background: -webkit-linear-gradient(45deg, #fffacd 10%, #ffa500 90%);
  background: -moz-linear-gradient(45deg, #fffacd 10%, #ffa500 90%);
  background: -ms-linear-gradient(45deg, #fffacd 10%, #ffc0cb 90%);
  background: -o-linear-gradient(45deg, #fffacd 10%, #ffc0cb 90%);
  background: linear-gradient(45deg, #fffacd 10%, #ffc0cb 90%);
 }

気になるサイト

・コピペ実装！CSSだけで作れるお洒落で使いやすいボタン◉サンプルコード12選
・CSSで表現する背景パターン51種＋【コピペで簡単！/アニメーション有】
・コピペでできるCSSボタンプロデザインをコピペで実装！ 【 グラデーション・カラフル系 】
・【CSS】使える背景パターン、実装サンプル25選（コピペで簡単です）
・CSSで見出しをデザイン！コピペできるおしゃれな見出しデザインまとめ
・かわいい系デザインに使えるCSSいろいろ