前言

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. Apple Support

    Apple Support Send Files to Apple Support https://gigafiles.apple.com/#/customerupload refs 无法截屏 bug ...

  2. Principle for iOS App Animation Design

    Principle for iOS App Animation Design Animate Your Ideas, Design Better Apps https://principleforma ...

  3. ServerLess & MongoDB Atlas & REST API

    ServerLess & MongoDB Atlas & REST API ServerLess, Nodejs, MongoDB Atlas cloud 构建 REST API ht ...

  4. ES-Next classes static properties

    ES-Next classes static properties https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ ...

  5. layui 时间插件laydate中动态设置改变min和max值

    <div class="layui-inline"> <label class="layui-form-label">申请时间</ ...

  6. postman功能介绍

  7. 基于docker搭建DNSmasq

    一.概述 DNSmasq是一个小巧且方便地用于配置DNS和DHCP的工具,适用于小型网络,它提供了DNS功能和可选择的DHCP功能.它服务那些只在本地适用的域名,这些域名是不会在全球的DNS服务器中出 ...

  8. 使用Docker快速搭建Nginx+PHP-FPM+MySQL+phpMyAdmin环境

    一.概述 环境介绍 操作系统:centos 7.6 docker版本:19.03.8 ip地址:192.168.31.34 本文将介绍如何使用单机部署Nginx+PHP-FPM环境 二.Nginx+P ...

  9. Kubernetes-1.概述

    内容主要摘自官网文档资料 官方地址 概述Kubernetes基本信息 前提条件: 掌握容器或Docker知识 文档编写基于kubernetes v1.17版本 目录 概述 Kubernetes对象 K ...

  10. 后端程序员之路 56、go package

    package分包.import导入包import . "package1"  省略前缀包名import p1 "package1" 起别名import _ & ...