-
CSS - 이미지 2개로 효과주기 (버튼)프로그래밍/HTML & CSS 2021. 9. 23.반응형
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> a.roll img { display: inline; border: 0; } a.roll img.over{ display: none; } a.roll:hover img { display: none; } a.roll:hover img.over { display: inline; } </style> </head> <body> <div> <a class="roll" href="#"> <img src="../img/btnWrite-1.gif"> <img src="../img/btnWrite-2.gif" class="over"> </a> </div> </body> </html>
올라와 있는 기본 버튼 이미지에 마우스를 올리면 버튼이 눌린 것 처럼(실제로는 버튼이 눌린 사진을 표시)
효과 주기
반응형'프로그래밍 > HTML & CSS' 카테고리의 다른 글
css - 티스토리 블로그 메뉴 사이드 바 없애기 (0) 2022.05.29 CSS - grid 그리드 (0) 2021.09.23 CSS - flex (0) 2021.09.23 CSS - 영역 관련 (0) 2021.09.23 CSS - float 개요 (0) 2021.09.22
