試したことを記録。
以下記事にて実装
投稿日: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いろいろ