精华内容
下载资源
问答
  • 前端按钮样式
    2019-06-03 09:40:51

    按钮:
    包括蓝色.primary,浅蓝色.info,绿色.success,红色.danger。
    对于不活动或由于某种原因被应用程序禁用的按钮,请使用禁用状态。那是.disabled关于链接和:disabled为</button元素 primary action残疾状态样式

    更多相关内容
  • 按钮效果按钮是HTML非常重要的控件之一,以唯品会的注册按钮为例制作一个当前非常流行的按钮的CSS样式。其他主流网站的按钮实现方式也是类似的,虽然代码多一些,但是童鞋一步步来,看看效果吧。准备现在比较流行...

    5bd08a2319ff

    按钮效果

    按钮是HTML非常重要的控件之一,以唯品会的注册按钮为例制作一个当前非常流行的按钮的CSS样式。其他主流网站的按钮实现方式也是类似的,虽然代码多一些,但是童鞋一步步来,看看效果吧。

    准备

    现在比较流行使用a标签制作按钮,所以,先在html中加上个a标签如下:

    立刻注册

    在标签上加上个类属性,值为btn-vip。接着我们就为这个类加上一些CSS效果。

    .btn-vip {

    // 属性

    }

    准备工作OK,效果如下图:

    5bd08a2319ff

    1. 设置按钮的大小和边框

    我们先设置按钮的边框。(颜色使用唯品会特用的红色#f10180)

    border:1px solid #f10180;

    看一下边框出来了!(忘记border这种简写方式的童鞋该复习了。)

    5bd08a2319ff

    然后设置按钮大小,数值大家可以使用工具量一下。这里我们使用宽143px和高43px。

    width: 143px;

    height: 43px;

    看一下效果。

    5bd08a2319ff

    已没有任何变化,为啥?不要忘记a标签是行内标签,宽高设置是不起作用的,肿么办?聪明的童鞋知道使用display可以修改这个属性。代码如下:

    display: inline-block;

    宽高设置生效了。

    5bd08a2319ff

    边框还有个圆角,使用CSS3的属性border-radius设置一下吧。(单词radius是半径)

    border-radius: 5px;

    效果如下:

    5bd08a2319ff

    2. 设置按钮的背景和文字

    按钮大小和边框设置好了,我们要设置按钮里面的样式了。

    先从背景色开始。

    background: #f10180;

    5bd08a2319ff

    改变一下字体的颜色和大小

    color:#fff;

    font-weight:bold;

    font-size:18px;

    5bd08a2319ff

    大体样子已经出来了,只要调整一下位置,上下左右居中即可。

    先水平居中

    text-align: center;

    5bd08a2319ff

    再来垂直居中。(文本的垂直居中有很多种,这里使用的是行高设置为按钮高度43px这种方式)

    line-height: 43px;

    5bd08a2319ff

    通常,按钮默认是不显示下划线的,我们除去下划线。

    text-decoration: none;

    OK,我们的最终效果如下:

    5bd08a2319ff

    3. 添加特效

    通常,当我们把鼠标放在按钮上会有一些特定提示,表示这个是个可以点击的。有种做法比较流行就是在文字下增加下划线(之前把下划线除去了,现在又加了回来)。鼠标放在元素上显示演示,我们的做法是使用:hover这个伪类。

    .btn-vip:hover{

    text-decoration: underline;

    }

    鼠标放在按钮上效果如下:

    5bd08a2319ff

    4.最后

    整个按钮CSS代码整理如下,童鞋们试一下吧。

    .btn-vip {

    border:1px solid #f10180;

    width: 143px;

    height: 43px;

    display: inline-block;

    border-radius: 5px;

    background: #f10180;

    color:#fff;

    font-weight:bold;

    font-size:18px;

    text-align: center;

    line-height: 43px;

    text-decoration: none;

    }

    .btn-vip:hover{

    text-decoration: underline;

    }

    童鞋们试一下给其他标签加上这个类试试。

    立即注册

    立即注册

    立即注册

    上面的标签都显示成按钮的样子,这是CSS威力所在,但是实际上,我们只在a button和input type="button"加上按钮CSS样式。

    代码虽然多了一些,童鞋们,慢慢试一下,收获会不少哦!

    展开全文
  • 36种漂亮的CSS3网页按钮Button样式,不看不知道,一看吓一跳,让你以后不用再为按钮样式担心!
  • 本篇文章将会详细讲解xia五种简单的按钮样式,虽然简单,但作为基础,也很实用,且有着大学问。 文章目录 前言一 开始之前 一、鼠标悬浮,按钮背景滑动(1) 1.最终效果 2.创建元素 3. 重置浏览器样式,

    前言一

    按钮在前端开发中往往是一个必不可少的元素,也有许多精美好看的样式资源供开发者直接使用。但博主认为,对于初学者而言,总是去cv别人做好的,而不理解其中的原理,是很不好的。
    本人作为一名计科的学生,在大二也选修了校内的前端基础教程的课,但由于课时较短,老师往往不会深入讲解,许多问题无法深究。
    本篇文章将会详细讲解xia五种简单的按钮样式,虽然简单,但作为基础,也很实用,且有着大学问。

    请添加图片描述

    文章目录

    展开全文
  • 现如今前端网页的开发越来越注重设计感,这些设计感更体现在细节处,今天向大家具体介绍一下各式各样的开关按钮是如何使用HTML5+css3制作出来的,希望可以帮到大家。使用HTML5+css3制作按钮开关的原理根据设计的要求...

    现如今前端网页的开发越来越注重设计感,这些设计感更体现在细节处,今天向大家具体介绍一下各式各样的开关按钮是如何使用HTML5+css3制作出来的,希望可以帮到大家。

    使用HTML5+css3制作按钮开关的原理根据设计的要求填充各种颜色。

    按钮开关的形状需要具体问题具体分析,如圆形按钮开关需要用到border-radius语句,方形可以直接使用div设置等。

    鼠标悬停的时候光标样式的转换也是注重设计感的体现,这里我们着重介绍一下cursor的用法:

    cursor 属性规定要显示的光标的类型,该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状,根据W3C标准,现在市面上的几乎所有浏览器都兼容cursor属性,所以不要担心与浏览器的兼容问题。

    cursor属性的用法如下表所示

    本文所示12种按钮开关样式分别为:div按钮,默认按钮,链接按钮,圆角按钮,输入框按钮,悬停变色按钮,阴影按钮,悬停出现按钮,禁用按钮,箭头标记按钮,波纹按钮和按压效果按钮。

    使用HTML5+css3制作按钮开关的代码

    各式各样的按钮

    *{

    margin: 0;

    padding: 0;

    }

    .wrap{

    width: 600px;

    height: 400px;

    margin: 0 auto;

    /*background: pink;*/

    padding: 30px 50px;

    }

    /*div按钮*/

    .button5{

    width: 100px;

    height: 30px;

    float: left;

    /*position: absolute;*/

    text-align: center;

    padding-top: 10px;

    margin:0px 10px ;

    background: greenyellow;

    border: 1px solid plum;

    cursor: pointer;

    border-radius: 50%;

    }

    /*链接按钮*/

    .button2{

    background: gold;

    border: 1px solid greenyellow;

    text-decoration: none;

    display: inline-block;

    padding: 10px 22px;

    border-radius: 20px;

    /*cursor: pointer;靠近按钮的一只手*/

    }

    /*按钮*/

    .button3{

    background: pink;

    border: 1px solid blueviolet;

    padding: 10px 28px;

    cursor: pointer;

    color: yellow;

    border-radius: 40%;

    }

    /*输入框按钮*/

    .button4{

    background: cornflowerblue;

    border: 3px solid yellow;

    padding: 10px 20px;

    border-radius: 20%;

    outline-style: none;/*去除点击时外部框线*/

    }

    /*悬停变色按钮*/

    .button6{

    background: plum;

    color: greenyellow;

    border: 1px solid dodgerblue;

    transition-duration: 1s;/*过渡时间*/

    border-radius: 12px;

    padding: 13px 18px;

    margin-top: 20px;

    outline-style: none;/*去除点击时外部框线*/

    }

    .button6:hover{

    background: yellow;

    color: magenta;

    transition-duration: 1s;

    }

    /*阴影按钮*/

    .button7{

    /*display: inline-block;*/

    border: none;

    background: lime;

    padding: 13px 18px;

    margin-top: 20px;

    /*outline-style: none;!*去除点击时外部框线*!*/

    /*-webkit-transition-duration: 0.6s;*/

    transition-duration: 0.6s;

    /*设置按钮阴影*/

    box-shadow: 0 8px 16px 0 rgba(0,255,0,0.2),0 6px 20px 0 rgba(0,0,255,0.1);

    }

    /*悬停出现阴影按钮*/

    .button8{

    border: none;

    background: dodgerblue;

    padding: 13px 18px;

    margin-top: 20px;

    transition-duration: 0.6s;

    }

    .button8:hover{

    box-shadow: 0 12px 16px 0 rgba(0,255,0,0.24),0 17px 50px 0 rgba(0,0,255,0.19);

    }

    /*禁用按钮*/

    .button9{

    border: none;

    background: green;

    padding: 13px 18px;

    margin-top: 20px;

    opacity: 0.6;/*设置按钮的透明度*/

    cursor: not-allowed;/*设置按钮为禁用状态*/

    }

    /*箭头标记按钮*/

    .button10{

    display: inline-block;

    border: none;

    background: red;

    color: white;

    padding: 20px;

    text-align: center;

    border-radius: 4px;

    width: 180px;

    font-size: 16px;/*可以通过字体控制button大小*/

    transition: all 0.5s;

    margin: 5px;

    cursor: pointer;

    }

    .button10 span{

    cursor: pointer;

    display: inline-block;

    position: relative;

    transition: 0.5s;

    }

    .button10 span:after{

    content: '»';

    color: white;

    position: absolute;

    opacity: 0;/*先设置透明度为0,即不可见*/

    right:-20px;/*新增箭头出来的方向*/

    transition: 0.5s;

    }

    .button10:hover span{

    padding-right: 15px;/*新增箭头与前面文字的距离*/

    }

    .button10:hover span:after{

    opacity: 1;/*设置透明度为1,即可见状态*/

    right: 0;

    }

    /*点击出现波纹效果按钮*/

    .button11{

    position: relative;/*必须添上这一句,否则波纹布满整个页面*/

    background: dodgerblue;

    border: none;

    color: white;

    width: 180px;

    font-size: 16px;/*可以通过字体控制button大小*/

    padding: 20px;

    border-radius: 12px;

    transition-duration: 0.4s;

    overflow: hidden;

    outline-style: none;/*去除点击时外部框线*/

    }

    .button11:after{

    content:"";

    background: aquamarine;

    opacity: 0;

    display: block;

    position: absolute;

    padding-top: 300%;

    padding-left: 350%;

    margin-left: -20px!important;

    margin-top: -120%;

    transition: all 0.5s;

    }

    .button11:active:after{

    padding: 0;

    margin: 0;

    opacity: 1;

    transition: 0.1s;

    }

    /*点击出现按压效果*/

    .button12{

    outline-style: none;/*去除点击时外部框线*/

    padding: 20px;

    color: white;

    background: yellow;

    border: none;

    border-radius: 12px;

    box-shadow: 0px 9px 0px rgba(144,144,144,1),0px 9px 25px rgba(0,0,0,.7);

    }

    .button12:hover{

    background: gold;

    }

    .button12:active{

    background: gold;

    box-shadow: 0 5px #666;

    transform: translateY(4px);

    transition-duration: 0s;/*过渡效果持续时间*/

    }

    5div按钮

    1默认按钮

    2链接按钮

    3按钮

    6悬停变色按钮

    7阴影按钮

    8悬停出现阴影

    9禁用按钮

    10箭头标记按钮

    11波纹click

    12按压效果click

    按钮开关样式如图所示

    展开全文
  • 前端库——按钮前言知识点1.流布局2.线性渐变3....所有按钮均使用html+css实现,其实做一个网站这些小细节确实是很重要的,所以我整理了一下我常用的一些按钮样式,当然配色大家自由发挥,按照风格来
  • 一个漂亮的前端弹窗,包含关闭按钮样式清晰好看,可关闭弹窗
  • Web前端自定义input按钮样式

    千次阅读 2020-05-24 17:17:39
    Web前端自定义input按钮样式 在html中一般我们定义一个< input type=“raddio” > 是自带样式的 但是我们有些时候会需要更改他的样式 一般我们会采用使用一个伪元素选择器,在::before,在label前插入一个新...
  • 18种html5图片分页导航按钮样式动画特效
  • 6种Web前端多彩的按钮(一)
  • 1、CSS3超酷3D弹性按钮 按钮实现非常简单之前我们分享过几款不错的CSS3 3D立体按钮,比如5组可爱CSS3按钮、CSS3灰色按钮菜单 超具3D立体感等。今天我又要向大家分享一款实现超级简单的CSS3 3D弹性按钮,它在鼠标按下...
  • 前端:layuiAdmin 后端:netcore3.1 可垮平台部署 数据库:sqlserver 数据框架:dapper 缓存:Redis 支持多数据库,db,mysql,mssql; 采用领域驱动设计模型方式设计,精确控制到按钮层级,登录采用jwt验证。可...
  • 36种漂亮的网页Button按钮样式
  • 按钮样式动态切换js

    2022-04-12 17:11:53
    按钮样式动态切换js
  • 纯css3,不支持ie8以下浏览器
  • ruoyi 更改前端样式

    千次阅读 2021-12-13 00:26:57
    1.复古按钮 (1)CSS .btn-dqn { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-...
  • css怎么设置按钮样式

    千次阅读 2021-06-11 01:13:51
    css设置按钮样式的方法:定义一个css选择器,然后在按钮标签中使用此选择器即可设置按钮样式。使用:hover伪类选择器可以设置按钮交互时样式。button样式需要注意的有几点:1、建议有一个最小宽度,以免在文字很少时...
  • 几款不错的按钮样式汇总

    千次阅读 2021-06-18 03:50:49
    几款不错的按钮样式汇总在网页设计中按钮一般默认的都比较“丑”,能不能通过一些好的`样式来设计呢,下面提供几款不错的按钮样式,希望对大家有所帮助。一、带图标的按钮·按钮样式截图·按钮样式代码如下:/* CSS ...
  • 前端自定义按钮

    2020-12-15 16:36:18
    自定义按钮 HTML <div id='app'> <div class='button'> <div id='aqi' class='btn1 onClick' name='aqi' @click='EventChange'>AQI</div> <div id='pm25' class='btn2' name=...
  • jQuery前端UI框架表单样式代码是一款表单集合可拆开使用样式可以自定义参数灵活特效。
  • a标签按钮样式

    2021-06-16 13:28:20
    5、Semantic-UI之基础按钮样式 5.1 基础按钮样式   在Semantic-UI中定义了很多的按钮样式,可以通过class="ui button"来指定,也可以在class中指定颜色. 示例:定义基础按钮样式 ... 「HTML+CSS」--自定义按钮样式...
  • 解决百度WebUploader照片上传插件中多按钮上传问题。获取任何一个上传按钮事件并经行分类处理,file文件图片上传样式美化,支持IE9+等浏览器上传图片
  • 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 ...
  • 几款按钮样式

    千次阅读 2017-07-13 15:50:26
    如今我们的网站、页面更加需要注重细节,...如果有时间的时候,老左也会浏览和阅读相关的前端网站和积累一些不错的前端资源,在"8款设计师常用漂亮的HTML CSS表格样式"中展示了几款不错的价格列表,在这篇文章中
  • 前端Loading样式

    2018-09-06 10:56:05
    web开发 常用CSS样式 感觉不错,可以看看 loading.... 的效果
  • .btn-switch {cursor: pointer;width: 52px;height: 31px;position: relative;border: 1px solid #dfdfdf;background-color: #fdfdfd;box-shadow: #dfdfdf 0 0 0 0 inset;border-radius: 20px;background-clip: cont...
  • 几个实用又好看的纯css 按钮样式

    千次阅读 2021-08-04 08:58:11
    几个实用又好看的纯css 按钮样式 1.带波纹效果的按钮 html部分: <button class="niceButton2">click</button> css部分: .niceButton2{ position: relative; background-color: rgb(32, 93, 224); ...
  • 个人整理和编写的前端样式 比如:多个按钮的移入移出点击的三种变换样式、网络自定义按钮样式、网络JQuery弹出提示框定时自动消失
  • 前端按钮靠右

    千次阅读 2019-12-03 09:31:38
    < button style=“float:right” class=“layui-btn” lay-submit="" lay-filter=“febs-form-group-submit”>立即提交< /button>...靠右样式 style=“float:right” 真的很有效呀 ...
  • jQuery单选多选按钮样式美化代码.zip

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 77,195
精华内容 30,878
关键字:

前端按钮样式