개발일지 38 - 이미지 버튼 추가

좋아요 버튼에 이미지를 추가시켜서 인스타그램 좋아요 버튼 처럼 구현을 하고 싶었다.

 

<button type="submit" class = "like-btn">좋아요</button>

기존 버튼에 id를 만들어주고 

 

 .like-btn{
        background-image:url('.../like_button.png');
        width: 100px; /* 버튼 너비 */
        height: 50px;   
        border: none;
        border-radius: 10px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* 그림자 효과 */
        transition: transform 0.2s
    }
    .like-btn:hover {
        transform: scale(1.1); /* 마우스를 올렸을 때 약간 커짐 */
    }

 

위와 같이 만들어줬다. 일단 버튼에 이미지를 추가하기 성공했다.