php按钮css样式,CSS 按钮

CSS 按钮

本章节我们为大家介绍使用 CSS 来制作按钮。

我们先看一下默认按钮和用css制作的按钮html>

php中文网(php.cn)

.button {

background-color: #4CAF50;

border: none;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

cursor: pointer;

}

CSS 按钮

默认按钮

链接按钮

按钮

运行程序看一下

按钮颜色

我们可以使用 background-color 属性来设置按钮颜色:

实例html>

php中文网(php.cn)

.button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

cursor: pointer;

}

.button2 {background-color: #008CBA;} /* Blue */

.button3 {background-color: #f44336;} /* Red */

.button4 {background-color: #e7e7e7; color: black;} /* Gray */

.button5 {background-color: #555555;} /* Black */

按钮颜色

我们可以使用 background-color 属性来设置按钮颜色:

Green

Blue

Red

Gray

Black

运行程序看一下

按钮大小

我们可以使用 font-size 属性来设置按钮大小:

实例html>

php中文网(php.cn)

.button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

cursor: pointer;

}

.button1 {font-size: 10px;}

.button2 {font-size: 12px;}

.button3 {font-size: 16px;}

.button4 {font-size: 20px;}

.button5 {font-size: 24px;}

按钮大小

我们可以使用 font-size 属性来设置按钮大小:

10px

12px

16px

20px

24px

运行程序看一下

圆角按钮

我们可以使用 border-radius 属性来设置圆角按钮:html>

php中文网(php.cn)

.button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

cursor: pointer;

}

.button1 {border-radius: 2px;}

.button2 {border-radius: 4px;}

.button3 {border-radius: 8px;}

.button4 {border-radius: 12px;}

.button5 {border-radius: 50%;}

圆角按钮

我们可以使用 border-radius 属性来设置圆角按钮:

2px

4px

8px

12px

50%

运行程序看一下

按钮边框颜色

我们可以使用 border 属性设置按钮边框颜色:html>

php中文网(php.cn)

.button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

cursor: pointer;

}

.button1 {

background-color: white;

color: black;

border: 2px solid #4CAF50;

}

.button2 {

background-color: white;

color: black;

border: 2px solid #008CBA;

}

.button3 {

background-color: white;

color: black;

border: 2px solid #f44336;

}

.button4 {

background-color: white;

color: black;

border: 2px solid #e7e7e7;

}

.button5 {

background-color: white;

color: black;

border: 2px solid #555555;

}

按钮边框颜色

我们可以使用 border 属性设置按钮边框颜色:

Green

Blue

Red

Gray

Black

运行程序看一下

鼠标悬停按钮

我们可以使用 :hover 选择器来修改鼠标悬停在按钮上的样式。

提示: 我们可以使用 transition-duration 属性来设置 "hover" 效果的速度:html>

php中文网(php.cn)

.button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 16px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

-webkit-transition-duration: 0.4s; /* Safari */

transition-duration: 0.4s;

cursor: pointer;

}

.button1 {

background-color: white;

color: black;

border: 2px solid #4CAF50;

}

.button1:hover {

background-color: #4CAF50;

color: white;

}

.button2 {

background-color: white;

color: black;

border: 2px solid #008CBA;

}

.button2:hover {

background-color: #008CBA;

color: white;

}

.button3 {

background-color: white;

color: black;

border: 2px solid #f44336;

}

.button3:hover {

background-color: #f44336;

color: white;

}

.button4 {

background-color: white;

color: black;

border: 2px solid #e7e7e7;

}

.button4:hover {background-color: #e7e7e7;}

.button5 {

background-color: white;

color: black;

border: 2px solid #555555;

}

.button5:hover {

background-color: #555555;

color: white;

}

鼠标悬停按钮

Green

Blue

Red

Gray

Black

运行程序看一下

按钮阴影

阴影按钮 鼠标悬停后显示阴影

我们可以使用 box-shadow 属性来为按钮添加阴影:html>

php中文网(php.cn)

.button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

cursor: pointer;

-webkit-transition-duration: 0.4s; /* Safari */

transition-duration: 0.4s;

}

.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);

}

按钮阴影

阴影按钮

鼠标悬停后出现阴影

运行程序看一下

禁用按钮

我们可以使用 opacity 属性为按钮添加透明度 (看起来类似 "disabled" 属性效果)。

