点此查看 所有教程、项目、源码导航

文章目录

1. 前言
2. 目标分析
3. 外观设计
- 3.1 普通按钮
- 3.2 尺寸仿照
- 3.3 修改颜色与背景色
- 3.4 边框处理
- 3.5 字体大小
4. 效果设计
5. 小结

1. 前言

如下图，通过前面的学习，我们已经基本掌握了CSS常用的知识点。当然，不是全部的知识点都讲解了，其他的知识点大家可以再以后的学习实践过程中，逐步掌握。

从本篇开始，我们会讲解几个CSS的应用实例，让大家更好的把之前所学的知识融会贯通。对于计算机编程这样的应用型学科来说，学以致用是我们的目标，在使用中也更加能强化我们对知识的理解。

本篇，我们就来讲一下使用CSS，做一个好看的按钮。

2. 目标分析

在开始阶段，我们自己也可能也不知道要做一个什么样的按钮，所以我们可以找一个参考目标。我选择了大家都非常熟悉的百度网的搜索按钮，如下图：

该按钮样式简单大气，尺寸适宜，颜色也低调朴实，所以我们决定就仿它了。

3. 外观设计

3.1 普通按钮

首先我们开发一个按钮，并为其设置样式类button-info，后续通过该样式类，对按钮的外观进行设计。

<body><input type="button" value="百度一下" class="button-info">
</body>

此时效果如下，毫无疑问，不如百度那个好看。

3.2 尺寸仿照

在百度网，右键点击按钮，选择检查，可以看到按钮的尺寸。如下图：

当然这是利用了Chrome浏览器的开发者工具，得出该按钮尺寸是108*44。如果不会用开发者工具也没啥，反复尝试修改几次宽度、高度，差不多跟百度按钮一样大就行。

所以此时，我们将按钮尺寸设为：

     .button-info {width: 108px;height: 44px;}

此时效果如下：

3.3 修改颜色与背景色

通过观察，我们发现文字颜色是白色，而背景色是一种蓝色，可以通过取色器(TakeColor等软件)，捕获到该蓝色值为#4569FF，所以我们进一步完善样式类如下：

         .button-info {width: 108px;height: 44px;background-color: #4569FF;color: white;}

此时效果如下：

3.4 边框处理

通过观察百度的按钮，我们发现它应该是没有边框的，且边框有一个圆角弧度，我们可以利用border和border-radius属性来实现。

         .button-info {width: 108px;height: 44px;background-color: #4569FF;color: white;border: none;border-radius: 8px;}

此时效果如下：

3.5 字体大小

再次观察，发现我们这个按钮字体偏小了，我们调大字体，直到跟百度字体字体差不多大。

         .button-info {width: 108px;height: 44px;background-color: #4569FF;color: white;border: none;border-radius: 8px;font-size: 1.05em;}

此时效果如下，已经比较接近百度的效果了。

4. 效果设计

我们还可以利用伪类选择器，为按钮增加一些“动态”的效果。代码如下：

         .button-info:hover {border: 2px solid lightblue;}.button-info:active {border: 2px solid blue;}

上述代码编写后，当按钮悬停时，会出现一个淡蓝色的边框，效果如下：

而当按钮点击时，会出现一个蓝色的边框，效果如下：

大家可以去实际体会下，加了效果设计后，明显感觉更nice了。

5. 小结

本节介绍了如何利用CSS开发一个比较美观的按钮，大家可以参考本节内容，设计更多好看的按钮。

零基础CSS入门教程(26)–CSS按钮实例相关推荐

零基础Bootstrap入门教程(26)–轮播的实现
点此查看所有教程.项目.源码导航本文目录 1. 概述 2. 基本轮播 3. 添加轮播指示器 4. 添加轮播控件 5. 小结 1. 概述要想从头到尾来实现一个比较好看且稳定的轮播控件,还是有一定难 ...
零基础HTML入门教程(23)--HTML综合实例
点此查看所有教程.项目.源码导航本文目录 1. 背景 2. 开发流程 2.1 网站功能设计 2.2 建立网站目录结构 2.3 开发首页 2.2 生平简介页 2.3 经典诗词页 2.4 苏轼图集页 ...
零基础Bootstrap入门教程(0)--教程背景与目录
点此查看所有教程.项目.源码导航本文目录 1. 背景 2. 教程目录 3. 源码下载 1. 背景在学习完成HTML/CSS/JS/jQuery零基础入门教程后,自然而然我们要进入Bootstra ...
零基础SSM入门教程(0)--教程背景与目录
点此查看零基础JavaWeb全栈文章目录及源码下载 1. 背景本教程的出发点是写一个比较条理,比较全面的SSM系列教程,首先造福自己.理顺自己的知识体系,然后也造福大众,因为网上现存的资源相对比较 ...
零基础JavaScript入门教程(1)–走进JavaScript的世界
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. JS的历史 3. JS的地位 4. JS与HTML.CSS的区别 5. JS是真正的编程语言 6. JS的组成部分 7. 小结 1. 前 ...
取得数组下标_《零基础C++入门教程》——（8）搞定二维数组与循环嵌套
一.学习目标了解二维数组的使用方法了解循环嵌套的使用方法目录预备第一篇,使用软件介绍在这一篇,C++与C使用的软件是一样的,查看这篇即可:<零基础看得懂的C语言入门教程>--(二) ...
sql数据库教程百度云_【推荐】零基础水彩画入门教程|零基础水彩教程百度云...
零基础水彩画入门教程|零基础水彩教程百度云! 照着教程画却总是画不好,这些水彩技法你真的学会了吗? 盲目地照着葫芦画瓢,不懂控制确实很难学会,可以关注一下公众号:每日学绘画,可以领取水彩电子书和全套视 ...
【PR】零基础快速入门教程
[PR]零基础快速入门教程 PR(Premiere)能做什么? PR欢迎界面及新建项目工作区及窗口说明导入文件建立序列视频剪辑添加字幕导出视频使用软件:Premiere2020 新年卷起 ...
零基础GitHub入门教程
最近Github很火,暑期的时候也注册了一个账号,可是其实一直没用.主要呢,是不知道那到底干什么用.现在要照着自己的学习记录一个像我这种完全零基础的人的入门教程. 首先,让我们先知道GitHub到底是 ...
大数据零基础如何入门教程
程序员必看大数据教程最全1024G学习资料免费赠送详解,大数据工作者可以施展拳脚的领域非常广泛,从国防部.互联网创业公司到金融机构,到处需要大数据项目来做创新驱动.数据分析或数据处理的岗位报酬也非常丰 ...

零基础CSS入门教程(26)–CSS按钮实例

文章目录

1. 前言

2. 目标分析

3. 外观设计

3.1 普通按钮

3.2 尺寸仿照

3.3 修改颜色与背景色

3.4 边框处理

3.5 字体大小

4. 效果设计

5. 小结

零基础CSS入门教程(26)–CSS按钮实例相关推荐

最新文章

热门文章