html按钮突出效果,凸起的按钮效果

凸起的按钮效果

来源：中文源码网    浏览： 次    日期：2018年9月2日

【下载文档:  凸起的按钮效果.txt 】

(友情提示:右键点上行txt文档名->目标另存为)

凸起的按钮效果

function movr(src)

{ src.onselectstart = new Function("return false");

with (src.style) {

color="red"

borderLeft = "1px solid buttonhighlight";

borderRight = "1px solid buttonshadow";

borderTop = "1px solid buttonhighlight";

borderBottom = "1px solid buttonshadow";

padding = "0";

cursor="hand";

}

}

function mdwn(src)

{ src.onselectstart = new Function("return false");

with (src.style) {

color="red"

borderRight = "1px solid buttonhighlight";

borderLeft= "1px solid buttonshadow";

borderBottom = "1px solid buttonhighlight";

borderTop = "1px solid buttonshadow";

padding = "0";

}

}

function mout(src)

{ src.onselectstart = new Function("return false");

with (src.style) {

color="black"

background = "buttonface"; //此为鼠标移动后的颜色，可根据需要改变

border = "1px solid buttonface";

padding = "0";

}

}

button

button

button

button

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] body{background: #DDD;}

table

{

width: 450px;height:75;

background: #CCC;filter:progid:DXImagetransform.microsoft.shadow(strength=10,direction=135,color=#666666);

}

td{text-align: center;}

td a{

width: 100px;

30px;

text-align: center;

border-top: 2px solid #FFF;

border-bottom: 2px solid #333;

text-decoration: none;padding:3px;

}

td a:hover{

background: #DDD;font-family:华文行楷;padding:5px;

}

td a:active

{

padding:7px;

color: #ED1C24;

font-weight: bold;

}

金翅擘海知往观来独来读网野火寒烟

萧萧小雨湖面无舟孤零飘客天牙海脚

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

function movr(src)

{ src.onselectstart = new Function("return false");

with (src.style) {

color="red"

borderLeft = "2px solid buttonhighlight";

borderRight = "2px solid buttonshadow";

borderTop = "2px solid buttonhighlight";

borderBottom = "2px solid buttonshadow";

padding = "0";

cursor="hand";

}

}

function mdwn(src)

{ src.onselectstart = new Function("return false");

with (src.style) {

color="red"

borderRight = "1px solid buttonhighlight";

borderLeft= "1px solid buttonshadow";

borderBottom = "1px solid buttonhighlight";

borderTop = "1px solid buttonshadow";

padding = "0";

}

}

function mout(src)

{ src.onselectstart = new Function("return false");

with (src.style) {

color="black"

background = "buttonface"; //此为鼠标移动后的颜色，可根据需要改变

border = "1px solid buttonface";

padding = "0";

}

}

鹤发童颜

青梅竹马

知往观来

金翅擘海

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

亲,试试微信扫码分享本页! *^_^*