TOP

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);
}

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

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

では今日も休日を始めています。休日の充実こそ、人生の充実です。
( ブログのコメント欄は 2022-04-16 に閉鎖いたしました )
閲覧(593)
コメントを書く
コメントを書くにはログインが必要です。
メインメニュー
ログイン
ユーザー名:

パスワード:



日記投稿者リスト
カレンダー
月表示
カテゴリー
にほんブログ村リンク