|
예쁜 버튼 만들기
<input type="Button" value="이쁜 버튼" style="color:white; background:#99CCFF; border: #6699FF 2 solid;"onmouseover="this.style.color='blue'; this.style.background='white'; this.style.cursor='hand';"onmouseout="this.style.color='white'; this.style.background='99CCFF';">
<input type="Button" value="분홍색 버튼" style="color:white; background:FF99FF; border: #FF00CC 2 solid;"onmouseover="this.style.color='red'; this.style.background='white'; this.style.cursor='hand';"onmouseout="this.style.color='white'; this.style.background='FF99FF';">
<input type="Button" value="초록색 버튼" style="color:white; background:00CC99; border: #009900 2 solid;"onmouseover="this.style.color='green'; this.style.background='white'; this.style.cursor='hand';"onmouseout="this.style.color='white'; this.style.background='00cc99';">
<input type="Button" value="노란색 버튼" style="color:white; background:ffcc99; border: #cc9933 2 solid;"onmouseover="this.style.color='ffcc33'; this.style.background='white'; this.style.cursor='hand';"onmouseout="this.style.color='white'; this.style.background='FFcc99';">
"style"이란 버튼의 모양을 스타일시트로 지정해 준다는 뜻입니다. color는 버튼의 글자색, background는 버튼의 배경색, border는 버튼의 테두리색을 지정합니다. "onmouseover"에서는 마우스가 올라갔을때의 글자색과 배경색을 지정하며 "onmouseout"에서는 마우스를 다시 치웠을때의 글자색과 배경색을 지정합니다. 여기서 색코드만 변경하시면 다양한 색의 버튼을 만들 수 있구요~
클릭시 다른 홈페이지로의 이동도 응용해 보세요~
버튼에다 <a href="링크하고싶은 홈페이지주소"> 버튼태그</a>
[출처] http://blog.naver.com/hyn4905.do?Redirect=Log&logNo=100003414439 |