提示: 我么可以添加 cursor 属性并设置为 "not-allowed" 来设置一个禁用的图片:html>

php中文网(php.cn)

.button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

cursor: pointer;

}

.disabled {

opacity: 0.6;

cursor: not-allowed;

}

禁用按钮

正常按钮

禁用按钮

运行程序看一下

按钮宽度

默认情况下，按钮的大小有按钮上的文本内容决定( 根据文本内容匹配长度 )。 我们可以使用 width 属性来设置按钮的宽度:

提示: 如果要设置固定宽度可以使用像素 (px) 为单位，如果要设置响应式的按钮可以设置为百分比。html>

php中文网(php.cn)

.button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

cursor: pointer;

}

.button1 {width: 250px;}

.button2 {width: 50%;}

.button3 {

padding-left: 0;

padding-right: 0;

width: 100%;

}

按钮宽度

250px

50%

100%

运行程序看一下

按钮组

移除外边距并添加 float:left 来设置按钮组:html>

php中文网(php.cn)

.button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

cursor: pointer;

float: left;

}

.button:hover {

background-color: #3e8e41;

}

按钮组

移除外边距并添加 float:left 来设置按钮组:

Button

Button

Button

Button


记住要清除浮动，否则下一个 p 元素的按钮也会显示在同一行。

运行程序看一下

带边框按钮组

我们可以使用 border 属性来设置带边框的按钮组:html>

php中文网(php.cn)

.button {

background-color: #4CAF50; /* Green */

border: 1px solid green;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

cursor: pointer;

float: left;

}

.button:hover {

background-color: #3e8e41;

}

带边框按钮组

Add borders to create a bordered button group:

Button

Button

Button

Button


记住要清除浮动，否则下一个 p 元素的按钮也会显示在同一行。

运行程序看一下

按钮动画

鼠标移动到按钮上后添加箭头标记:html>

php中文网(php.cn)

.button {

display: inline-block;

border-radius: 4px;

background-color: #f4511e;

border: none;

color: #FFFFFF;

text-align: center;

font-size: 28px;

padding: 20px;

width: 200px;

transition: all 0.5s;

cursor: pointer;

margin: 5px;

}

.button span {

cursor: pointer;

display: inline-block;

position: relative;

transition: 0.5s;

}

.button span:after {

content: '»';

position: absolute;

opacity: 0;

top: 0;

right: -20px;

transition: 0.5s;

}

.button:hover span {

padding-right: 25px;

}

.button:hover span:after {

opacity: 1;

right: 0;

}

按钮动画

Hover 

运行程序看一下

点击时添加 "波纹" 效果:html>

php中文网(php.cn)

.button {

position: relative;

background-color: #4CAF50;

border: none;

font-size: 28px;

color: #FFFFFF;

padding: 20px;

width: 200px;

text-align: center;

-webkit-transition-duration: 0.4s; /* Safari */

transition-duration: 0.4s;

text-decoration: none;

overflow: hidden;

cursor: pointer;

}

.button:after {

content: "";

background: #90EE90;

display: block;

position: absolute;

padding-top: 300%;

padding-left: 350%;

margin-left: -20px!important;

margin-top: -120%;

opacity: 0;

transition: all 0.8s

}

.button:active:after {

padding: 0;

margin: 0;

opacity: 1;

transition: 0s

}

按钮动画 - 波纹效果

Click Me

运行程序看一下

点击时添加 "压下" 效果:html>

php中文网(php.cn)

.button {

display: inline-block;

padding: 15px 25px;

font-size: 24px;

cursor: pointer;

text-align: center;

text-decoration: none;

outline: none;

color: #fff;

background-color: #4CAF50;

border: none;

border-radius: 15px;

box-shadow: 0 9px #999;

}

