前言

Hello!小伙伴!
首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~
哈哈 自我介绍一下
昵称:海轰
标签:程序猿一只|C++选手|学生
简介:因C语言结识编程,随后转入计算机专业,有幸拿过国奖、省奖等,已保研。目前正在学习C++/Linux(真的真的太难了~)
学习经验:扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语!
日常分享:微信公众号【海轰Pro】记录生活、学习点滴,分享一些源代码或者学习资料,欢迎关注~

效果展示

在这里插入图片描述

思路

上面效果可以概括为:

  • 鼠标未停留时:蓝色(渐变)背景,正中文字为白色,button四角做了圆角处理
  • 鼠标停留时:button背景变成白色,文字变为蓝色,同时右上方、左下角同时延伸两条互相垂直的线条

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

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

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; 
   color: #fff; 
   background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 100%);
   font-family: 'Lato', sans-serif;
   font-weight: 500;
   border-radius: 10px;
   box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
   7px 7px 20px 0px rgba(0, 0, 0, .1),
   4px 4px 5px 0px rgba(0, 0, 0, .1);
   transition: all 0.3s ease;
   cursor: pointer;
   border: none;
   position: relative;
   line-height: 120px;
   padding: 0;
}
.btn span{
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    font-size: 48px;
}
.btn::before,.btn::after{
    position:absolute;
    content: '';
    top: 0;
    right: 0;
    background: rgba(2, 126, 251, 1); 
    transition: all 0.3s ease;
}
.btn::before{
    width: 0;
    height: 2px;
}
.btn::after{
    height: 0;
    width: 2px;
}
.btn span::before,
.btn span::after{
    position:absolute;
    content: '';
    bottom: 0;
    left: 0;
    background: rgba(2, 126, 251, 1);
    transition: all 0.3s ease;
}
.btn span::before{
    width: 0;
    height: 2px;
}
.btn span::after{
    height: 0;
    width: 2px;
}

.btn:hover{
    background: transparent;
    color: rgba(2, 126, 251, 1);
}

.btn:hover::before{
    width: 100%;
}
.btn:hover::after{
    height: 100%;
}
.btn span:hover::before{
    width: 100%;
}
.btn span:hover::after{
    height: 100%;
} 

疑点详解

怎么实现两条线的延展的呢?

首先,使用::before和::after伪类,在button的前后添加两个伪元素
一个width=0,height=2px;另一个height=0,width=2px
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
这里便于理解和观察,我们将这两个元素显示出来

修改css代码:将before改为红色,便于观察,同时width、height都改为20px

.btn::before,.btn::after{
    position:absolute;
    content: '';
    top: 0;
    right: 0;
    background: red; 
    transition: all 0.3s ease;
}
.btn::before{
    width: 20px;
    height: 20px;
} 

现在就可以观察到before的具体位置了
在这里插入图片描述
在这里插入图片描述
利用CSS 中的 transition 属性,在鼠标停留(hover)在其上时,将其宽度修改为100%,
就可以实现延展效果了

// 鼠标停留在上方时,宽度变成100%
.btn:hover::before{
    width: 100%;
} 

在这里插入图片描述
不了解css transition的小伙伴可以查看:

transition简介:https://www.w3school.com.cn/cssref/pr_transition.asp

一个before实现宽度的延伸,另一个after就实现高度的延伸,所以一个元素的两个伪元素就可以实现两条线的延展效果

同样,左下角的延展就是利用span的::before和::after伪元素了

踩坑

1.父元素button没有设置padding=0,会出现四条线没有完美闭合的情况
在这里插入图片描述
2. button元素中应该设置position: relative,如果没有会出现:
在这里插入图片描述
原因:因为button的before和after伪元素中的 position:absolute; 所以必须设置button position: relative

position中absolute是指:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位

如果不声明button的position为relative,那么此时button::before/after就会认为它的父元素是浏览器,那么绝对定位也就是根据浏览器而定了。

注释版代码

