精华内容
下载资源
问答
  • html改变按钮样式

    千次阅读 2020-05-26 23:17:43
    最初三个按钮都没选如图一,然后点击“已读”按钮,“已读”按钮样式改变。再点击“全部”按钮,“全部”按钮样式改变,“已读”按钮变回原样式。 按钮的html代码如下 <div style="justify-content: space-...

    今天有人问我怎么改样式,需求是三个按钮,一次点一个,要求被点击的按钮和没被点的按钮是两种不同的样式,如图所示。

    最初显示
    点击已读

    在这里插入图片描述
    最初三个按钮都没选如图一,然后点击“已读”按钮,“已读”按钮样式改变。再点击“全部”按钮,“全部”按钮样式改变,“已读”按钮变回原样式。
    按钮的html代码如下

    <div
          style="justify-content: space-between;width: 20%"
          class="flex-row">
          <button
            id="all"
            class=".white.shadowed shadowed big item"
            @click="refresh(0,'all')">
            全部
          </button>
          <button
            id="unRead"
            class=".white.shadowed shadowed big item"
            @click="refresh(0,'unRead')">
            未读
          </button>
          <button
            id="read"
            class=".white.shadowed shadowed big item"
            @click="refresh(0,'read')">
            已读
          </button>
        </div>
    

    这里先说第一种方法

    document.getElementById('all').style.fontSize='35px'  //修改字体大小
    

    但是现在要求的样式已经有了,需要直接换class内的名称,将.white.shadowed改为theme-primary,不能单独修改某个属性。经过查询后用来这个方法。

    document.getElementById("unRead").setAttribute("class","theme-primary big item")
    

    具体js代码如下,因为点击按钮还有其他需求,所以有参数page用了async,光实现这个功能可以去掉,并在html中去掉page参数。

    let refresh = async function (page,isRead) {
        if (isRead == null){
          isRead = "unRead";
        }
        if(isRead==="unRead"){
          document.getElementById("unRead").setAttribute("class","theme-primary big item")
          document.getElementById("all").setAttribute("class",".white.shadowed shadowed big item")
          document.getElementById("read").setAttribute("class",".white.shadowed shadowed big item")
        }
        else if(isRead==="all"){
          document.getElementById("all").setAttribute("class","theme-primary big item")
          document.getElementById("unRead").setAttribute("class",".white.shadowed shadowed big item")
          document.getElementById("read").setAttribute("class",".white.shadowed shadowed big item")
        }
        else{
          document.getElementById("read").setAttribute("class","theme-primary big item")
          document.getElementById("unRead").setAttribute("class",".white.shadowed shadowed big item")
          document.getElementById("all").setAttribute("class",".white.shadowed shadowed big item")
        }
    }
    
    展开全文
  • CSS3设置按钮样式

    千次阅读 2020-09-07 10:32:03
    平面按钮样式——现主流 在实际开发中,按钮的应用是必不可少 使用 CSS 来制作按钮,可以更有新意,更有趣,也可以自定义自己想要的样式 平面样式按钮的使用现在非常流行,并且符合无处不在的平面设计趋势 实现...

    平面按钮样式——现主流

    在实际开发中,按钮的应用是必不可少
    使用 CSS 来制作按钮,可以更有新意,更有趣,也可以自定义自己想要的样式

    • 平面样式按钮的使用现在非常流行,并且符合无处不在的平面设计趋势平面按钮

    实现方式

    .button {
        background-color: #4CAF50; /* Green */
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
    }
    

    按钮颜色

    颜色:Green ,Blue, Red, Gray ,Black按钮颜色
    实现方式

    
    .button1 {
    	background-color: #4CAF50;
    }
    

    按钮大小

    尺寸10px ,12px ,16px 20px , 24px
    可以使用 font-size 属性来设置按钮大小按钮大小
    实现方式

    .button1 {
    	font-size: 10px;
    }
    

    圆角按钮

    弧度:2px ,4px ,8px ,12px ,50%
    可以使用 border-radius 属性来设置圆角按钮
    圆角按钮
    实现方式

    .button1 {
    	border-radius: 2px;
    }
    

    边框样式CSS按钮

    边框样式按钮与平面按钮属于同一类。唯一的区别是,将使用边框来代替平面按钮所使用的背景颜色。以下代码是按钮处于正常的情况下的状态

    按钮边框颜色

    绿 蓝 红 灰 黑
    可以使用 border 属性设置按钮边框颜色按钮边框颜色
    实现方式

    .button1 {
        background-color: white;
        color: black;
        border: 2px solid #4CAF50; /* Green */
    }
    

    鼠标悬停按钮

    可以使用 :hover 选择器来修改鼠标悬停在按钮上的样式
    提示: 可以使用 transition-duration 属性来设置 “hover” 效果的速度
    鼠标悬停按钮
    实现方式

    /* 上图蓝色按钮 */
    .button {
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
    }
    
    .button:hover {
        background-color: #4CAF50; /* Green */
        color: white;
    }
    

    按钮阴影

    阴影按钮 鼠标悬停后显示阴影
    使用 box-shadow 属性来为按钮添加阴影
    按钮阴影

    按钮阴影
    实现方式

    .button1 {
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    }
    
    .button2:hover {
        box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    }
    

    按钮动画

    这些“按下”式按钮结合了一些平面设计和假象,让用户感觉他们实际上按下了按钮。当用户按下它时,它似乎陷入了页面。它的实现需要用到阴影来设置,使其具有3D弹出外观。以下代码是按钮处于正常的情况下的状态
    按钮动画
    实现方式

     button {
    	width: 200px;
    	height: 100px;
    	color: #fff;
    	background-color: #6496c8;
    	border: none;
    	border-radius: 15px;
    	box-shadow: 0 10px #27496d;
    }
    
    展开全文
  • 几款好看的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按钮样式设置完背景颜色后,四周有白色边框解决方法:1、直接给它设置border样式, border:none 就可以 就可以了。2、就是使用一个背景图片


    html中 按钮样式,设置完背景颜色后,四周有白色边框


    解决方法:

    1、直接给它设置border样式,  border:none 就可以 

      


    就可以了。


    2、就是使用一个背景图片

    展开全文
  • html按钮样式

    千次阅读 2019-12-22 03:54:26
    css样式 .tijiao{ background: #ff6600; border: 0; margin: 0; padding: 5px 20px; color: #fff; font-weight: bold; border-radius: 3px; cursor: pointer; } 代码 <input type="...
  • 设置按钮禁用时的样式

    千次阅读 2019-10-03 18:47:51
      按钮有可用和不可用之分,一般按钮不可用时默认是置灰且不可点击的,但是为了配合整个项目的样式和色调,我们需要对不可用的按钮进行样式的调整。 效果展示   按钮可用时的样式:      按钮不可用时的样式...
  • HTML_炫酷的按钮样式

    千次阅读 多人点赞 2020-08-12 08:31:36
    html部分 <a href="#"> <span></span> <span></span> <span></span> <span></span> Neon button </a> <a href="#"> <span></...
  • Bootstrap按钮,按钮样式,大小设置

    千次阅读 2020-12-15 21:49:20
    按钮样式: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible"content="IE=edge"> <meta name="viewport" content="width...
  • Html单选按钮自定义样式

    千次阅读 2019-09-17 14:43:30
    前言: 某天,写了一个带有单选按钮的界面,突然想起网上其他网站各种各样的单选按钮,遂想“改下这个圆圈圈怎么样?”,于是在找了一遍单选按钮样式,没一个说是修改圆圈圈,于是又去网上找了一遍,各种...
  • 文本框样式默认设置为隐藏 ![图片说明](https://img-ask.csdn.net/upload/201809/24/1537762135_493627.png) | 按一下回复,显示隐藏的文本框,现在要点2次才能显示,怎么才能点一次就可以 ![图片说明]...
  • HTML5——按钮样式

    千次阅读 2019-06-06 17:20:47
    都有 https://wow.techbrood.com/fiddle/37189
  • css按钮样式

    万次阅读 多人点赞 2017-04-05 09:27:28
    创建漂亮的 CSS 按钮的 10 个代码片段 IT程序狮子烨 1 个月前 如果你正在寻找一些高质量的 CSS 按钮的示例,那么这篇文章一定是你的“菜”。在本文中,我们从 CodePen 上收集了 10 个独特的 CSS 按钮合集...
  • 它通过隐藏本机单选按钮来实现此目的,将其替换为可以轻松设置样式的 span 元素。 该脚本会优雅地降级,因此如果禁用 JavaScript,则会出现本机单选按钮,而不是您的样式单选按钮。 它也是“可标签的”并支持键盘...
  • html&css实现按钮图标样式

    千次阅读 2020-08-30 14:46:31
    页面中按钮效果的实现 样式一:实心圆 HTML代码: css代码 样式二:圆环 html代码:
  • 自定义按钮样式

    千次阅读 2019-04-27 19:44:58
    开发工具与关键技术:Dreamweaver,CSS 作者:李建威 撰写时间:2019年04月27日 代码如下: <!doctype html> <html>...自定义按钮样式</title> </head> <style> ....
  • 单选按钮和多选按钮样式设置

    千次阅读 2017-02-16 12:54:38
    1、css中样式设置: /*父元素div*/ .choice{ position: relative; } /*label*/ .choice .radio{ position: relative; display: inline-block; padding-left: 25px; cursor:
  • 这是创建超级基本提交按钮的方式: <input type="button" value="Submit" /> 用图像替换此默认按钮所需要做的就是将类型更改为image,然后声明源... 如果您想进一步设置样式声明的样式(例如,浮点数,边...
  • button按钮样式

    万次阅读 2018-03-08 09:50:40
    在许多网站中都需要实用到按钮,一个好看实用的css按钮即可以给访问者以美感,又可以方便开发者。下面就是一个纯css按钮,需要的可以参考。css代码.div { display: inline-block; padding: .3em .5em; background...
  • HTML自定义选取按钮(input样式按钮

    万次阅读 多人点赞 2018-10-27 16:51:21
    自定义文件上传按钮 谷歌浏览器下,默认的按钮是这个样子的: 火狐浏览器下是酱紫的: IE浏览器下是这个样子的: 个人表示真的丑陋,无法接受! 修改 首先 &lt;!DOCTYPE html&gt; &lt;html&...
  • 单选按钮更改样式HTML代码: 人员(单选) test1
  • 修改文件上传按钮样式

    千次阅读 2016-04-26 22:51:36
    页面中修改文件上传默认按钮样式
  • 好看按钮样式

    千次阅读 2018-08-30 09:40:14
    DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;style&gt;...
  • Web前端自定义input按钮样式

    千次阅读 2020-05-24 17:17:39
    Web前端自定义input按钮样式html中一般我们定义一个< input type=“raddio” > 是自带样式的 但是我们有些时候会需要更改他的样式 一般我们会采用使用一个伪元素选择器,在::before,在label前插入一个新...
  • bootstrap 按钮样式大全

    千次阅读 2018-12-13 14:07:07
    文章来自:源码在线https://www.shengli.me/css/423.html       效果:       大小按钮样式:     代码:    效果:
  • 36种漂亮的网页Button按钮样式
  • HTML修改单选框多选框按钮样式

    千次阅读 2016-11-22 18:05:40
    <!--html--> 车内净化 <input type="radio"
  • 关于html中如何设置按钮背景与背景图片一样,寻思了好久,代码如下 .banner .container .middle > a { margin-left:640px; margin-top:500px; text-align: center; font-size: 18px; position: relativ
  • CSS样式 - 分页按钮样式

    千次阅读 2017-03-15 14:55:37
    HTML<div class="pagination"> 首页">首页 上一页">上一页 <span class="current">1</span><span data-ajax-url="/InvestmentProject/
  • 漂亮的CSS按钮样式单,只需要通过简单的CSS样式单,就可以实现各种样式的按钮,使用简单、方便。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 224,905
精华内容 89,962
关键字:

html设置按钮的样式