精华内容
下载资源
问答
  • 几款好看的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按钮样式
    展开全文
  • button样式需要注意的有几点:1、建议有一个最小宽度,以免在文字很少时使得按钮过于窄,宽高不协调;2、建议有一个padding,以免内部文本显得过于拥挤;2、hover时需要有颜色变化,以告诉用户这是一个可交互元素,...

    css设置按钮样式的方法:定义一个css选择器,然后在按钮标签中使用此选择器即可设置按钮样式。使用:hover伪类选择器可以设置按钮交互时样式。

    f3e174af61151a0e55267100a6cb607e.png

    button样式需要注意的有几点:

    1、建议有一个最小宽度,以免在文字很少时使得按钮过于窄,宽高不协调;

    2、建议有一个padding,以免内部文本显得过于拥挤;

    2、hover时需要有颜色变化,以告诉用户这是一个可交互元素,更为灵动;

    3、获得焦点时应与hover时的效果一致,释放焦点时则回到普通效果。

    4、获得焦点时的outline建议去掉,否则较为难看。

    普通状态样式设置:.btn{

    min-width: 60px;

    padding: 5px 8px;

    background: #fff;

    color: #4daff9;

    border: 1px solid #4daff9;

    }

    交互状态(hover、focus)样式设置:.btn:hover{

    color: #fff;

    background: #0a90f5;

    }

    .btn:focus{

    color: #fff;

    background: #0a90f5;

    outline: none;

    }

    展开全文
  • button样式需要注意的有几点:1、建议有一个最小宽度,以免在文字很少时使得按钮过于窄,宽高不协调;2、建议有一个padding,以免内部文本显得过于拥挤;2、hover时需要有颜色变化,以告诉用户这是一个可交互元素,...

    css设置按钮样式的方法:定义一个css选择器,然后在按钮标签中使用此选择器即可设置按钮样式。使用:hover伪类选择器可以设置按钮交互时样式。

    f3e174af61151a0e55267100a6cb607e.png

    button样式需要注意的有几点:

    1、建议有一个最小宽度,以免在文字很少时使得按钮过于窄,宽高不协调;

    2、建议有一个padding,以免内部文本显得过于拥挤;

    2、hover时需要有颜色变化,以告诉用户这是一个可交互元素,更为灵动;

    3、获得焦点时应与hover时的效果一致,释放焦点时则回到普通效果。

    4、获得焦点时的outline建议去掉,否则较为难看。

    普通状态样式设置:.btn{

    min-width: 60px;

    padding: 5px 8px;

    background: #fff;

    color: #4daff9;

    border: 1px solid #4daff9;

    }

    交互状态(hover、focus)样式设置:.btn:hover{

    color: #fff;

    background: #0a90f5;

    }

    .btn:focus{

    color: #fff;

    background: #0a90f5;

    outline: none;

    }

    展开全文
  • html css button样式

    2013-05-24 15:18:03
    html css button样式
  • html改变按钮样式

    千次阅读 2020-05-26 23:17:43
    今天有人问我怎么改样式,需求是三个按钮,一次点一个,要求被点击的按钮和没被点的按钮是两种不同的样式,如图所示。 最初三个按钮都没选如图一,然后点击“已读”按钮,“已读”按钮样式改变。再点击“全部”...

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

    最初显示
    点击已读

    在这里插入图片描述
    最初三个按钮都没选如图一,然后点击“已读”按钮,“已读”按钮样式改变。再点击“全部”按钮,“全部”按钮样式改变,“已读”按钮变回原样式。
    按钮的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")
        }
    }
    
    展开全文
  • 工具原料:编辑器、浏览器首先设置一个按钮,然后使用css给按钮设置color属性即可实现按钮字怎样在HTML中插入Button按钮,且按钮要显示颜色首先插入内容: 点击 css样式有两种,一种是定义一个class...
  • 单选复选按钮图标html5按钮样式
  • 本篇文章主要给大家介绍如何用HTML实现简单的按钮样式。在网页设计过程中,按钮设置可以说是最为常见且基础的一项html/css知识技能。程序猿的生活:打造全网web前端全栈...button按钮样式代码示例如下:<!DOCT...
  • 本篇文章主要给大家介绍如何用HTML实现简单的按钮样式。在网页设计过程中,按钮设置可以说是最为常见且基础...button按钮样式代码示例如下:button按钮样式.button1 {-webkit-transition-duration: 0.4s;transitio...
  • html5分页导航按钮样式动画特效里面总共包含17种不同效果的垂直分页按钮动画特效。
  • 代码简介:html5分页导航按钮样式动画特效里面总共包含17种不同效果的垂直分页按钮动画特效。
  • 18种html5图片分页导航按钮样式动画特效
  • css设置按钮样式by Ashwini Sheshagiri 通过Ashwini Sheshagiri Buttons have become an inevitable part of front end development. Thus, it is important to keep in mind a few things before you start ...
  • 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="...
  • HTML_炫酷的按钮样式

    千次阅读 2020-08-12 08:31:36
    html部分 <a href="#"> <span></span> <span></span> <span></span> ... Neon button </a> <a href="#"> <span></span>
  • 一、按钮的默认样式// 默认样式button {position:relative;display:block;margin-left:auto;margin-right:auto;padding-left:14px;padding-right:14px;box-sizing:border-box;font-size:18px;text-align:center;text...
  • html5分页导航按钮样式动画特效里面总共包含17种不同效果的垂直分页按钮动画特效。
  • 在过去的Web开发中,通常使用Photoshop来设计按钮样式。不过随着CSS3技术的发展,你完全可以通过几行代码来定制一个漂亮的按钮,并且还可以呈现渐变、框阴影、文字阴影等效果。此类按钮最大的优势是省去了加载图片...
  • html5分页导航按钮样式动画代码里面总共包含17种不同效果的垂直分页按钮动画特效。
  • 如何给提交按钮做css样式 如何用CSS修改提交按钮样式如何在CSS中设置submit按钮样式的变化。设置一个长度与宽度,使用到的CSS代码。经过给它设置长度与宽度后,变成了下图所示,相比与没有任何样式,它会好出很多...
  • 每一个焦点图或幻灯片上都带有前后播放的控制按钮,这款html5 svg焦点图导航箭头按钮样式将导航箭头制作为各种精美的动画效果,大大增强了用户的体验性。
  • Html单选按钮自定义样式

    千次阅读 2019-09-17 14:43:30
    前言: 某天,写了一个带有单选按钮的界面,突然想起网上其他网站各种各样的单选按钮,遂想“改下这个圆圈圈怎么样?”,于是在找了一遍单选按钮样式,没一个说是修改圆圈圈,于是又去网上找了一遍,各种...
  • 按钮开关样式HTML5 CSS3按钮特效,这种风格在智能手机上见到的比较多,十分精美,单击一下,按钮会有起伏的变化,像是开关关闭了和打开了,具体效果请参见演示截图。兼容的浏览器:360极速、FireFox、Chrome、...
  • html按钮样式设置完背景颜色后,四周有白色边框解决方法:1、直接给它设置border样式, border:none 就可以 就可以了。2、就是使用一个背景图片
  • 这次我们要来分享一款基于HTML5和CSS3的社会化分享按钮,这款分享按钮外观样式非常漂亮,按钮的色彩也比较华丽自然,这款基于HTML5的分享按钮提供两种样式,一种是图标式按钮,另一种则是图标结合文字的按钮样式。...
  • html&css实现按钮图标样式

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

    千次阅读 2019-06-06 17:20:47
    都有 https://wow.techbrood.com/fiddle/37189
  • 36种漂亮的CSS3 gradient属性制作的html网页渐变按钮样式

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 263,766
精华内容 105,506
关键字:

html按钮样式