css3 下边框缓缓划过_一篇文章带你了解CSS3按钮知识
在实际开发中,按钮的应用是必不可少。使用 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;
}
1. 按钮颜色
颜色:Green ,Blue, Red, Gray ,Black。
可以使用 background-color 属性来设置按钮颜色。
例
.button1 {background-color: #4CAF50;}/* Green */.button2 {background-color: #008CBA;}/* Blue */.button3 {background-color: #f44336;}/* Red */.button4 {background-color: #FFC0CB;color: black;}/* Gray */.button5 {background-color: #555555;}
2. 按钮大小
尺寸10px ,12px ,16px 20px , 24px。
可以使用 font-size 属性来设置按钮大小:
例 :
.button1 {font-size: 10px;}.button2 {font-size: 12px;}.button3 {font-size: 16px;}.button4 {font-size: 20px;}.button5 {font-size: 24px;}
3. 圆角按钮
弧度:2px ,4px ,8px ,12px ,50%。
可以使用 border-radius 属性来设置圆角按钮:
例:
.button1 {border-radius: 2px;}.button2 {border-radius: 4px;}.button3 {border-radius: 8px;}.button4 {border-radius: 12px;}.button5 {border-radius: 50%;}
二、边框样式CSS按钮
边框样式按钮与平面按钮属于同一类。唯一的区别是,将使用边框来代替平面按钮所使用的背景颜色。以下代码是按钮处于正常的情况下的状态。
1. 按钮边框颜色
绿 蓝 红 灰 黑
可以使用 border 属性设置按钮边框颜色:
例:
.button1 {background-color: white;color: black;border: 2px solid #4CAF50; /* Green */
}
2. 鼠标悬停按钮
可以使用 :hover 选择器来修改鼠标悬停在按钮上的样式。
提示: 可以使用 transition-duration 属性来设置 "hover" 效果的速度:
例:
.button {-webkit-transition-duration: 0.4s; /* Safari */transition-duration: 0.4s;
}.button:hover {background-color: #4CAF50; /* Green */color: white;
}
鼠标放在对应的色块上,显示相对应的颜色。
3. 按钮阴影
阴影按钮 鼠标悬停后显示阴影。
使用 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);
}
4. 按钮宽度
宽度:250px,50% ,100%
默认情况下,按钮的大小有按钮上的文本内容决定( 根据文本内容匹配长度 )。可以使用 width 属性来设置按钮的宽度:
提示: 如果要设置固定宽度可以使用像素 (px) 为单位,如果要设置响应式的按钮可以设置为百分比。
CSS 实例
.button1 {width: 250px;
}
.button2 {width: 50%;
}
.button3 {width: 100%;
}
三、按钮组
1. 移除外边距并添加 float:left 来设置按钮组:
CSS 实例
.button {float: left;
}
2. 带边框按钮组
可以使用 border 属性来设置带边框的按钮组:
CSS 实例
.button {float: left;border: 1px solid green
}
四、按钮动画
1. 按样式CSS按钮
这些“按下”式按钮结合了一些平面设计和假象,让用户感觉他们实际上按下了按钮。当用户按下它时,它似乎陷入了页面。它的实现需要用到阴影来设置,使其具有3D弹出外观。以下代码是按钮处于正常的情况下的状态。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>编程字典</title><style>
.pm button {width: 200px;height: 100px;color: #fff;background-color: #6496c8;border: none;border-radius: 15px;box-shadow: 0 10px #27496d;
}
</style>
</head>
<body><div class="pm"> <button class="button">Click Me</button></div>
</body>
</html>
五、总结
本文基于Html基础,主要介绍了Html中按钮组件的使用,对于按钮中需要用到的做了详细的讲解,用丰富的案例 ,多种样式展示,帮助大家去更好的理解 。
最后,希望可以帮助大家更好的学习CSS3。
想学习更多Python网络爬虫的知识,请前往小编的专业网站:http://pdcfighting.com/ 想学习更多Python网络爬虫与数据挖掘知识,可前往专业网站:http://pdcfighting.com/
css3 下边框缓缓划过_一篇文章带你了解CSS3按钮知识相关推荐
- css3 下边框缓缓划过_干货来袭!web前端开发工程师必看之如何使用CSS3实现瀑布流效果?...
首先,我们来看一下什么是瀑布流布局效果,比如电商网站 蘑菇街 原理图: 在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果. 使用CSS3S实现只需要如下4步: ...
- css 科技 边框_一篇文章带你学习CSS3图片边框
这篇文章我们来讲一下在网站建设中,一篇文章带你学习CSS3图片边框.本文对大家进行网站开发设计工作或者学习都有一定帮助,下面让我们进入正文. 使用CSS3 border-image 属性,你可以在元素 ...
- button按钮样式_一篇文章带你了解CSS3按钮知识
在实际开发中,按钮的应用是必不可少.使用 CSS 来制作按钮,可以更有新意,更有趣,也可以自定义自己想要的样式. 一.平面样式CSS按钮 平面样式按钮的使用现在非常流行,并且符合无处不在的平面设计趋势 ...
- css3 下边框缓缓划过_CSS3 框大小
CSS3 box-sizing 属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框). 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版 ...
- java 不重启部署_一篇文章带你搞定SpringBoot不重启项目实现修改静态资源
一.通过配置文件控制静态资源的热部署 在配置文件 application.properties 中添加: #表示从这个默认不触发重启的目录中除去static目录 spring.devtools.res ...
- java ee 值范围_一篇文章带你读懂: Java EE
原标题:一篇文章带你读懂: Java EE 点击上图,查看教学大纲 何为 Java EE Java EE是一个标准中间件体系结构 不要被名称"Java PlatformEnterprise ...
- python人脸识别防小偷_一篇文章带你了解Python 人脸识别有多简单
今天的Python学习教程给大家介绍一个世界上最简练的人脸辨认库 face_recognition,你可以应用 Python 和命令行工具进行提取.辨认.操作人脸. 基于业内领先的 C++ 开源库 d ...
- python人脸识别实验报告总结_一篇文章带你了解Python 人脸识别有多简单
原标题:一篇文章带你了解Python 人脸识别有多简单 今天的Python学习教程给大家介绍一个世界上最简洁的人脸识别库 face_recognition,你可以使用 Python 和命令行工具进行提 ...
- 了解mysql文章_一篇文章带你深入了解MySQL 索引相关
基础知识 一张数据表中具有百万级的数据时,如何精确且快速的拿出其中某一条或多条记录成为了人们思考的问题. InnoDB 存储引擎的出现让这个问题得到了很好的解决, InnoDB 存储引擎是以索引来进行 ...
最新文章
- 墨瞳漫画h5一期 vuejs总结
- bluez 设置绑定pin码_国家工信部重要提醒:一定要设置这个密码!
- python简单爬虫课题_VS2019python爬虫入门
- win11能否安装cad Windows11安装cad的解决方法
- JSON对象中的函数调用,JSON格式的字符串对应的函数调用方法
- C语言实现加密解密功能 附带详细注释源码
- swagger 返回json字符串_[Swagger] Swagger Codegen 高效开发客户端对接服务端代码
- python-判断一个字符串是目录还是文件及批处理方法
- 10 个超棒的 jQuery 视频插件
- unity相机自由移动
- 论文笔记之Efficient Estimation of Word Representations in Vector Space
- 数据防泄密·工控安全保障方案
- win10 1073linux密码,Linux Bash on Win10 忘记密码解决
- 转:衡量数据的离散程度
- 【笔记】《Federated Learning With Blockchain for Autonomous Vehicles Analysis and Design Challenges》精读笔记
- 区块链读书笔记01-区块链基础
- 自动驾驶层次测试体系(单元测试/集成测试/SIL/HIL/VIL/RIL/LABCAR/实车等)
- java memorystream 包_C#使用MemoryStream类读写内存
- OracleERP表结构--PO模块(1)
- Jabra E85t蓝牙耳机同时连接2部手机
热门文章
- 一些Cloud for Customer的客户需求
- how to find all element type with type table of content
- 当SAP云平台account的service Marke place里找不到Machine Learning服务该怎么办
- 决定equipment download到CRM后是否执行save的因素
- Backbone - create model
- 如何提高后台服务应用问题的排查效率?日志 VS 远程调试
- 一些通过SAP ABAP代码审查得出的ABAP编程代码优化建议
- SAP C4C Opportunity和SAP ERP Sales流程的集成
- OpenFOAM程序开发的基本知识(基本术语)
- 丹东御空服务器维修,【正式服】3月14日例行更新维护公告