前言

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 Hooks: useCallback All In One

    React Hooks: useCallback All In One useCallback https://reactjs.org/docs/hooks-reference.html#usecal ...

  2. 如何获取豆瓣电影 API Key

    如何获取豆瓣电影 API Key 豆瓣 API Key 不能使用了 ! solutions & !== ? https://frodo.douban.com/api/v2/subject_co ...

  3. 如何用 js 实现一个 new 函数

    如何用 js 实现一个 new 函数 原理 new 关键字实现经过了如下过程 创建一个空对象 obj = {} 链接到原型 obj.proto = constructor.prototype 绑定 t ...

  4. uniapp 创建简单的tabs

    tabs组件 <template> <view class="tabs"> <view class="bar" :style=&q ...

  5. 「NGK每日快讯」12.2日NGK公链第29期官方快讯！

  6. 微信小程序：应用生命周期

    小程序的生命周期分为应用生命周期和页面生命周期. 应用指的是一个文件,是小程序的入口文件app.js,入口文件最外层方法名称是App,页面的js文件最外层是page,组件的js文件的最外层是compo ...

  7. Redis持久化机制 RDB和AOF的区别

    一.简单介绍 Redis中的持久化机制是一种当数据库发生宕机.断电.软件崩溃等,数据库中的数据无法再使用或者被破坏的情况下,如何恢复数据的方法. Redis中共有两种持久化机制 RDB(Redis D ...

  8. Cassandra数据操作管理工具tableplus

    一.概述 Cassandra是一个NoSQL数据库,具有类SQL CQL入口,基本语法与SQL保持一致.其实笔者认为 Cassandra的自带的cqlsh已经满足本的需求:如: 但是用习惯了数据库操作 ...

  9. Hi3559AV100-自己编译了u-boot、kernel及rootfs后，出现烧写错误或者烧写后板载无法启动的解决思路

    这篇随笔主要给出了Hi3559AV100-自己编译了u-boot.kernel及rootfs后,出现烧写错误或者烧写后板载无法启动的解决思路. 问题 (1)对于 u-boot 为官方的,kernel ...

  10. 剑指 Offer 31. 栈的压入、弹出序列 + 入栈顺序和出栈顺序的匹配问题

    剑指 Offer 31. 栈的压入.弹出序列 Offer_31 题目详情: 解析: 这里需要使用一个栈来模仿入栈操作. package com.walegarrett.offer; /** * @Au ...