자바스크립트로 버튼을 예쁘게 만들어 사용해 보세요.

자바스크립트로 버튼을 예쁘게 만들어 사용해 보세요.

 

/*css*/

.btn {

       background-color:transparent;

       color:transparent;

       cursor:pointer;

       border:none; 

}

 

/*javascript*/

 

function jsButton(width,height,func,txt,icon)

{

       var btn = "";

       if(icon) icon = "<img src='"+icon+"' align='absmiddle'> ";

       else icon = "";

 

       btn += "<button class='btn' onfocus='this.blur()' ";

       btn += "style='width:"+width+";height:"+ height +"'onClick=\""+func+"\" title='"+txt+"'>";

       btn += "<table cellspacing=0 cellpadding=0><tr>";

       btn += "<td class=ltd></td>";

       btn += "<td class=ctd>"+icon+txt+"</td>";

       btn += "<td class=rtd></td></tr></table></button>";

       document.write(btn);

}

 

 

function jsButtonImage(width,height,func,txt,icon)

{

       var btn = "";

       if(icon) icon = "<img src='"+icon+"' align='absmiddle'> ";

       else icon = "";

 

       btn += "<button class='btn' onfocus='this.blur()' ";

       btn += "style='width:"+width+";height:"+ height +"'onClick=\""+func+"\" title='"+txt+"'>";

       btn += "<table cellspacing=0 cellpadding=0><tr>";

       btn += "<td class=ltd2></td>";

       btn += "<td class=ctd2>"+icon+txt+"</td>";

       btn += "<td class=rtd2></td></tr></table></button>";

       document.write(btn);

}

 

 

* 사용법

 

<script language="javascript">

jsButton("70","22","OnExcel();","<font color=#990033>엑셀등록</font>");

jsButton("50","22","self.close();","<font color=#990033>닫기</font>");

</script>