凸起的按钮效果

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需刷新才能执行]

(0)

相关推荐

  • 凸起的按钮效果

    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 but

  • iOS Tabbar中间添加凸起可旋转按钮功能

    最近的项目中有需求在tabbar中间添加凸起按钮,并且点击时按钮要旋转,看了仿斗鱼的凸起,点击后是present出来View,而不是像常规的tabbar上添加一个页面,所以不符合要求,经过一段摸索最后得的一个比较好的效果,下面看效果图 ![效果图.gif](http://upload-images.jianshu.io/upload_images/1828346-c472c423ad7e1e0c.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/

  • iOS DropDown下拉按钮效果代码分享

    本文实例为大家分享了iOS下拉按钮效果展示的具体代码,供大家参考,具体内容如下 一.效果图. 二.工程图. 三.代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController : UIViewController @end RootViewController.m #import "RootViewController.h" #import "NIDropDown.h&q

  • javascript简单实现跟随滚动条漂浮的返回顶部按钮效果

    本文实例讲述了javascript简单实现跟随滚动条漂浮的返回顶部按钮效果.分享给大家供大家参考,具体如下: 比较优秀的一款超过一屏高度才显示的,跟随滚动条漂浮的返回顶部按钮特效代码. 运行效果如下图所示: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo

  • js实现仿Windows风格选项卡和按钮效果实例

    本文实例讲述了js实现仿Windows风格选项卡和按钮效果的方法.分享给大家供大家参考.具体实现方法如下: <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <style type="text/css"> <!-- body{ font-family: 'MS Shell Dl

  • C#键盘输入回车键实现点击按钮效果的方法

    本文实例讲述了C#键盘输入回车键实现点击按钮效果的方法,在C#项目开发中非常具有实用价值.分享给大家供大家参考. 具体实现方法如下: 把Form的KeyPreview设为true 然后设置KeyDown,KeyUp或KeyPress事件.在KeyDown事件中截获. 主要功能代码如下: this.KeyDown += new KeyEventHandler(textBox1_KeyDown); private void textBox1_KeyDown(object sender, KeyEve

  • JS模仿腾讯图片站的图片翻页按钮效果完整实例

    本文实例讲述了JS模仿腾讯图片站的图片翻页按钮效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" conten

  • 基于JS分页控件实现简单美观仿淘宝分页按钮效果

    最新版本代码请移步到https://github.com/pgkk/kkpager 在线测试链接:http://pgkk.github.io/kkpager/example/pager_test.html 分页按钮思想: 1.少于9页,全部显示 2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码 附件中有完整例子的压缩包下载.已更新到最新版本 先看效果图: 01输入框焦点效果 02效果 模仿淘宝的分页按钮效果控件kkpager JS代码: Js代码 var kkpager = {

  • 微信小程序实现发送验证码按钮效果

    本文实例为大家分享了微信小程序发送验证码按钮效果展示的具体代码,供大家参考,具体内容如下 首先上图,最终效果如下: 实现关键点 获取验证码按钮无边框: 可以用 button::after{ border: none; } 来去除边框,或者直接用view绑定点击事件.本例子中没有使用button 点击发送后,60秒内按钮处于disable状态 点击发送后,text分为剩余秒数和后缀两部分 .form_group 使用 flex 布局 代码 .wxml <view class="form_gr

  • 基于vue实现一个神奇的动态按钮效果

    今天我们将利用vue的条件指令来完成一个简易的动态变色功能按钮 首先我们还是要对vue进行配置,在上篇随笔中有相关下载教学. 然后我们要在html页面上搭建三个简易的按钮,颜色分别为紫,绿和蓝(颜色随意)其代码如下: <body> <div id="app"> <p> <button @click="btn_click('pg1')" :style="{background:'rebeccapurple'}&quo

随机推荐