今日は、codestep中級編2つ目のcoffeeshopを精読しました。
知り合いにコーヒーショップに「ホームページ作ってね」と言っていただいているので、気合が入ります。

この課題のテーマは、私の中では

• backgroundに載せる文字のabsolute
• backgrouundの画像をスクロール時にも固定する
• RreadMore ボタンの作り方

でした。この記事では、３つめのReadMoreについて整理します。
このコードは自力では書けるレベルではありませんでしたので、模範解答のおさらいついでにまとめています。

codestep 中級編２CoffeeShopにあるReadMoreとは

まずは、模範サイトを見たほうが早いので掲載しますね。

「初期には、左右の赤い鍵状に囲われているボタンですが、hoverすると四角く囲う」というものです。
作り方を見てみましょう。

ReadMoreボタンの作り方

まずbottnのかたちを作ります。

#about .btn {
width: 160px;
height: 50px;
line-height: 3.5;
display: inline-block;
color: #000;
padding: 0;
cursor: pointer;
transition: all 0.3s ease;
position: relative;         // これを親要素とします

そしてそもそもこのbottunはhtmlを見ると、

 <a class="btn" href="#"><span>Read More</span></a>

と、.btnとspanで二重に覆われており、

#about .btn span {
position: relative;
display: block;
width: 100%;
height: 100%;
}

と指定されています。

①この表現に必要なものは以下の通り

• 右縦棒：wide2px,height50%
• 右横棒：wide20%,height2px
• 左縦棒：wide2px,height50%
• 左横棒：wide20%,height2px

②この四本を左右それぞれ、右下と左上を起点としたabsoluteを作り、鍵のかたちとする

疑似要素のbefore,afterについてはこちらの記事がわかりやすかったです。before/afterが前後につかなくても良いなんて！
https://mihune-web.com/before_after/

【右縦棒】

.btn::before{
position:absolute;　//親要素に対して下のright,bottomを起点にする
content:"";
right:0;           //右の
bottom:0;　        // 底辺を起点
wide:2px;          //幅2pxで
height:50%;　　　　//高さは親要素btnの高さの半分
background:#e030131;
transition:all 0.3s ease;　//動きは0.3秒かけて自然に

【右横棒】

.btn::after{
position:absolute;　//親要素に対して下のright,bottomを起点にする
content:"";
right:0;           //右の
bottom:0;　        // 底辺を起点
wide:20%;          //幅は親要素btnの長さの20%
height:2px;　　　　//高さ
background:#e030131;
transition:all 0.3s ease;　//動きは0.3秒かけて自然に

【左縦棒】

.btn span::before{
position:absolute;　//親要素に対して下のleft,topを起点にする
content:"";
left:0;           //左の
top:0;　       　 // 上辺を起点
wide:2px;          //幅2pxで
height:50%;　　　　//高さは親要素btnの高さの半分
background:#e030131;
transition:all 0.3s ease;　//動きは0.3秒かけて自然に

【左横棒】

.btn span::after{
position:absolute;　//親要素に対して下のleft,topを起点にする
content:"";
left:0;           //左の
top:0;　        　// 上辺を起点
wide:20%;          //幅は親要素btnの長さの20%
height:2px;　　　　//高さ
background:#e030131;
transition:all 0.3s ease;　//動きは0.3秒かけて自然に

③hoverしたときに、この4本の棒が、0.3秒かけて自然な動きで100%の長さになってReadMoreを四角く覆う

【縦棒は長さを100%にする】

#about .btn:hover::before,
#about .btn span:hover::before {
height: 100%;
}

【横棒の長さを100%にする】

#about .btn:hover::after,
#about .btn span:hover::after {
width: 100%;
}

完成ページはこんなかんじです