html速成按钮样式,前端技巧集：从零制作华丽的按钮CSS样式

2024-05-15 05:09:16

按钮效果

按钮是HTML非常重要的控件之一，以唯品会的注册按钮为例制作一个当前非常流行的按钮的CSS样式。其他主流网站的按钮实现方式也是类似的，虽然代码多一些，但是童鞋一步步来，看看效果吧。

准备

现在比较流行使用a标签制作按钮，所以，先在html中加上个a标签如下：

立刻注册

在标签上加上个类属性，值为btn-vip。接着我们就为这个类加上一些CSS效果。

.btn-vip {

// 属性

}

准备工作OK，效果如下图：

1. 设置按钮的大小和边框

我们先设置按钮的边框。(颜色使用唯品会特用的红色#f10180)

border:1px solid #f10180;

看一下边框出来了！(忘记border这种简写方式的童鞋该复习了。)

然后设置按钮大小，数值大家可以使用工具量一下。这里我们使用宽143px和高43px。

width: 143px;

height: 43px;

看一下效果。

已没有任何变化，为啥？不要忘记a标签是行内标签，宽高设置是不起作用的，肿么办？聪明的童鞋知道使用display可以修改这个属性。代码如下：

display: inline-block;

宽高设置生效了。

边框还有个圆角，使用CSS3的属性border-radius设置一下吧。(单词radius是半径)

border-radius: 5px;

效果如下：

2. 设置按钮的背景和文字

按钮大小和边框设置好了，我们要设置按钮里面的样式了。

先从背景色开始。

background: #f10180;

改变一下字体的颜色和大小

color:#fff;

font-weight:bold;

font-size:18px;

大体样子已经出来了，只要调整一下位置，上下左右居中即可。

先水平居中

text-align: center;

再来垂直居中。(文本的垂直居中有很多种，这里使用的是行高设置为按钮高度43px这种方式)

line-height: 43px;

通常，按钮默认是不显示下划线的，我们除去下划线。

text-decoration: none;

OK，我们的最终效果如下：

3. 添加特效

通常，当我们把鼠标放在按钮上会有一些特定提示，表示这个是个可以点击的。有种做法比较流行就是在文字下增加下划线(之前把下划线除去了，现在又加了回来)。鼠标放在元素上显示演示，我们的做法是使用:hover这个伪类。

.btn-vip:hover{

text-decoration: underline;

}

鼠标放在按钮上效果如下：

4.最后

整个按钮CSS代码整理如下,童鞋们试一下吧。

.btn-vip {

border:1px solid #f10180;

width: 143px;

height: 43px;

display: inline-block;

border-radius: 5px;

background: #f10180;

color:#fff;

font-weight:bold;

font-size:18px;

text-align: center;

line-height: 43px;

text-decoration: none;

}

.btn-vip:hover{

text-decoration: underline;

}

童鞋们试一下给其他标签加上这个类试试。

立即注册

立即注册

立即注册

上面的标签都显示成按钮的样子，这是CSS威力所在，但是实际上，我们只在a button和input type="button"加上按钮CSS样式。

代码虽然多了一些，童鞋们，慢慢试一下，收获会不少哦！

html速成按钮样式,前端技巧集：从零制作华丽的按钮CSS样式相关推荐

js遍历追加html子样式,前端基本功：JS（十一）动画封装(CSS样式获取、JSON遍历)...
动画原理动画基本原理.gif 人走路的时候, 步长动画的基本原理 : 让盒子的 offsetLeft + 步长盒子原来的位置 0 + 10 盒子现在的offsetLeft 10 动画基本原理的 ...
前端技术分享：一个超级好用的CSS样式表
大家可以经常逛一些程序员比较喜欢的论坛贴吧,你会有不一样的惊喜呢,今天小千就来给大家分享一个在GitHub上面发现的超级好用的CSS样式表,来看一看. 看名称本以为是一个动画库,但是看下来才发现这是一 ...
前端基础之《Bootstrap（2）—全局CSS样式_栅格系统》
一.Bootstrap要点 1.bootstrap全局CSS样式 2.bootstrap CSS组件 3.bootstrap javascript插件其实就是官网上的这三个. 二.项目引入Boots ...
jquery html()样式悠效,jquery怎么用attr()方法判断改变css样式？
jquery怎么用attr()方法判断改变css样式?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. jquery中用attr()方法用于设置或返回被选元 ...
ajax使用html()后样式无效,jquery.ajax使用字符串拼接后内联css样式失效
问题所在: 是这样的,我使用ajax调用了一串json数据,使用字符串拼接的方法动态插入div容器.结果css并没有对动态插入的内容加css样式. 代码描述: css使用的内联,在head部分, jq ...
jQuery 学习-样式篇（八）：jQuery 设置元素的 CSS 样式
推荐阅读 Helm3(K8S 资源对象管理工具)视频教程:https://edu.csdn.net/course/detail/32506 Helm3(K8S 资源对象管理工具)博客专栏:https: ...
把css样式表与html网页关联的方法,Dreamweaver 教程-CSS样式表的3种关联方法
下面我们来讲讲如何为一个网页添加CSS样式. 内部样式表内部样式表需要在网页的部分定义,格式如下: 行内样式表(内嵌样式表) 它的使用方法我们在前两节也已经使用过了.行内样式表直接在标签内部定义, ...
html标签元素中定义样式表的属性名是,HTML标签属性与CSS样式
定义:超文本标记语言 Hypetext Markup Language 特点: 不需要编译,直接由浏览器执行是一个文本文件必须用htm或html作文件后缀对大小写不敏感,HTML或html都可以 ...
前端基础之《Bootstrap（3）—全局CSS样式_排版、代码、表格和按钮》
一.排版 1.标题(.page-header) 从<h1>到<h6>均可使用page-header样式. <body><div><h1 class ...
三个表格居中纵向html,前端技巧集：图与表三步垂直居中
目标一个图片img和一个表格table,并且图片与表格共享一行. 实现 1. 在HTML中加上一个图片和表格代码中写两个元素:图片与表格,为了观察方便给他们加上个红色边框. 代码如下: 进击的DO ...

最新文章

热门文章