点此查看 所有教程、项目、源码导航
文章目录
- 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按钮实例
发布评论