【独学で神サイトを真似る】ヒヨッコ🐣コーダーが気になったボタンをつくってみた

2024年8月6日 19:47

どうも！

いきなりですがっ👀
デザインもコーディーングも一貫してできる人？ネーミング？が、WEBデザイナーってゆうのになんか違和感を感じる私。🐖

デザインとコーディングを合わせた良いネーミングってなんかないかなぁ〜。と思ってAIに聞いたら
『コードブロッサム🌷✨』って提案されてニヤニヤした。

『なんの仕事なん？』
『えっ、コードブロッサムやで✨』

絶対に言わんwwwwwwwwwww😂！！！

さてっ。🍵
本日の参考サイトはこちら

コーダー歴約3ヶ月のヒヨッコ🐣コーダーが気になったボタンを徹底TTP！！
（TTP＝徹底的にパクる）

一緒に作ってみましょう🎵
解説も書いてますが、ヒヨッココーダーの見解なのでお手柔らかにぃ🐣
【ボタンはこちら】

【ホバー時に色が上下に変更しするのが特徴。】

HTMLを分析してみる　（クラス名は変えてます）

<div class="btn_area">　①
  <a href="#" class="btn">　②　❷::hoverがかかる
    <i></i>　③
    <span> view more</span>　④
    ::after　⑤
  </a>
</div>

各箇所に番号ふっています。

css ①にかいていること

margin-top: 〜;

他要素とどれくらいの幅を持つのか書かれいる。

css ②にかいていること

.btn {
	  position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    width: 12.5rem;
    height: 3.75rem;
    padding: 0.625rem;
    border-radius: 9999px;
    background-color: #F3F3F3
    transition: transform 350ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

position: relative;　＜i＞と＜span＞の基準になる
overflow: hidden;　このエリアから離れているものは隠す。＜i＞と＜span＞は＜a＞タグの中に入っているのでエリアから外れている場合は見えなくなっています。
display: flex; 　＜a＞タグがブロック要素のように振る舞ってくれる。縦並びになってくれる子要素がalign-items: center;における
width: height:padding: border-radius:background-color:　でボタンの幅や色を指定する
transition　ホバー時の動きを出す。cubic-bezierは動きの滑らかさ。

css③にかいていること

＜i＞はじめましてのiタグ･:*+.\(( °ω° ))/.:+
おそらくテキストでもないけど、画像でもないものを置いてるので＜i＞タグにしているのかなと。
最近は固有名詞とかに使われるみたい！

.btn i {
	  position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #131313;
    transition: transform 350ms cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translateY(100%);
}

position: absolute;　.btn（親）にかかっている
top: 0; left: 0;　親にピッタリ合うように
display: block;　＜i＞タグはインライン要素なのでブロックに変更して縦並びに
width: 100%;height: 100%;　ブロックになれたので幅と高さが持てる
transform: translateY(100%);　100%Y軸に下がってる
transition: transform 350ms （０.３５秒）で、cubic-bezier(0.215, 0.61, 0.355, 1);　滑らかな動きで上がっていく〰︎＜hover時に

css④にかいていること

position: absolute;　.btn（親）にかかっているのは一緒

.btn span {
    position: absolute;
    left: 20%;
    font-family: "Chakra Petch", sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    text-transform: uppercase;
    transition: transform 350ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

left: 20%;　<span>タグはインライン要素なので下に降りずに（親）基準の左に２０％移動。後の：after；のスペース作り
font-family: "Chakra Petch", sans-serif; font-size: 0.9375rem; font-weight: 600; text-transform: uppercase;　この辺りはフォントのスタイリング
transition: transform 350ms cubic-bezier(0.215, 0.61, 0.355, 1);滑らかな動きで上がっていく〰︎＜hover時に（デジャブ🧠）

css⑤にかいていること

position: absolute;　.btn（親）にかかっているのは一緒

.btn::after {
    content: "";
    position: absolute;
    right: 0.625rem;
    background-image: url(../img/arrow_bk.png);
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    transition: transform 350ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

background-image: url(../img/arrow_bk.png); background-repeat: no-repeat; background-size: contain;　imgに対してのスタイリング
display: inline-block;　擬似要素はデフォでインライン要素だけど幅や高さとか指定ができないのでインラインブロックに変更

さっきからremで指定してることにちょっと疑問

ここでふと、さっきからサイズの指定がremなことに触れてませんでした。
学習したての時はpxが馴染みがある。。。。
今回サイズがremで指定されてるので、＜body＞は１rem＝16pxでかいてます。
⑤の right: 0.625rem;は＝10pxです。検証ツールで変更しても➡️が同じ位置に来てくれます。

pxじゃなくてremってなんか、かっこいい。。。。
『私は基本remかなっ✨🌷』←コードブロッサム。🦸‍♀️
とか言いたい。

レスポンシブルにはpxよりremのが良いみたいなので、これからの時代はremだ！という方に計算は難しいのでこちらをどうぞ！！便利な世の中だ🐽

px。rem。em…….調べ出してキリがないのでそっとPCを閉じた。💻ぱたん。

②に❷::hoverがかかる

.btn:hover i {
	transform: translateY(0);
}

.btn:hover span {
	color: #fff;
}

.btn:hover::after {
	background-image: url(../img/arrow_pk.png);
}

.btnにhoverしたときに、中の子要素がどう変化するのかを書きます
＜i＞はY軸が０に戻って
＜span＞は白に
::afterはイメージ変更
ということが書かれてます。
気をつけるのは、.btn i:hoverにしないこと。親にカーソルを持ってきた時にどう変わるかをかく。ここが違うだけで全然動かない！

実際に作ってみた。

できる！！！皆さんもできたかしら？
ご苦労様です。🍵、どうぞ。
ボタンの色は変えてます。

ホバー時の作動はXに載せてるのでみてみてください🎵
（前回の記事同様にnotoは動画が貼れない。）
コピペで実装できると思うのですが、＜body＞と＜a＞のスタイリングは端折っております。定番のコードで大丈夫かと⭐️

次はアコーディオンパネルを徹底的に調べるぜ！！
もっと勉強して、コードブロッサムにみんなでなろう（参加型🌷）

さらばじゃっ🌷✨🦸‍♀️ッシュ💨

この記事が気に入ったらサポートをしてみませんか？