html5按钮样式具有子项目,如何使用HTML5+css3制作出12种常用的按钮开关样式(附完整代码)...

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

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

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

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

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

cursor属性的用法如下表所示

f355778b6b85d0c7e5664cc0013f4ab7.png

本文所示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

按钮开关样式如图所示

e59034959cf6ddda2791378d4167fcc2.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/349127.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java命令行界面(第17部分):jw-options

JavaWorld文章处理Java中的命令行参数: Matthias Laux博士关闭的案例介绍了一个基于Java的简单库,用于处理命令行参数 ,在本文中我将其称为jw-options 。 被引用的文章提供了有关为何在构造Options类时做出某些设计决策的背景信息。 本文的“…

计算机网络第三章知识网络,计算机基础教案第三章计算机网络基础知识教案

计算机 基础 教案一、网络基础知识1、计算机网络的概念计算机网络是指将分布在不同地理位置的具有独立功能的多台计算机用通信设备连接起来,并配以相应的网络软件,以实现信息传递和资源共享。计算机网络的三个主要组成部分:(1)主机(2)通信网络…

plc secs通讯协议_SECS/GEM解决方案:PLC与MES间的通讯

符合SEMI E4, E5, E30, E37 的 SECS/GEM通讯方案遵循 SEMI 人机交互设计,提供触摸屏支持让你触手可及。毫米级的响应,让设备行云流水般流畅。我们为你快速搭建PLC与MES之间的SECS/GEM桥梁SECS/GEM介绍SECS/GEM定义半导体生产设备与主机之间的通讯关系&am…

计算机程序和系统股票走势分析,证券走势指标匹配分析系统的设计与实现

摘要:随着计算机技术在证券分析领域的广泛应用,利用计算机对股票数据进行分析,已经成为股票走势技术分析方法的必然选择.经过历代伟大的证券分析师不懈的研究,已经总结出多种根据股票历史数据计算出的指标,在证券分析领用运用计算机技术来提高投资收益率已经成为各大…

security放行 spirng_Spring Security配置

第一步,空Spring Boot环境。暂时不添加了Spring Security依赖。第二步,确保项目能够正常运行。启动启动项 Application.javaimport org.springframework.boot.SpringApplication;import org.springframework.boot.autoconfigure.EnableAutoConfiguration…

Cactoos中的面向对象的声明式输入/输出

Cactoos是一个面向对象的Java原语库, 我们几周前才开始使用它。 目的是为JDK,Guava,Apache Commons等提供一种干净且更具声明性的替代方案。 我们不是使用静态过程,而是使用对象的使用方式,而是使用对象。 让我们看看输…

计算机研发部门职责,计算机研发岗位职责

计算机视觉研发员 •负责计算机视觉相关的技术研发工作,包括但不限于:人脸识别、物体检测与分类、静态图像或视频分类与分析、图像质量评价、图像处理等•负责计算机视觉方向前沿问题的研究,结合未来实际应用场景,提供技术解决方案•负责完成相关技术的研究项目申请、学术论文发…

vue中请求接口怎么封装公共地址_vue请求接口的封装

import api from ./api;import request from./request;//获取url上的rest参数,返回参数列表 /{userId}/{roleId} > [userId, roleId]functiongetUrlParams(url) {return (url.match(/\{(\w)\}/g) || []).map(param > /\{(\w)\}/.exec(param)[1]);}/** 创建一个…

java实现迷你计算机,用JAVA写一个迷你编辑器.doc

用JAVA写一个迷你编辑器用JAVA编写一个迷你编辑器WINDOWS的记事本程序是非常方便的一个文字处理工具,用它来编辑纯文本文件快捷而灵巧。我用JAVA写了一个编辑器程序,模仿“记事本”的功能。这不是为了替代记事本,而是因为下列两个目的&#x…

cypress测试脚本_Cypress 自动化测试学习使用

