前言

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. React-Native Tutorials

    React-Native Tutorials https://egghead.io/courses/react-native-fundamentals part free https://egghea ...

  2. qt 移动窗口MoveWindow

    RECT r; GetWindowRect(this->gameHwnd, &r); // 获取窗口的宽度和高度 int nWidth = r.right - r.left; int n ...

  3. Flutter使用WebSockets

    文档 注意是WebSockets而不是socket.io install dependencies: web_socket_channel: demo import 'dart:convert'; i ...

  4. NGK与AOFEX交易所达成战略合作，BGV即将上线A网！

    据NGK官方消息,NGK官方已经与英国伦敦知名交易所AOFEX交易所达成战略合作,将于12月2日全球首发BGV,现已开启充值服务.同时,在12月3日15:00,用户可以参与BGV交易:在12月4日15 ...

  5. 如何在一台开发机中同时配置github、gitlab等多个账户

    本文参考博文. 如果公司的代码同步环境在gitlab上,而自己有很多项目托管在github.我们需要做一些额外的配置实现两者的无缝切换. 步骤 我的开发机是macbook,如果属于不同系统,找到该系统 ...

  6. 15_MySQL·WHERE子句中条件执行的顺序

  7. Zookeeper从入门到删库跑路

    导语 ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,它包含一个简单的原语集,分布式应用程序可以基于它实现同步服务,配置维护和命名服务等.Zookeeper是hadoop的一个子项 ...

  8. Typescript快速入门

    目录 什么是Typescript 为什么学习Typescript 快速搭建开发环境 1.安装node.js 2.使用node自带的npm安装Typescript编译器 3.配置vscode编辑环境 4 ...

  9. es初步搭建

    1.es tar包传至linux上 并解压 tar -zxvf elasticsearch-7.4.0-linux-x86_64.tar.gz 2.新建用户 useradd xxxname passw ...

  10. setScaledContents

    ui->catchPhotoLabel_607->setPixmap(QPixmap::fromImage(*m_imageCatchtDefaultPhoto_607).scaled(Q ...