인터렉티브 이미지 버튼[CSS]

[광고 누르면 오늘의 행운 상승!!]

 

HTML 이미지 버튼

• HTML 이용 시 이미지 버튼 만들 수 있음
• 버튼 이미지 제작
  → 마우스 올라갔을 때 버튼 이미지 제작
  → 눌렀을때 이미지 제작
• a요소 중 button 클래스 속성을 가진 요소 선택
  - a요소 : inline-label 요소 → width,height 설정 불가
                                    → diplay: block; 설정
  = a 요소의 크기 : 디자인한 이미지 크기에 맞춤 → 160*19
  = 버튼 이미지 : 배경 이미지로 설정
  = 버튼 텍스트 설정 : 텍스트 정렬 - 가운데 / 적절한 패딩 설정
• 버튼 롤오버, 클릭 시 버튼 이미지 바뀌는 효과 주기
  = a.button:hover : 버튼에 마우스 오버 시 스타일 적용
  = a.button:active : 마우스 버튼 클릭 시 스타일 적용
  
  

-