button按钮常用样式设计

button按钮常用样式设计

一、按钮代码

<button></button> 

 

 

二、按钮嵌套

<button><table><button>ok</button></table></button> 

  

三、添加对象

  <button>添加对象</button>   对象：&nbsp; 、文字、图像、移动、水平线、框架、分组框、音频视频 等。

按钮的扩大

<button>&nbsp; &nbsp;</button> 

 

按钮上加字

<button>按钮字</button> 

 

按钮上加图

<button><IMG src="图片地址"></button>

按钮上移动对象

<button> <MARQUEE behavior=alternate>移动对象</MARQUEE></button>

    

按钮上加水平线

<button><HR><HR width=宽 SIZE=粗细><HR></button>

 

按钮中的分组框

<button><fieldset style="padding:5"><legend>分组框</legend>Halo</fieldset ></button>

按钮中的框架

<button><IFRAME name=1 src="网址">浏览器不支持嵌入式框架，或被配置为不显示嵌入式框架。</IFRAME></button>

 

按钮中音频视频

<button><EMBED src=音频视频网址width="宽"height="高"autostart="true"></button>

按钮中的flash

<button><object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1" codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="边框" width="宽" height="高"><param name="movie" value="flash地址"><param name="quality"value="High"></object></button>

  

按钮中的表格

3x3表格1： <button><table border=1><tr><td>11</td><td>12</td><td>13</td></tr><tr><td>21</td><td>22</td><td>23</td></tr><tr><td>31</td><td>32</td><td>33</td></tr></table></button>
3x3表格2： <button><table border=0><tr><td><button>11</button> </td><td><button>12</button> </td><td><button>13</button></td></tr><tr><td><button>21</button></td><td><button>22</button></td><td><button>23</button></td></tr><tr><td><button>31</button></td><td><button>32</button></td><td><button>33</button></td></tr></table></button>

 

 

四、设置按钮CSS样式

例如，<button style="width:150px;height:50px;background-Color:#9cc5f8;border:0;"></button>

其中：width:150px;height:50px; 为按钮的宽度、高度，background-Color:#9cc5f8; 为按钮的背景色，

border:0; 是去掉按钮默认的边框。