好看的按钮设计HTML+CSS，漂亮的动画设计

点击目录进行跳转到相应章节

前言
单个组件的效果展示
思路
相关代码
疑点解惑
- 怎么实现下图中的效果呢
- 伪类元素的位置
- 踩坑
- 结语

前言

本文收录一些组件，进行抽取后存放，方便在以后的使用中随时插寻使用，也欢迎大家进行使用。

单个组件的效果展示

思路

上面的效果可以概括为：

鼠标未停留时：红蓝（渐变）背景，正中文字为白色，button四角做了圆角处理
鼠标停留时：button背景变成白色，文字变为蓝色，边框四条直线产生汇聚效果，同时每条直线会有一个阴影的产生。

根据效果图可以得出实现的一些思路：

背景、文字的颜色变化使用hover就可以实现
左/右两边的两条线可以使用button的::before/::after伪类，结合transition，当鼠标停留时，实现两条线的延展
中间的文字使用span标签，需要使用span标签的伪类
上下两条线利用span的伪类::before/::after实现，原理类似左右两边的直线

其实只是线条的位置和方向有所变化，其他基本没有什么变化

相关代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
</head>
<body><button class="btn"><span>Haihong Pro</span></button>
</body>
</html>

html,body{margin: 0;height: 100%;
}
body{display: flex;justify-content: center;align-items: center;
}
.btn{width: 390px;height: 120px;background: radial-gradient(circle, rgba(247, 150, 192, 1) 0%, rgba(118, 174, 241, 1) 100%);border: none;color: #fff;font-family: 'Lato', sans-serif;font-weight: 500;font-size: 48px;border-radius: 10px;cursor: pointer;position: relative;line-height: 120px;
}
.btn span{width: 100%;height: 100%;position: relative;display: block;
}
.btn:hover{background: transparent;color: #76aef1;
}
.btn::before,
.btn::after{content: '';position: absolute;width: 1px;height: 1px;box-shadow:-1px -1px 20px 0px rgba(255, 255, 255, 1),-4px -4px 5px 0px rgba(255, 255, 255, 1),10px 10px 20px 0px rgba(0, 0, 0, .4),6px 6px 5px 0px rgba(0, 0, 0, .3);transition: all 0.8s ease;padding: 0;
}
.btn::before{top: 0;right: 0;
}
.btn::after{bottom: 0;left: 0;
}
.btn:hover::before,
.btn:hover::after{height: 100%;
}
.btn span::before,
.btn span::after{position:absolute;content: '';height: 1px;width: 0px;box-shadow:-1px -1px 20px 0px rgba(255, 255, 255, 1),-4px -4px 5px 0px rgba(255, 255, 255, 1),10px 10px 20px 0px rgba(0, 0, 0, .4),6px 6px 5px 0px rgba(0, 0, 0, .3);transition: all 0.8s ease;
}
.btn span::before{top:0;left: 0;
}
.btn span::after{bottom: 0;right: 0;
}
.btn span:hover::before,
.btn span:hover::after{width: 100%;
}

疑点解惑

怎么实现下图中的效果呢

怎么实现鼠标移动上去的时候出现的阴影呢？

其实这个利用boder-shadow就可以实现了，对每一条直线都添加一下阴影效果就可以了

 box-shadow:-1px -1px 20px 0px rgba(255, 255, 255, 1),-4px -4px 5px 0px rgba(255, 255, 255, 1),10px 10px 20px 0px rgba(0, 0, 0, .4),6px 6px 5px 0px rgba(0, 0, 0, .3);

伪类元素的位置

这里button的两个伪类::before和::after的位置有所变化，分别位于左下和右上

初始width都为1px，height为0

注：这里为了演示，将width/heigth都设置为了10px，背景色为红色，便于观察

然后鼠标停留时，利用过渡transition，将height设置为100%，就可以实现左右两条线的效果了
上下两条直线就是利用span的两个伪元素实现的，原理也是一样的，这里就不再赘述了

踩坑

忘了将span的position设置为relative
没有记得将display设置为block

因为span不是块级元素，这里需要的是块级元素，如果没有声明为块级元素，就会出现下面的结果：

注：这里使用了红色背景，以便观察

结语

本文章参考：

https://mp.weixin.qq.com/s/mv_2XpqpM2hZVVvjTL4ZUQ
https://codepen.io/yuhomyan/pen/OJMejWJ
如有冒犯但请原谅，如造成影响请及时联系我进行删除

好看的按钮设计HTML+CSS，漂亮的动画设计相关推荐

matlab图形与动画设计 pdf,MATLAB图形与动画设计
基本信息书名:MATLAB图形与动画设计 **:36.00元售价:34.2元,便宜1.8元,折扣95 作者:张德丰,赵书梅,刘国希出版社:国防工业出版社出版日期:2009-04-01 ISBN ...
带动画的好看的按钮集合HTML + CSS各种好看按钮组件
展示效果 [注意:]并不是单纯的效果,而是有动画的代码段 <!DOCTYPE html> <html><head><meta charset="U ...
HTML5期末大作业：旅游网页设计——山东旅游9页(代码质量好) 学生DW网页设计作业源码 web课程设计网页规划与设计
HTML5期末大作业:旅游网页设计--山东旅游9页(代码质量好) 学生DW网页设计作业源码 web课程设计网页规划与设计 HTML+CSS+JavaScript 常见网页设计作业题材有个人. 美食. ...
三维动画在计算机上的应用,三维动画设计有哪些应用
原标题:三维动画设计有哪些应用所谓的三维动画设计,也称为3D动画设计,是随着计算机技术的发展而出现的新兴技术.随着人们生活水平的提高,三维动画设计越来越广泛地应用于人们生活的各个方面.由于三维动画设 ...
html button形状,【8个实例】纯CSS按钮(button)，简单漂亮实用
本文介绍6个纯CSS按钮(button)实例,漂亮又实用,代码使用简单,又具有很强的可迁性,基本上在任何一张网页都能很容易就能用上这些按钮样式. 纯CSS按钮(button) 实例1:普通按钮创建一 ...
【CSS按钮特效】css如何实现科技感好看按钮效果（尾附源码下载）
[写在前面]这两天还是比较痴迷于CSS特效的,甚至还想着去用CSS做动画片呢,希望后面能做到,今天主要讲的是我们页面常见的元素-按钮,很多时候按钮也需要高级化,但是很多人苦于没有途径去寻找,于是乎借这 ...
html按钮突出效果,这10个按钮，把 CSS HOVER 的创意发挥到极致了
这10个按钮,把 CSS HOVER 的创意发挥到极致了 7月 19, 2017 评论 Sponsor CSS hover 样式很简单,但是想创造出有意思.实用.有创意性的特效是很考验设计师的创意能力 ...
html点击按钮复制一个样式,这10个按钮，把 CSS HOVER 的创意发挥到极致了
原标题:这10个按钮,把 CSS HOVER 的创意发挥到极致了 CSS hover 样式很简单,但是想创造出有意思.实用.有创意性的特效是很考验设计师的创意能力,所以设计达人每隔一段时间都会分享一些 ...
HTML网页设计期末课程大作业 ~中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码
HTML网页设计期末课程大作业 ~ 中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
HTML期末大作业—— 游戏网页(5个页面) ~ 全屏游戏美术大赛作品征集网页 HTML+CSS+JS ~ web课程设计网页规划与设计
HTML期末大作业-- 游戏网页(5个页面) ~ 全屏游戏美术大赛作品征集网页 HTML+CSS+JS ~ web课程设计网页规划与设计临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感 ...