自定义按纽2

以前曾做个一个自定义样式的按钮,样子看起来还是比较满意的,但后来发现只能在Ie下面用了,所以最近又搞了另外一个版本的,是用Photoshop做了一张渐变的图片做为按钮的底画了.

先看一下按钮的背景图吧,是一幅上下两个框大小相同的图.(此图放在网站的photo目录中)

由于想整个网站都使用相同风格的按钮,所以将按钮的形式做在了skin文件中!(此文件应在网站目录的Themes子目录中)

 

新建一个名为MyButton.skin的文件放到../Themes/Default/中,代码如下

<asp:Button CssClass="myButton_mouseOut" οnmοuseοver="this.className='myButton_mouseOver'" οnmοuseοut="this.className='myButton_mouseOut'" runat="server" style="border-top-style: none; border-right-style: none; border-left-style: none; border-bottom-style: none" mce_style="border-top-style: none; border-right-style: none; border-left-style: none; border-bottom-style: none" Font-Bold="True" Font-Strikeout="False" ForeColor="Purple" />

文件中用到的myButton_mouseOver及myButton_mouseOut放在../App_Themes/MyThemesCss.css中,代码:

.myButton_mouseOut {width:112.5px;height:40px; PADDING-RIGHT: 1px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 1px;BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 1px; BORDER-BOTTOM: #7EBF4F 1px solid; background:url(../photo/ShadowButton.png) no-repeat 0 0} .myButton_mouseOver {width:112.5px;height:40px; PADDING-RIGHT: 1px; BORDER-TOP: 7EBF4F 1px solid; PADDING-LEFT: 1px;BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 1px; BORDER-BOTTOM: #7EBF4F 1px solid; background:url(../photo/ShadowButton.png) no-repeat 0 -40px}

再在htm中象平常一样加入按钮

<asp:Button ID="Button1" runat="server" Text="Button" />

 

然后就这样完成了....