html,body{
    margin: 0;
    height: 100%;
}
body{
    /* 元素居于正中 */
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn{
   width: 390px;
   height: 120px; 
   /* 文字颜色为白色 */
   color: #fff; 
   /* button背景色为渐变蓝色 */
   background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 100%);
   /* 字体设置 */
   font-family: 'Lato', sans-serif;
   font-weight: 500;
   /* 圆角处理 */
   border-radius: 10px;
   /* button阴影设置 */
   box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
   7px 7px 20px 0px rgba(0, 0, 0, .1),
   4px 4px 5px 0px rgba(0, 0, 0, .1);
   /* 设置过渡属性  所以元素过渡 持续时间:0.3s 速度曲线类型:ease*/
   transition: all 0.3s ease;
   /* 鼠标停留时,变为小手 */
   cursor: pointer;
   border: none;
   position: relative;
   /* 行高  */
   line-height: 120px;
   padding: 0;
}
.btn span{
    /* 相对定位 */
    position: relative;
    /* 块级元素 */
    display: block;
    width: 100%;
    height: 100%;
    font-size: 48px;
}
.btn::before,.btn::after{
    /* 绝对定位 */
    position:absolute;
    /* content必须有 不然不显示 */
    content: '';
    /* 定位右上角 */
    top: 0;
    right: 0;
    /* 背景色:蓝色 */
    background: rgba(2, 126, 251, 1); 
    transition: all 0.3s ease;
}
.btn::before{
    /* 初始化 */
    width: 0;
    height: 2px;
}
.btn::after{
    height: 0;
    width: 2px;
}
.btn span::before,
.btn span::after{
    /* 绝对定位 */
    position:absolute;
    content: '';
    /* 定位左下角 */
    bottom: 0;
    left: 0;
    background: rgba(2, 126, 251, 1);
    transition: all 0.3s ease;
}
.btn span::before{
    width: 0;
    height: 2px;
}
.btn span::after{
    height: 0;
    width: 2px;
}

.btn:hover{
    /* 背景透明 */
    background: transparent;
    /* 字体色变为:蓝色 */
    color: rgba(2, 126, 251, 1);
}

.btn:hover::before{
    /* 宽度过渡为100% */
    width: 100%;
}
.btn:hover::after{
    /* 高度过渡为100% */
    height: 100%;
}
.btn span:hover::before{
    width: 100%;
}
.btn span:hover::after{
    height: 100%;
} 

结语

学习来源:

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

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

