완성형

이번에는 아래와 같은 입체감이 있는 버튼을 작성합니다!

HTML에서 <button></button> 태그를 추가하고 버튼 만들기

index.html

    <!-- CSSでスタイルを設定するためclass="btn"を追加しておく -->
    <button class="btn">ボタン</button> 

아래와 같은 버튼이 생성됩니다.

CSS로 버튼에 스타일 추가

style.css

.btn {
    border-radius: 2px; 
    padding: 15px 40px;
    background-color: #60daf0;
    cursor: pointer;
    box-shadow: 0 4px #2693b4;
    border: none;
    outline: none;
}

그러면 아래와 같은 버튼을 만들 수 있습니다!

버튼을 눌렀을 때의 움직임을 붙인다

방금 전의 순서에서는 버튼 자체는 작성할 수 있었습니다만, 눌렀을 때의 움직임은 아직 없습니다.
``active'' 지시어로 누르는 동안 적용되는 스타일을 추가하세요!

style.css

.btn {
    border-radius: 2px; 
    padding: 15px 40px;
    background-color: #60daf0;
    cursor: pointer;
    box-shadow: 0 4px #2693b4;
    border: none;
    outline: none;
}

/* ボタンを押下している間のスタイルを追加 */
.btn:active {
    box-shadow: none;
    position: relative;
    top: 4px;
}

★Point 버튼을 눌렀을 때 버튼의 위치를 ​​내린다

①box-shadow의 2번째로 지정하고 있는 「4px」로 그림자의 높이를 지정
②누를 때는 4px위치를 낮춘다는 스타일을 적용하여 누를 때의 입체감을 내는 것이 가능
※「position: relative;」라고 세트로 적용해 주세요.

style.css

.btn {
    border-radius: 2px; 
    padding: 15px 40px;
    background-color: #60daf0;
    cursor: pointer;
    box-shadow: 0 4px #2693b4; /* ①2番目に指定している4pxで影の高さを指定 */
    border: none;
    outline: none;
}

.btn:active {
    box-shadow: none;
    position: relative; /* position: relative;とセットで適用してください。 */
    top: 4px; /* ②押下時は4px位置を下げるというスタイルを適用することで押下時の立体感を出すことが可能*/
}

색의 변화나 그림자의 높이를 어레인지하는 등 사용도가 있을 것 같습니다!