以下の図と同じように作る

btn.gif

  1. reset.cssを読み込む(https://github.com/mayank99/reset.css/blob/main/package/index.css)

  2. aタグを書き、クラスbtnを付加する

  3. クラスbtnに以下のCSSを付加する

    1. セレクタ：.btn
    text-decoration none
    color #fff
    display block
    width 350px
    line-height 80px
    margin-left auto
    margin-right auto
    margin-top 100px
    background-color #f77237
    text-align center
    border-radius 10px
    box-shadow 4px 4px 0 0 rgba(54,25,13,0.3)
    transition 0.1s

  4. クラスbtnをマウスオーバーした時に、以下のCSSを付加する

    1. セレクタ：.btn:hover
    box-shadow none
    transform translateX(4px) translateY(4px)

解答例

https://www.youtube.com/embed/NQ7WX8HJyzM?si=zj9T9bcyQpMz9jPt

作成したコード

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <a href="#" class="btn">ボタン</a>
</body>

</html>

.btn {
    text-decoration: none;
    color: #fff;
    display: block;
    width: 350px;
    line-height: 80px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    background-color: #f77237;
    text-align: center;
    border-radius: 10px;
    box-shadow: 4px 4px 0 0 rgba(54, 25, 13, 0.3);
    transition: 0.1s;
}

.btn:hover {
    box-shadow: none;
    transform: translateX(4px) translateY(4px);
}