安装mkdir cypress-startnpm install# 进入创建的项目目录cd /your/project/pathcd cypress-startnpm install cypress --save-devyarn addcd /your/project/pathcd cypress-startyarn add cypress --dev打开运行cpress./node_modules/.bin/cypress open或者使用npm bin$(npm b…

hadoop综述_Hadoop书籍赠品–综述

hadoop综述各位极客, Packt Publishing关于Apache Hadoop 的书籍赠品已经结束。 您可以在这里找到比赛的原始帖子。 获奖者 将会获得这本书奖的6位幸运获奖者是(姓名出现在他们的电子邮件中): Hadoop真实世界解决方案食谱 塞…

便捷式计算机无线功能按钮,TP-Link TL-MR13U便携式无线路由器Client模式设置

本文介绍了TP-Link TL-MR13U便携式无线路由器,在“客户端模式(Client)”下的设置方法。TL-MR13U工作在“客户端模式(Client)”时,主要作用是用来接收无线WiFi信号,把无线WiFi信号转换为有线网络,实现让台式电脑上网。TP-Link TL-M…

Java命令行界面(第6部分):JOpt简单

JOpt Simple的主页将这个基于Java的库称为“用于解析命令行选项的Java库,例如您可能传递给调用javac的Java库,”该Java库试图“使用POSIX getopt()的命令行选项语法)和GNU getopt_long() 。” 这…

矩阵相乘的strassen算法_矩阵乘法的Strassen算法+动态规划算法(矩阵链相乘和硬币问题)...

矩阵乘法的Strassen这个算法就是在矩阵乘法中采用分治法,能够有效的提高算法的效率。先来看看咱们在高等代数中学的普通矩阵的乘法两个矩阵相乘上边这种普通求解方法的复杂度为: O(n3)也称之为暴力求解或者朴素求解这是暴力求解的代码,三重循环&#xff…

计算机c盘哪些东西可以清理,细说电脑c盘哪些文件可以删除

有些网友反映,自己看C盘里的文件太多了,电脑又太卡,情急之下就把里面的东西删掉了,现在系统都不能用了。为了避免大家再入这个坑,我给大家讲一下哪些是C盘里的无用文件,并且删除后不会影响系统使用C盘是指电…

springboot 注解动态赋值_SpringBoot 使用 @Value 注解读取配置文件给静态变量赋值

1、application.properties 配置文件CxU免费资源网mail.usernamexue163.commail.passwordxuemail.hostsmtp.163.commail.smtp.authtrue2、给普通变量赋值,直接在变量上添加 Value 注解CxU免费资源网import org.springframework.beans.factory.annotation.Value;publ…

软件测试度量计算方法有哪些,软件测试度量(三)

进度差异趋势6.4.3 范围变化(SC)这个指标指出如何固定测试范围。下面总范围 以前的范围 新范围,如果范围扩大的话总范围 以前的范围 - 新范围,如果范围缩小的话一个发布版本范围变化趋势7、结论度量是评估的重要组成部分以及任何业务改进的基础。是应…

ceph与hdfs的比较_分布式存储中HDFS与Ceph两者的区别是什么,各有什么优势?

过去两年,我的主要工作都在Hadoop这个技术栈中,而最近有幸接触到了Ceph。我觉得这是一件很幸运的事,让我有机会体验另一种大型分布式存储解决方案,可以对比出HDFS与Ceph这两种几乎完全不同的存储系统分别有哪些优缺点、适合哪些场…

使用带有OAuth的Spring Security保护资源

1.简介 在本教程中,我们将研究如何使用Spring Security和OAuth来基于路径模式( / api / ** )保护服务器上的管理资源。 我们配置的另一个路径模式( / oauth / token )将帮助已配置的授权服务器生成访问令牌。 请注意&a…

2080ti服务器支持什么系统,2080ti深度学习性能

AI开发平台ModelArtsModelArts是面向开发者的一站式AI开发平台,为机器学习与深度学习提供海量数据预处理及半自动化标注、大规模分布式Training、自动化模型生成,及端-边-云模型按需部署能力,帮助用户快速创建和部署模型,管理全周…