.button:hover {background-color: #3e8e41}

.button:active {

background-color: #3e8e41;

box-shadow: 0 5px #666;

transform: translateY(4px);

}

按钮动画 - "按压效果"

Click Me

运行程序看一下

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

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

相关文章

电脑网络维护_电脑维护小技巧（全面）

电脑网络维护_电脑维护小技巧（全面）

如果你真的想了解，请耐心看完，都是干货电脑使用维护小技巧1、电脑为何莫名奇妙多了那么多软件呢？ 有的人在使用电脑时候会经常发现，电脑无缘无故会冒出很多不知道的软件，“没见过、不是我下载的、卸载不掉”&#xff0…
阅读更多...
自动装箱自动拆箱java,自动装箱？拆箱？==问题？详解java面试常见的一个问题...

自动装箱自动拆箱java,自动装箱？拆箱？==问题？详解java面试常见的一个问题...

1：前言相信大家都在面试中都被问到过一个问题，这个问题也是近年来面试官刁难人比较常见的一个问题，所以也被大家所熟知了，本质上也很简单，但是也是非常基础的一个题目。Integer a 100;Integer b 100;System.out.prin…
阅读更多...
javafx 加载_JavaFX 2：如何加载图像

javafx 加载_JavaFX 2：如何加载图像

javafx 加载这是有关如何在JavaFX 2应用程序中加载图像的JavaFX教程。 使用ImageView可以轻松完成此操作。 ImageView是一个节点，用于绘制加载有Image类的图像。 因此，您将首先使用Image类加载图像，然后使用ImageView显示它。 我还将在这里演…
阅读更多...
Juniper 210 密码清不掉_工程人不会看图纸？210页建筑识图详细教程，把你教得明明白白...

Juniper 210 密码清不掉_工程人不会看图纸？210页建筑识图详细教程，把你教得明明白白...

工程人不会看图纸？210页高清建筑识图详细教程，把你教得明明白白身为工程人，看不懂图纸有多可怕？可以说，举步维艰，寸步难行！将复杂的图纸最简单化，这是我们工程人学会建筑识图的目的和…
阅读更多...
couchbase_使用Couchbase分页

couchbase_使用Couchbase分页

couchbase如果在对Couchbase集群进行查询时必须处理大量文档，则使用分页来逐页获取行很重要。 您可以在“ 分页 ”一章的文档中找到一些信息，但是我想在本文中详细介绍示例代码。 在此示例中，我将基于啤酒样本数据集创建一个简单的视图&…
阅读更多...
Network下方什么请求也没有_今日头条上传图片时设置封面图报像素低的原因是什么...

Network下方什么请求也没有_今日头条上传图片时设置封面图报像素低的原因是什么...

今日头条发表原创图文时，在设置文章封面三张图时，有时候会遇到错误信息“部分图片实际像素低于172*120, 不支持设置为封面”。然而我上传的每张图片都是大小超过4MB的高清晰图片，怎么可能像素低于172 * 120? 因为我是个程序猿，所…
阅读更多...
php提前用户系统时间限制,php date()比服务器时间提前一小时(DST问题)

php提前用户系统时间限制,php date()比服务器时间提前一小时(DST问题)

我正在尝试排除故障并解决此问题:我正在使用的服务器(Linux上的PHP5.2.9)具有正确的本地时间(美洲/布宜诺斯艾利斯):userserver [/home/site/public_html]$ dateMon Nov 1 17:11:14 ART 2010php.ini设置为date.timezone "America/Buenos_Aires"ini_set(display_erro…
阅读更多...
单缝衍射matlab,MATLAB模拟光的单缝衍射

单缝衍射matlab,MATLAB模拟光的单缝衍射

我使用32位R2012a版，32位windows 7系统模拟此程序时第一句出现错误，不知道是什么原因。第一次学习使用MATLAB，希望老师们能帮助，谢谢您们。function Varargoutmygui_1002(varargin)gui_Singleton1;gui_Statestruct(gui Name, mf…
阅读更多...
认识适配器：JSON绑定概述系列

认识适配器：JSON绑定概述系列

适配器通过实现JsonbAdapter接口来配置自定义对象的创建和序列化。 方法AdaptToJson（）和AdaptFromJson（）被执行序列化和反序列化操作的逻辑覆盖。 下一篇文章介绍了使用自定义序列化器和反序列化器自定义JSON-B的最高级方法。 在…
阅读更多...
微软新浏览器_要超越Chrome？微软新发布的这款浏览器，有翻天覆地的变化！

微软新浏览器_要超越Chrome？微软新发布的这款浏览器，有翻天覆地的变化！

可爱的分割线系统迷还记得，当年Edge浏览器刚发布的时候，真的是备受期待。可惜的是，由于其糟糕的体验，以及不完善的插件，最终让它变成了第二个IE。可能是出于无奈，微软选择放弃自家渲染引擎，改用…
阅读更多...
centos mount 用法_linux screen的用法 - mouseleo

centos mount 用法_linux screen的用法 - mouseleo

12016.04.02 17:34:56字数 1,019阅读 26,104大家在初次接触linuxVPS时，会发现linux操作和windows操作太不相同的，windows都是图形操作界面，而linux一般是命令行操作，当然，linux也有图形操作界面，但是我们在…
阅读更多...
php memcache 封装类,php 封装memcache类

php memcache 封装类,php 封装memcache类

/** memcache类*/class Memcacheds{//声明静态成员变量private static $m null;private static $cache null;private function __construct() {self::$m new Memcache();self::$m->connect(www.cat.com,11211); //写入缓存地址,端口}//为当前类创建对象private static fu…
阅读更多...
jedis入门_Jedis入门

jedis入门_Jedis入门

jedis入门嗨，这些天我开始研究Redis。 我听说过很多，所以我决定尝试一下。 Redis在其网站上定义为“ 开源高级键值存储”。 它通常被称为数据结构服务器，因为键可以包含字符串，哈希，列表，集合和排序集合 。…
阅读更多...
电脑动态壁纸_每日壁纸—水彩插画少女动漫手机高清无水印壁纸第二波

电脑动态壁纸_每日壁纸—水彩插画少女动漫手机高清无水印壁纸第二波

- End -猜你喜欢：看新闻竟然可以赚钱？？？朋友圈千万别设置三天可见！哈哈哈~圣诞节，你收到过的奇葩礼物是什么？教你玩赚支付宝红包攻略，如何领大额红包！！&#…
阅读更多...
php赋值 jq,使用js和jQuery如何实现指定赋值方法

php赋值 jq,使用js和jQuery如何实现指定赋值方法

下面我就为大家分享一篇js和jQuery以及easyui实现对下拉框的指定赋值方法，具有很好的参考价值，希望对大家有所帮助。js实现：1. 通过让第i个option为selected实现选中第i个，代码如下：(id为下拉框id)(1) document.getEle…
阅读更多...
混合云的承诺，收益和产品

混合云的承诺，收益和产品

云承诺将为我们提供所有灵活性。 有机会在需要时访问无限资源并相应地付款。 我们将不再需要花费时间安装，配置和维护服务器。 我们被承诺将有更多的时间来“仅仅编码”。 取而代之的是，我们越来越多地锁定供应商，而少数云服务商如此之大&am…
阅读更多...
c语言汉字属于什么类型_狠准！你的名字属于什么类型 就是什么性格

c语言汉字属于什么类型_狠准！你的名字属于什么类型 就是什么性格

1.用简体中文写出自己的名字(不包括姓氏),再写出每个字的笔画。2.算出字的总笔画,然后对照下面的表找出对应的。 如:杰伦 8划6划14划阳型(1、10、19、28、37、46、55、64)水型(2、11、20、29、38、47、56、65)空型(3、12、21、30、39、48、57、66)木型(4、13、22、31、40、49、…
阅读更多...
javascript里用php,php中使用javascript - 程序园

javascript里用php,php中使用javascript - 程序园

方法一: 先用PHP生成js代码，然后通过浏览器的自动刷新，将javascript变量传递到PHP脚本中。注意：在实际应用中要防止用户在地址栏内更改传递的变量值。if($qq) echo $qq.;else echo "";echo $qq;?>方法二：先用docume…
阅读更多...
java架构师_成为一名Java高级架构师究竟要学哪些东西？？

java架构师_成为一名Java高级架构师究竟要学哪些东西？？

Java架构师，应该算是一些Java程序员们的一个职业目标了吧。很多码农码了五六年的代码也没能成为架构师。那成为Java架构师要掌握哪些技术呢，总体来说呢，有两方面，一个是基础技术，另一个就是组织能力和提出解决方案能力…
阅读更多...
php53 php55区别,详解 PHP 中的三大经典模式

php53 php55区别,详解 PHP 中的三大经典模式

原文：https://www.cnblogs.com/heyue0117/p/11869676.html单例模式单例模式的含义:作为对象的创建模式，单例模式确保某一个类只有一个实例，而且自行实例化并向整个系统全局地提供这个实例。它不会创建实例副本，而是会向单例类内部…
阅读更多...
最新文章

Copyright @ 2022~2023