-
2021-12-20 20:29:21
功能:1.点击“设备启动”按键可以启动设备,点击“测量”开始测量。
2.启动状态、测量进度、测量数字结果和图片每一秒刷新一次。
3.点击按键会有“纹波样式”动画效果
效果如图:
直接上代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> body { background-color:#FFe5e5; } h1 { color:orange; text-align:center; } .button { position: relative; background-color: #ffffff; border:2px solid #008cba; border-radius:8px; font-size: 18px; color: #87cefa; padding: 10px 20px; margin: 4px 2px; text-align: center; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; text-decoration: none; overflow: hidden; cursor: pointer; } .button:after { content: ""; background: #a9a9a9; display: block; position: absolute; padding-top: 300%; padding-left: 350%; margin-left: -20px!important; margin-top: -120%; opacity: 0; transition: all 0.8s } .button:active:after { padding: 0; margin: 0; opacity: 1; transition: 0s } p { font-family:"Times New Roman"; font-size:20px; color: #87cefa; } </style> <body> <h1>构造深度测量</h1> <div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #EE872A;"> <center><button class="button" onclick="start()">设备启动</button></center> <form onsubmit="return reloadinit(this)" > </form> <center> <p>启动状态: <iframe id="showinit" frameborder="0" name="f1" width="100" height="28" src="init.txt" scrolling="no"></iframe> </p> </center> <script> function reloadinit() { const showinit = document.getElementById('showinit'); const ts=(new Date()).getTime(); showinit.src=`init.txt?ts=${ts}`; return false; } </script> <div style="font-family:verdana;padding:10px;border-radius:10px;border:10px solid #EE872A;"> <center><button class="button" onclick="measure()">测量</button></center> <form onsubmit="return reloadproce(this)" > <center> <p>测量进度: <iframe id="showproce" frameborder="0" name="f1" width="100" height="28" src="proce.txt" scrolling="no"></iframe> </p> </center> </form> <script> function reloadproce() { const showTxt = document.getElementById('showproce'); const ts=(new Date()).getTime(); showTxt.src=`proce.txt?ts=${ts}`; return false; } </script> <form onsubmit="return reloadresult(this)" > <center> <p>测量数字结果: <iframe id="showresult" frameborder="0" name="f1" width="100" height="28" src="result.txt" scrolling="no"></iframe> </p> </center> </form> <script> function reloadresult() { const showTxt = document.getElementById('showresult'); const ts=(new Date()).getTime(); showTxt.src=`result.txt?ts=${ts}`; return false; } </script> <form onsubmit="return reload(this)" > <center><p>测量图片结果</P></center> </form> <center><img src="image.jpg" id="showViewImg" /></center> <script> function reload() { const showImg = document.getElementById('showViewImg'); const ts=(new Date()).getTime(); showImg.src=`image.jpg?ts=${ts}`; return false; } </script> <script> function start(){ console.log("start") fetch("/start").then(response => response.text()) .then(data => { console.log(data) document.getElementById("result").innerText=data; }); } </script> <script> function measure(){ console.log("measure") fetch("/measure").then(response => response.text()) .then(data => { console.log(data) document.getElementById("result").innerText=data; }); } </script> <script> setInterval(reload,2000); setInterval(reloadinit,10000); setInterval(reloadproce,10000); setInterval(reloadresult,1000); </script> </body> </html>
如上图单纯按键功能
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> .button { position: relative; background-color: #ffffff; border:2px solid #008cba; border-radius:8px; font-size: 18px; color: #87cefa; padding: 10px 20px; margin: 4px 2px; text-align: center; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; text-decoration: none; overflow: hidden; cursor: pointer; } .button:after { content: ""; background: #a9a9a9; display: block; position: absolute; padding-top: 300%; padding-left: 350%; margin-left: -20px!important; margin-top: -120%; opacity: 0; transition: all 0.8s } .button:active:after { padding: 0; margin: 0; opacity: 1; transition: 0s } </style> </head> <body> <h2>按钮动画 - 波纹效果</h2> <button class="button">Click Me</button> </body> </html>
另一种效果(按压特效)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> .button { display: inline-block; padding: 10px 20px; font-size: 18px; cursor: pointer; text-align: center; text-decoration: none; outline: none; color: #87cefa; background-color: #ffffff; border: 2px solid #008cba; border-radius: 8px; box-shadow: 0 9px #999; } .button:hover {background-color: #dcdcdc} .button:active { background-color: #ffffff; box-shadow: 0 5px #666; transform: translateY(4px); } </style> </head> <body> <h2>按钮动画 - "按压效果"</h2> <button class="button">Click Me</button> </body> </html>
更多相关内容 -
html页面button样式
2021-06-16 13:26:13在过去的Web开发中,通常使用Photoshop来设计按钮的样式。不过随着CSS3技术的发展,你完全可以通过几行代码来定制一个漂亮的按钮,并且还可以呈现渐变、框阴影、文字阴影等效果。此类按钮最大的优势是省去了加载图片...在过去的Web开发中,通常使用Photoshop来设计按钮的样式。不过随着CSS3技术的发展,你完全可以通过几行代码来定制一个漂亮的按钮,并且还可以呈现渐变、框阴影、文字阴影等效果。此类按钮最大的优势是省去了加载图片的步骤,并且非常易于编辑、扩展和定制,你只需要更改代码即可。
本文收集了10套基于CSS3的按钮,你可以通过复制粘贴代码到你的CSS文件中来使用这些按钮。但需要注意的是,CSS3需要浏览器的支持,基本上这些按钮可以在大部分现代浏览器中完美呈现,但是在IE中支持还不够好。
【译文】CSS技术:如何正确的塑造button样式!
, but useful for */ display: inline-block; text-align: center; text-decoration: none; /* create a sm ...
微信小程序之分享或转发功能(自定义button样式)
小程序页面内发起转发 通过给 button 组件设置属性open-type="share",可以在用户点击按钮后触发 Page.onShareAppMessage 事件,如果当前页 ...
纯css3手机页面图标样式代码
全部图标:http://hovertree.com/texiao/css/19/ 先看效果: 或者点这里:http://hovertree.com/texiao/css/19/hoverkico.ht ...
Form认证导致登陆页面的样式无效和图片不能显示的原因
最近在做企业内门户网站,一切进展还算顺利,部署到生产环境的时候也能没有什么大问题,只是登录页面的样式不起作用,不知为何,因为是使用了login控件,最初以为是此控件有内置默认样式或者什么原因,于是就不 ...
android_重写button样式
这样的button样式应该源自IOS.假设安卓上实现,则须要使用android上面的layer-list来实现. 事实上layer-list有点像framlayout,作用就是覆盖. 先说一下实现原理 ...
项目遇到的小问题(关于vue-cli中js点击事件不起作用和iconfont图片下载页面css样式乱的解答)
第一个:关于vue-cli中js点击事件不起作用 在vue的methods方法queryBtnFun()中拼接html和click操作事件的时候,发现点击事件一起未起作用: 后来发现是DOM执行顺序 ...
页面css样式找不到问题
出现了一个页面没有样式的问题: 问题: 1.路径不对, 可以打开页面f12看样式是否找到 检查路径是否正确. 2.样式没引全或者没引对. 查看引入的样式是否正确或缺少样式. 3.路径明明写对了却404 ...
36种漂亮的CSS3网页按钮Button样式
-
几款好看的HTML按钮样式
2018-06-14 11:24:15给大家介绍几款好看的HTML按钮样式 按钮样式一: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona原文地址为: 几款好看的HTML按钮样式
给大家介绍几款好看的HTML按钮样式
按钮样式一:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style> #login_click{ margin-top:32px; height:40px;} #login_click a { text-decoration:none; background:#2f435e; color:#f2f2f2; padding: 10px 30px 10px 30px; font-size:16px; font-family: 微软雅黑,宋体,Arial,Helvetica,Verdana,sans-serif; font-weight:bold; border-radius:3px; -webkit-transition:all linear 0.30s; -moz-transition:all linear 0.30s; transition:all linear 0.30s; } #login_click a:hover { background:#385f9e; } </style> </head> <body> <form id="form1" runat="server"> <div> <div style=" width:386px; height:332px; margin-left:auto; margin-right:auto"> <div id="login_form" > <div id="form_account"> 账户:<input id="txt_account" runat="server" type="text" placeholder="用户名或邮件地址" /> </div> <div id="form_password" > 密码:<input id="txt_password" runat="server" type="password" placeholder="请输入密码" /> </div> <div id="login_click"> <a id="btlogin" href="#">登 录</a> </div> </div> </div> </div> </form> </body> </html>
按钮样式二:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Image Rollover with CSS</title> <style type="text/css" media="screen"> a.button { background:url(rss-feed-img.png) repeat 0px 0px; width: 123px; height: 44px; display: block; } a.button span { display: none; } a.button:hover { background: url(rss-feed-img.png) repeat 0px -44px; } </style> </head> <body> <a href="#" class="button"> <span>RSS Feeds</span> </a> </body> </html>
按钮样式三:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <link rel="stylesheet" type="text/css" href="" /> <script type="text/javascript" src="btn.js"></script> <style type="text/css" media="screen"> body { padding: 20px; font-size: 0.85em; font-family: georgia, serif; } .btn { display: block; position: relative; background: #aaa; padding: 5px; float: left; color: #fff; text-decoration: none; cursor: pointer; } .btn * { font-style: normal; background-image: url(btn2.png); background-repeat: no-repeat; display: block; position: relative; } .btn i { background-position: top left; position: absolute; margin-bottom: -5px; top: 0; left: 0; width: 5px; height: 5px; } .btn span { background-position: bottom left; left: -5px; padding: 0 0 5px 10px; margin-bottom: -5px; } .btn span i { background-position: bottom right; margin-bottom: 0; position: absolute; left: 100%; width: 10px; height: 100%; top: 0; } .btn span span { background-position: top right; position: absolute; right: -10px; margin-left: 10px; top: -5px; height: 0; } * html .btn span, * html .btn i { float: left; width: auto; background-image: none; cursor: pointer; } .btn.blue { background: #2ae; } .btn.green { background: #9d4; } .btn.pink { background: #e1a; } .btn:hover { background-color: #a00; } .btn:active { background-color: #444; } .btn[class] { background-image: url(shade.png); background-position: bottom; } * html .btn { border: 3px double #aaa; } * html .btn.blue { border-color: #2ae; } * html .btn.green { border-color: #9d4; } * html .btn.pink { border-color: #e1a; } * html .btn:hover { border-color: #a00; } p { clear: both; padding-bottom: 2em; } form { margin-top: 2em; } form p .btn { margin-right: 1em; } textarea { margin: 1em 0;} </style> </head> <body> <p><a href="#" class="btn blue">This is a blue button</a></p> <p><a href="#" class="btn green">This should be a green button</a></p> <p><big><a href="#" class="btn blue big">Big Text</a></big></p> <form method="post" action="#"> <fieldset> <legend>Form Example</legend> <div><input type="text" /></div> <div><textarea cols="40" rows="10"></textarea></div> <p><input type="Button" id="reset_btn" value="Reset" class="btn" /> <input type="Submit" id="submit_btn" value="Submit this form" class="btn pink" /></p> </fieldset> </form> </body> </html>
转载请注明本文地址: 几款好看的HTML按钮样式
-
html button标签的样式怎么设置?html button标签的样式介绍
2021-04-08 09:14:29本篇文章主要的介绍了关于HTML button标签的样式设置,还有关于HTML button标签的美化样式介绍,接下来就让我们一起来阅读本篇文章吧首先我们先介绍HTML中的button标签的样式设置:普通按钮设置:把input元素的type...本篇文章主要的介绍了关于HTML button标签的样式设置,还有关于HTML button标签的美化样式介绍,接下来就让我们一起来阅读本篇文章吧
首先我们先介绍HTML中的button标签的样式设置:
普通按钮设置:
把input元素的type属性设置为“button”,可以创建普通按钮。按钮上显示的文本是value属性的值,如果没有提供value属性,则只创建一个空按钮。如:
效果很明显,这是默认普通按钮的设置。
默认情况下,在普通按钮上点击,是没有任何反应的。因此,需要为普通按钮注册事件,并手动编写相应的处理函数。假如希望单击上述按钮时,提交表单,则要为按钮注册onClick 事件。如:
立即购买
现在点击按钮,就会触发onClick事件,并调用事件处理函数submitForm(buy),参数buy为待处理表单name属性的值。如果希望点击按钮后提交表单,就可以在事件处理函数中调用form对象的submit()方法:
function submitForm(f) {
f.submit();
}
这是一个默认情况的设置,现在我们来看看给html button标签设置样式:
给大家看一个完整的代码实例:
PHP中文网.div {
display: inline-block;
padding: .3em .5em;
background-image: linear-gradient(#ddd, #bbb);
border: 1px solid rgba(0,0,0,.2);
border-radius: .3em;
box-shadow: 0 1px white inset;
text-align: center;
text-shadow: 0 1px 1px black;
color:white;
font-weight: bold;
}
.div:active{
box-shadow: .05em .1em .2em rgba(0,0,0,.6) inset;
border-color: rgba(0,0,0,.3);
background: #bbb;
}
Button这个的效果如图:
这个的效果是不是很明显,比默认的时候好看多了,等到我们学到js的时候,我们还能用js的技术把这默认的按钮设置的更加美观。
好了,以上就是关于html button标签的样式设置,还有美化样式的总结(想学更多就来PHP中文网),有问题的可以在下方提问。
【小编推荐】
-
css怎么设置按钮样式?
2021-06-11 01:13:51button样式需要注意的有几点:1、建议有一个最小宽度,以免在文字很少时使得按钮过于窄,宽高不协调;2、建议有一个padding,以免内部文本显得过于拥挤;2、hover时需要有颜色变化,以告诉用户这是一个可交互元素,... -
「HTML+CSS」--自定义按钮样式【001】
2021-08-05 21:38:45「HTML+CSS」--自定义按钮样式【001】 -
HTML按钮的写法、样式
2021-08-26 10:51:49标签内写入文字或设置样式,不设置可能会到导致<button>在页面中显示不出来 样式主要以尺寸、字体、背景 button{ width: 60px; height: 20px; font-size: 12px; text-decoration: underl... -
HTML_炫酷的按钮样式
2020-08-12 08:31:36html部分 <a href="#"> <span></span> <span></span> <span></span> ... Neon button </a> <a href="#"> <span></span> -
html改变按钮样式
2020-05-26 23:17:43今天有人问我怎么改样式,需求是三个按钮,一次点一个,要求被点击的按钮和没被点的按钮是两种不同的样式,如图所示。 最初三个按钮都没选如图一,然后点击“已读”按钮,“已读”按钮样式改变。再点击“全部”... -
html button样式
2021-06-10 04:15:19工具原料:编辑器、浏览器首先设置一个按钮,然后使用css给按钮设置color属性即可实现按钮字怎样在HTML中插入Button按钮,且按钮要显示颜色首先插入内容: 点击 css样式有两种,一种是定义一个class... -
html css button样式
2013-05-24 15:18:03html css button样式 -
HTML5/CSS3社会化分享按钮 图标和图文按钮样式
2019-08-23 17:56:46这次我们要来分享一款基于HTML5和CSS3的社会化分享按钮,这款分享按钮外观样式非常漂亮,按钮的色彩也比较华丽自然,这款基于HTML5的分享按钮提供两种样式,一种是图标式按钮,另一种则是图标结合文字的按钮样式。... -
18种html5图片分页导航按钮样式动画特效
2019-09-08 17:20:0918种html5图片分页导航按钮样式动画特效 -
纯css3谷歌Google样式的按钮
2019-12-13 08:28:35这是仿照Google+样式的一款纯css3谷歌样式按钮。谷歌样式以简洁实用而闻名,这款css3按钮风格上就是简洁实用。 -
html5分页导航按钮样式动画特效.zip
2019-07-11 10:31:04代码简介:html5分页导航按钮样式动画特效里面总共包含17种不同效果的垂直分页按钮动画特效。 -
一定能用到的简单但实用的五种按钮样式(原生HTML+CSS步骤详解,含详细注释)
2022-05-15 19:48:56一定能用到的简单但实用的五种按钮样式。有助于前端初学者更好地学习css相关知识,巩固好基础。 -
如何使用HTML5+css3制作出12种常用的按钮开关样式(附完整代码)
2021-06-16 07:22:02现如今前端网页的开发越来越注重设计感,这些设计感更体现在细节处,今天向...2. 按钮开关的形状需要具体问题具体分析,如圆形按钮开关需要用到border-radius语句,方形可以直接使用div设置等。3. 鼠标悬停的时候... -
HTML + CSS 彩虹按钮样式
2022-05-25 14:36:27HTML + CSS 彩虹按钮样式 使用原生代码实现 资源详情:https://blog.csdn.net/qq_45136860/article/details/124965835 -
CSS按钮样式大全(经典)
2021-06-27 10:10:40CSS样式按钮 CSS样式按钮 CSS样式按钮 CSS样式按钮 CSS样式按钮 CSS样式按钮 -
小程序上设置button样式
2022-02-18 15:49:40设置其css如下:背景颜色background-color文字颜色color,设置type为primary是背景色为微信绿,无法设置背景颜色 .btn1 { width: 80%; margin-top: 20rpx; background-color: beige; color: white; } 修改圆角... -
几款不错的按钮样式汇总
2021-06-18 03:50:49几款不错的按钮样式汇总在网页设计中按钮一般默认的都比较...一、带图标的按钮·按钮样式截图·按钮样式代码如下:/* CSS Document *//* BUTTONS */.buttons a, .buttons button{ display:block; float:left; marg... -
一定能用到的简单但实用的五种按钮样式(HTML+CSS步骤详解,含详细注释)
2022-05-18 18:44:16按钮在前端开发中往往是一个必不可少的元素,也有许多精美好看的样式资源供开发者直接使用。但博主认为,对于初学者而言,总是去cv别人做好的,而不理解其中的原理,是很不好的。 本人作为一名计科的学生,在大二也... -
单选复选按钮图标html5按钮样式
2019-11-05 21:11:11单选复选按钮图标html5按钮样式 -
CSS3设置按钮的样式
2020-09-07 10:32:03平面按钮样式——现主流 在实际开发中,按钮的应用是必不可少 使用 CSS 来制作按钮,可以更有新意,更有趣,也可以自定义自己想要的样式 平面样式按钮的使用现在非常流行,并且符合无处不在的平面设计趋势 实现... -
按钮开关样式的HTML5按钮特效.rar
2019-07-10 11:23:24按钮开关样式的HTML5 CSS3按钮特效,这种风格在智能手机上见到的比较多,十分精美,单击一下,按钮会有起伏的变化,像是开关关闭了和打开了,具体效果请参见演示截图。兼容的浏览器:360极速、FireFox、Chrome、... -
jquery如何改变html标签的样式(两种实现方法)
2020-10-27 17:58:40对于如何修饰html标签,这对于js来说,可以通过setAttribute来设置标签的属性,通过getAttribute来得到标签的属性,而在jq中当然也可以实现类似的功能,方法上肯定比js要简化多了,接下来介绍实现方法,感兴趣的朋友... -
前端技巧集:从零制作华丽的按钮CSS样式
2021-06-17 10:53:59按钮效果按钮是HTML非常重要的控件之一,以唯品会的注册按钮为例制作一个当前非常流行的按钮的CSS样式。其他主流网站的按钮实现方式也是类似的,虽然代码多一些,但是童鞋一步步来,看看效果吧。准备现在比较流行... -
a标签按钮样式
2021-06-16 13:28:205、Semantic-UI之基础按钮样式 5.1 基础按钮样式 在Semantic-UI中定义了很多的按钮样式,可以通过class="ui button"来指定,也可以在class中指定颜色. 示例:定义基础按钮样式 ... 「HTML+CSS」--自定义按钮样式... -
如何使用HTML5+css3制作出12种常用的按钮开关样式
2021-06-11 06:31:30按钮开关的形状需要具体问题具体分析,如圆形按钮开关需要用到border-radius语句,方形可以直接使用div设置等。鼠标悬停的时候光标样式的转换也是注重设计感的体现,这里我们着重介绍一下cursor的用法:cursor属性...