前言

Hello！小伙伴！

首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～

哈哈 自我介绍一下

昵称：海轰

标签：程序猿一只｜C++选手｜学生

简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～）

学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！

日常分享：微信公众号【海轰Pro】记录生活、学习点滴，分享一些源代码或者学习资料，欢迎关注～

效果展示

思路

上面效果可以概括为：

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

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

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

其实与上一篇文章实现的原理是一样的，只是线条的位置和方向有所变化，其他基本没有什么变化「HTML+CSS」--自定义按钮样式【001】

Demo代码

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="style.css">

    <title>Document</title>

</head>

<body>

    <button class="btn"><span>Haihong Pro</span></button>

</body>

</html>

CSS

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%;

}

疑点详解

1.怎么实现下图中的效果呢？



其实这个利用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);

2.伪类元素的位置

与上一篇文章的区别在于，这里button的两个伪类::before和::after的位置有所变化，分别位于左下和右上

初始width都为1px，height为0

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

然后鼠标停留时，利用过渡transition，将height设置为100%，就可以实现左右两条线的效果了

上下两条直线就是利用span的两个伪元素实现的，原理也是一样的，这里就不再赘述了。

踩坑

1.忘了将span的position设置为relative

2.没有记得将display设置为block

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



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

结语

学习来源：

https://codepen.io/yuhomyan/pen/OJMejWJ

css只会一点点，学习之余从喜欢看一些大神级别的css效果展示，根据源码一点一点学习知识点，文中有不对的地方，欢迎指出～

「HTML+CSS」--自定义按钮样式【002】的更多相关文章

  1. 「HTML+CSS」--自定义按钮样式【003】

    前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...

  2. 「HTML+CSS」--自定义按钮样式【004】

    前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...

  3. 「HTML+CSS」--自定义按钮样式【001】

    前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...

  4. [HTML/CSS]uploadify自定义按钮样式

    概述 在项目中经常用到uploadify上传插件,但是FLASH按钮的外观往往跟我们网页的设计的主题色不太搭配.这时就需要对其样式进行修改. 样式文件是uploadify.css. 打开这个文件后,你 ...

  5. 「HTML+CSS」--自定义加载动画【008】

    前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...

  6. 「HTML+CSS」--自定义加载动画【007】

    前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...

  7. 「HTML+CSS」--自定义加载动画【009】

    前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...

  8. 「HTML+CSS」--自定义加载动画【010】

    前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...

  9. 「HTML+CSS」--自定义加载动画【011】

    前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...

随机推荐

  1. 24 WAYS to impress your friends

    24 WAYS to impress your friends 24 ways is the advent calendar for web geeks. For twenty-four days e ...

  2. macOS & timer & stop watch

    macOS & timer & stop watch https://matthewpalmer.net/blog/2018/09/28/top-free-countdown-time ...

  3. js & Input & Paste & Clipboard & upload & Image

    js & Input & Paste & Clipboard & upload & Image input paste upload image js Clip ...

  4. D3 tree map

    D3 tree map D3 矩形树图 https://www.zhihu.com/question/55529379 https://zhuanlan.zhihu.com/p/57873460 ht ...

  5. svg rect to polygon points & points order bug

    svg rect to polygon points & points order bug https://codepen.io/xgqfrms/pen/vYOWjYr?editors=100 ...

  6. js滚轮事件兼容写法

    /** * 简易的事件添加方法 */ define(function(require, exports, module) { exports.addEvent = (function(window, ...

  7. Java并发包源码学习系列：线程池ScheduledThreadPoolExecutor源码解析

    目录 ScheduledThreadPoolExecutor概述 类图结构 ScheduledExecutorService ScheduledFutureTask FutureTask schedu ...

  8. ASP.NET Core WebApi版本控制

    前言: 在日常项目开发中,随着项目需求不断的累加.不断的迭代:项目服务接口需要向下兼容历史版本:前些时候就因为Api接口为做版本管理导致接口对低版本兼容处理不友好. 最近就像了解下如何实现WebApi ...

  9. 数据处理_HIVE增量ETL的一种方式

    适用场景: 贴源层主表历史数据过大,ETL不涉及历史数据对比或聚合 处理流程: 1.确定一个业务主键字段或物理主键字段 2.确定一个可以判断增量数据范围的字段,这取决于具体的业务场景,一般选用记录的创 ...

  10. VMware vSphere 虚拟化平台的安装及使用

    首先解释一下这些名词, vSphere是什么? vSphere 是VMware公司发布的一整套产品包,是VMware公司推出的一套服务器虚拟化解决方案,包含VMware ESXi hypervisor ...