在这里插入图片描述

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

  1. CSS不用背景图片实现优惠券样式反圆角,凹圆角,反向半圆角,并且背景渐变

    日常开发过程中,特别是商城相关应用开发过程中,时常会遇到花里胡哨的设计图,比如优惠券样式,上图:实现思路如下:1.先写一个外容器,实现背景色渐变:Html:1 <div class="coupon"> 2 div>Css:1 .coupon { 2 widt......

  2. CSS实现漂亮的时钟动画效果的实例代码

    我要找工作 !!! 预先准备: 首先这个动画,是根据之前的 Loading 动画制作的,Loading炫酷动画, 这些的思路都是一样的,在这个动画上进行了一次创新。 预习知识点: 动画帧 背景渐变 var() 和 calc() 的使用 flex布局的场景 多个动画操作 ......

  3. 使用CSS的clip-path实现图片剪切效果

    最近有个业务需求:校对图片文本信息,如下图所示,当鼠标点击文本中某一行的时候,文本上会显示对应行图片同时左侧会显示对应位置的画框。clip-path今天要说的主题是:如何剪切原图中的部分图片?(前提是后端已经传给了我们对应行在图片上的位置)面对这种需求有多种解决方案,可以用canvas的drawIm......

  4. CSS使用 background 创造各种美妙的背景

    本文属于 CSS 绘图技巧其中一篇,系列文章:在 CSS 中使用三角函数绘制曲线图形及展示动画CSS奇思妙想 -- 使用 CSS 创造艺术将介绍一些利用 CSS 中的 background、mix-blend-mode、mask 及一些相关属性,制作一些稍微复杂、酷炫的背景。通过本文,你将会了解到 ......

  5. CSS 奇技淫巧:动态高度过渡动画

    这个问题源自于掘金上的一个留言,一个朋友问到,为什么我下面这段代码的高度过渡动画失效了?伪代码大概是这样:{height: unset;transition: all 0.3s linear;will-change: height;&.up {height: 0;}&.down {h......

  6. 前端性能优化小纪

    天下武功,无坚不破,唯快不破。对前端而言,快意味着要求资源体量更小、数量更精简、内容更早呈现、交互更加人性化。当项目做到一定程度,就应该考虑性能的问题,前端的性能优化有诸多有迹可循的理论和方法,比如 Yahoo!性能军规、Google PageSpeed Insights Rules。我们团队一个比......

  7. css3实现背景渐变

    #grad {background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 5.1 - 6 */background: -o-linear-gradient(right,rgba(255,0,......

  8. css3动画整理

    趁逢年味,整理一些小东西,希望大家能够喜欢;列举以下7个小demo来抛砖引玉1、多彩圆环利用 CSS3 的 background-image 和 border-radius 组合成的动画直接上代码:htmldo somethingCSS#item1 {margin: 2em;height: 240p......

  9. 如何不使用 overflow: hidden 实现 overflow: hidden

    一个很有意思的题目。如何不使用 overflow: hidden 实现 overflow: hidden?CSS 中 overflow 定义当一个元素的内容太大而无法适应块级格式化上下文时候该做什么。而 overflow: hidden 则会将超出容器范围内的内容剪裁。控制 overflow: hi......

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

    前言Hello!小伙伴!首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~哈哈 自我介绍一下昵称:海轰标签:程序猿一只|C++选手|学生简介:因C语言结识编程,随后转入计算机专业,有幸拿过国奖、省奖等,已保研。目前正在学习C++/Linux(真的真的太难了~)学习经验:扎实基础 + 多......

随机推荐

  1. C语言中sprintf()函数的用法

    sprintf函数的用法1、该函数包含在stdio.h的头文件中。2、sprintf和平时我们常用的printf函数的功能很相似。sprintf函数打印到字符串中,而printf函数打印输出到屏幕上。sprintf函数在我们完成其他数据类型转换成字符串类型的操作中应用广泛。3、sprintf函数的格......

  2. Java 添加数字签名到Excel以及检测、删除签名

    Excel中可添加数字签名以供文档所有者申明文档的所有权或有效性。文本以Java代码示例介绍如何在Excel文档中对数字签名功能进行相关操作,包括如何添加签名到Excel、检测Excel文档是否已签名,以及如何删除Excel文档中的签名。本次代码测试环境Excel版本:2013编译环境:Intell......

  3. 基于Python的接口自动化-读写excel文件

    引言使用python进行接口测试时常常需要接口用例测试数据、断言接口功能、验证接口响应状态等,如果大量的接口测试用例脚本都将接口测试用例数据写在脚本文件中,这样写出来整个接口测试用例脚本代码将看起来很冗余和难以清晰的阅读以及维护,试想如果所有的接口测试数据都写在代码中,接口参数或者测试数据需要修改,......

  4. C语言之漫谈指针(下)

    C语言之漫谈指针(下)在上节我们讲到了一些关于指针的基础知识:详见:C语言之漫谈指针(上)本节大纲:零.小tips一.字符指针二.指针数组与数组指针三.数组传参与指针传参四.函数指针及函数指针数组五.回调函数六.例题讲解 零.小tips在正式开始下节之前,我们先来穿插两个小tips:1.打印函数......

  5. python 执行函数的九种方法

    方法一:直接调用函数运行这种是最简单且直观的方法def task(): print("running task")task()如果是在类中,也是如此class Task: def task(self): ......

  6. C# 忽略大小写进行字符串比较

    使用场景字符串比较在EF或者其他地方使用的时候,字符串的比较非常常见。使用全部转化为大写或者小写进行比较,有时候并不能满足使用需求。所以使用另外的字符串比较非常有意义。代码示例class Program{static void Main(string[] args){CompareInfo Comp......

  7. Mysql 四种事务隔离级别

    一、前提时过一年重新拾起博文记录,希望后面都能坚持下来。 接着之前MySql的学习,先记录下这篇。以下都是基于mysql8 innodb存储引擎进行分析的。 二、事务的ACID特性A(Atomicity) 原子性指整个数据库事务是不可分割的单位,整个事务中的所有操作要么全部提交成功,要么全部失败回......

  8. asp(vbscript)中自定义函数的默认参数实现代码

    现代语言的函数中都可以带有默认参数,在vbscript系统内建的函数可以带有可选值(如常用的 split()等等),然而我们自己定义的函数中无法具有此功能.下面提供一个方法实现可选参数的功能.functin foo(dtype, dsize, value) dim a......

  9. 使用Python封装excel操作指南

    前言openpyxl 是 python 中操作 excel 表格比较常用的一个库,可以读取和写入excel文件,支持【.xlsx / .xlsm / .xltx / .xltm】格式的文件,处理excel数据、公式、样式,且可以在表格内插入图表但是在实际项目的使用过程中,如果经常要用到 openpy......

  10. 细说 js 的7种继承方式

    在这之前,先搞清楚下面这个问题:function Father(){} Father.prototype.name = 'father';Father.prototype.children = [];const child1 = new Father();console.log('get1 =......