精华内容
下载资源
问答
  • html按钮样式
    千次阅读
    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中支持还不够好。

    7da6da80f28ef0fa77be3f330675181a.png

    aaf4d6ce095cbcf72a4b24bcb6669fa7.png

    afcfe1841f861e10e45c1f3ee7c21055.png

    ffab2f23667438b75b4e239bf30d669a.png

    0fb1e366ec04361c60019dfc9b6161ca.png

    9ee0043f7d6e06ffb75cafd41b18aae0.png

    09fab6bc11431fae63540c0d1008024f.png

    81e46f10b23b5f24572b033a92f92ae4.png

    6f0ef27c0b49ae48966b3c64e22b447a.png

    ed35cb456570d3e26e71990406aea74c.png

    【译文】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&lowbar;重写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按钮样式 按钮样式一: &lt;!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标签的美化样式介绍,接下来就让我们一起来阅读本篇文章吧首先我们先介绍HTML中的button标签的样式设置:普通按钮设置:把input元素的type...

    本篇文章主要的介绍了关于HTML button标签的样式设置,还有关于HTML button标签的美化样式介绍,接下来就让我们一起来阅读本篇文章吧

    首先我们先介绍HTML中的button标签的样式设置:

    普通按钮设置:

    把input元素的type属性设置为“button”,可以创建普通按钮。按钮上显示的文本是value属性的值,如果没有提供value属性,则只创建一个空按钮。如:

    96a4692fc3d8e44ca80cd0c1331014f9.png

    效果很明显,这是默认普通按钮的设置。

    默认情况下,在普通按钮上点击,是没有任何反应的。因此,需要为普通按钮注册事件,并手动编写相应的处理函数。假如希望单击上述按钮时,提交表单,则要为按钮注册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

    这个的效果如图:

    da554b1477102595737be16f7572ca11.png

    这个的效果是不是很明显,比默认的时候好看多了,等到我们学到js的时候,我们还能用js的技术把这默认的按钮设置的更加美观。

    好了,以上就是关于html button标签的样式设置,还有美化样式的总结(想学更多就来PHP中文网),有问题的可以在下方提问。

    【小编推荐】

    展开全文
  • css怎么设置按钮样式

    千次阅读 2021-06-11 01:13:51
    button样式需要注意的有几点:1、建议有一个最小宽度,以免在文字很少时使得按钮过于窄,宽高不协调;2、建议有一个padding,以免内部文本显得过于拥挤;2、hover时需要有颜色变化,以告诉用户这是一个可交互元素,...
  • 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:36
    html部分 <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:03
    html css button样式
  • 这次我们要来分享一款基于HTML5和CSS3的社会化分享按钮,这款分享按钮外观样式非常漂亮,按钮的色彩也比较华丽自然,这款基于HTML5的分享按钮提供两种样式,一种是图标式按钮,另一种则是图标结合文字的按钮样式。...
  • 18种html5图片分页导航按钮样式动画特效
  • 这是仿照Google+样式的一款纯css3谷歌样式按钮。谷歌样式以简洁实用而闻名,这款css3按钮风格上就是简洁实用。
  • 代码简介:html5分页导航按钮样式动画特效里面总共包含17种不同效果的垂直分页按钮动画特效。
  • 一定能用到的简单但实用的五种按钮样式。有助于前端初学者更好地学习css相关知识,巩固好基础。
  • 现如今前端网页的开发越来越注重设计感,这些设计感更体现在细节处,今天向...2. 按钮开关的形状需要具体问题具体分析,如圆形按钮开关需要用到border-radius语句,方形可以直接使用div设置等。3. 鼠标悬停的时候...
  • HTML + CSS 彩虹按钮样式 使用原生代码实现 资源详情:https://blog.csdn.net/qq_45136860/article/details/124965835
  • CSS按钮样式大全(经典)

    千次阅读 2021-06-27 10:10:40
    CSS样式按钮 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...
  • 按钮在前端开发中往往是一个必不可少的元素,也有许多精美好看的样式资源供开发者直接使用。但博主认为,对于初学者而言,总是去cv别人做好的,而不理解其中的原理,是很不好的。 本人作为一名计科的学生,在大二也...
  • 单选复选按钮图标html5按钮样式
  • CSS3设置按钮样式

    万次阅读 多人点赞 2020-09-07 10:32:03
    平面按钮样式——现主流 在实际开发中,按钮的应用是必不可少 使用 CSS 来制作按钮,可以更有新意,更有趣,也可以自定义自己想要的样式 平面样式按钮的使用现在非常流行,并且符合无处不在的平面设计趋势 实现...
  • 按钮开关样式HTML5 CSS3按钮特效,这种风格在智能手机上见到的比较多,十分精美,单击一下,按钮会有起伏的变化,像是开关关闭了和打开了,具体效果请参见演示截图。兼容的浏览器:360极速、FireFox、Chrome、...
  • 对于如何修饰html标签,这对于js来说,可以通过setAttribute来设置标签的属性,通过getAttribute来得到标签的属性,而在jq中当然也可以实现类似的功能,方法上肯定比js要简化多了,接下来介绍实现方法,感兴趣的朋友...
  • 按钮效果按钮HTML非常重要的控件之一,以唯品会的注册按钮为例制作一个当前非常流行的按钮的CSS样式。其他主流网站的按钮实现方式也是类似的,虽然代码多一些,但是童鞋一步步来,看看效果吧。准备现在比较流行...
  • a标签按钮样式

    2021-06-16 13:28:20
    5、Semantic-UI之基础按钮样式 5.1 基础按钮样式   在Semantic-UI中定义了很多的按钮样式,可以通过class="ui button"来指定,也可以在class中指定颜色. 示例:定义基础按钮样式 ... 「HTML+CSS」--自定义按钮样式...
  • 按钮开关的形状需要具体问题具体分析,如圆形按钮开关需要用到border-radius语句,方形可以直接使用div设置等。鼠标悬停的时候光标样式的转换也是注重设计感的体现,这里我们着重介绍一下cursor的用法:cursor属性...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 297,741
精华内容 119,096
关键字:

html按钮样式