[CSS] 버튼 만들기

📍 오늘의 공부

1. 나만의 버튼 만들기

수업 중 다양한 버튼 실습을 해본 뒤, 직접 나만의 버튼을 만들어보았다.

2. CSS

   .btn {
        width: 200px;
        height: 200px;
        border: 10px solid rgb(0, 183, 255);
        background:rgb(255, 243, 79);
        border-radius: 20%;
        margin: 300px 600px;
        transition: all 1s;
        font-size: 70px;
        transition: all 2s;
        overflow: hidden;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
   }

    .btn::before {
        content: '';
        position: absolute;
        color: white;
        background-color: rgb(0, 183, 255);
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: translateY(300px);
        transition: all 2s;
        display: flex;
        align-items: center;
        justify-content: center;
    }
   
    .btn:hover::before {
        transform: translateY(0);
    }

    .click:hover {
        animation: shake 0.5s;
        animation-iteration-count: infinite;
    }

    @keyframes shake {
        0% { transform: translate(5px, 5px) rotate(0deg); }
        50% { transform: translate(-5px, 5px) rotate(-5deg); }
        100% { transform: translate(5px, -5px) rotate(-5deg); }
    }

3. HTML

<div class="btn">
        <div class="click">🐟</div>
</div>

---

📍 느낀점

• 아직 가상 클래스 선택자, 가상 요소 선택자를 활용하는 것이 어렵다.
• 애니메이션 효과도 더 다이나믹하게 줘봐야지!
• 정말 다양한 아이디어로 버튼을 만드신 분들이 많았다. 코드 공유해주신 것 보고 배워야겠다.