50代から理数を学ぶ - トップに戻るボタンのデザインを変更しました

Home > ブログ > 時空解 > パソコンソフト関連 > トップに戻るボタンのデザインを変更しました

時空解さんの日記

2023

5月 18

(木)

11:10

トップに戻るボタンのデザインを変更しました

前の日記次の日記

カテゴリーパソコンソフト関連

本文

皆さんこんにちは、時空解です。

今日は会社がお休みと言うこともあって、朝から「トップに戻るボタン」のデザインを変更していました。
以前のはダサかったですよね。( ^^;

以前のボタンを作成したときには、まだ下記のような参考になるサイトがありませんでした。
・【CSSだけ】トップに戻るボタンの作り方【コピペでOK】

今回のは "上矢印" が分かりやすくて良いです。まぁ以前からこの手のタイプの "上矢印" が一般的でしたが、
「どうやって作っているんだろうか？」
と思っていたんです。

時代が進んで、望みの "上矢印" の作り方が載っているサイトが出てきてくれたのです、良かったよかった。

.gotop::before{
content: "";
display: block;
border-top: 2px solid #333;
border-right: 2px solid #333;
width: 25%;
height: 25%;
top: 25%;
left: 0;
right: 0;
margin: auto;
position: absolute;
transform: rotate(-45deg);
}

以前からこの "上矢印" が使いたかったんです。
今日はやっとそれが実現できました。

実際に作ったボタンを見てみてくださいね。…うーむ。色づかいがいまいちかな…？
でも色は以前と同じ感じのがいいかなぁと思いますので、しばらくはこれで…。

では今日も休日を始めています。休日の充実こそ、人生の充実です。
( ブログのコメント欄は 2022-04-16 に閉鎖いたしました )

閲覧(3183)

コメントを書く
コメントを書くにはログインが必要です。