codePen按钮样式学习

前言

看到codepen里面有的按钮搞得很炫酷,但其实也不是很难,就学习记录一下

逐渐出现边框

在这里插入图片描述

大体上来说就是当鼠标悬浮的时候触发四个transition,用after、before和span的after和before四个伪类做hover出来的边框

<div class="btn btn-2"><span>borderDynamic</span></div>
.btn-2 {color: white;background-color: rgb(0, 153, 255);transition: all 0.3s ease;}.btn-2 span {display: inline-block;width: 100%;height: 100%;}.btn-2::after,.btn-2::before {content: "";position: absolute;top: 0;right: 0;background-color: rgb(2, 2, 155);transition: all 0.3s ease;}.btn-2 span::after,.btn-2 span::before {content: "";position: absolute;bottom: 0;left: 0;background-color: rgb(2, 2, 155);transition: all 0.3s ease;}.btn-2::after,.btn-2 span::after {width: 1px;height: 0;}.btn-2::before,.btn-2 span::before {width: 0;height: 1px;}.btn-2:hover {background-color: transparent;color: rgb(22, 102, 85);}.btn-2:hover::after,.btn-2 span:hover::after {height: 100%;}.btn-2:hover::before,.btn-2 span:hover::before {width: 100%;}

图形变化

在这里插入图片描述

原理和上面类似,都是用伪类去实现

    .btn-3 {background-color: rgb(255, 192, 203);}.btn-3::before {content: "";position: absolute;top: 10%;left: 50%;width: 4%;height: 80%;border-radius: 50%;transform: rotate(45deg);background-color: black;transition: all 0.3s ease;}.btn-3::after {content: "";position: absolute;top: 10%;left: 50%;width: 4%;height: 80%;border-radius: 50%;transform: rotate(-45deg);background-color: black;transition: all 0.3s ease;}.btn-3:hover::before {transform: translateX(-100%) scaleY(80%);}.btn-3:hover::after {transform: translateX(100%) scaleY(80%);}

hover展开的btn

请添加图片描述

<div class="roundBtn btn-4"><span class="arrow"></span><div class="icon"></div><span class="text">hover</span></div>
/* 圆形动画button */.roundBtn {margin: 10px;width: 50px;height: 50px;border-radius: 25px;background-color: rgb(160, 243, 171);position: relative;transition: all 0.3s ease;}.icon {position: absolute;top: 23px;left: 30px;width: 0px;height: 4px;border-radius: 2px;background-color: black;transform: scale(80%);transition: all 0.3s ease;}.arrow::before {content: "";position: absolute;top: 10px;left: 23px;height: 20px;width: 4px;border-radius: 2px;background-color: black;transform: rotate(-45deg) scale(80%);transition: all 0.3s ease;}.arrow::after {content: "";position: absolute;bottom: 10px;left: 23px;height: 20px;width: 4px;border-radius: 2px;background-color: black;transform: rotate(45deg) scale(80%);transition: all 0.3s ease;}.roundBtn:hover .icon {width: 20px;}.roundBtn:hover .arrow::before {transform: translateX(20px) rotate(-45deg) scale(80%);}.roundBtn:hover .arrow::after {transform: translateX(20px) rotate(45deg) scale(80%);}.roundBtn .text {display: inline-block;position: absolute;left: 50px;top: 0px;width: 80px;height: 50px;line-height: 50px;text-align: center;}.roundBtn:hover {width: 150px;}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/830534.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

GPS时钟服务器(北斗授时设备)助某数据中心项目部署

GPS时钟服务器&#xff08;北斗授时设备&#xff09;助某数据中心项目部署 GPS时钟服务器&#xff08;北斗授时设备&#xff09;助某数据中心项目部署 1.1 项目概述 本次某数据中心时间同步项目中&#xff0c;设计目标是为了满足该数据中心同一区域数万台设备的时间高精度同步要…

[Android] 使用 android 自带的 hidl 共享内存接口,Ashmem

Android 提供了 一个共享内存服务 android::hidl::allocator::V1_0::IAllocator / android::hidl::memory::V1_0::IMemory&#xff0c; 通过这个接口可以向 android 直接请求共享内存。使用此方法可以更加方便和安全地在 android 系统中使用共享内存&#xff0c;而不需要使用 p…

速成python

一个只会c的苦手来总结一下py的语法。没有其他语法基础的不建议看 1. 输入输出 print自带换行&#xff0c;可以写print("Hi", end"")取消换行 a input(你好:) # 默认是str print(type(a)) # 输出a的类型 a int(input()) # 或者a int(a) print(type(…

华为海思校园招聘-芯片-数字 IC 方向 题目分享——第七套

华为海思校园招聘-芯片-数字 IC 方向 题目分享——第七套 (共9套&#xff0c;有答案和解析&#xff0c;答案非官方&#xff0c;未仔细校正&#xff0c;仅供参考&#xff09; 部分题目分享&#xff0c;完整版获取&#xff08;WX:didadidadidida313&#xff0c;加我备注&#x…

前端页面单元测试最佳策略:全面涵盖逻辑、组件、流程、UI及性能优化测试,全面保障软件应用的质量

页面级别的测试要求我们从更宏观的角度审视应用&#xff0c;不仅关注单个组件的正确性&#xff0c;还要确保组件间的协作无误&#xff0c;以及用户在应用中的完整体验。通过集成测试、E2E测试和场景测试&#xff0c;我们可以更全面地覆盖应用的各种使用情况&#xff0c;提高软件…

深入浅出一文图解Vision Mamba(ViM)

文章目录 引言&#xff1a;Mamba第一章&#xff1a;环境安装1.1安装教程1.2问题总结1.3安装总结 第二章&#xff1a;即插即用模块2.1模块一&#xff1a;Mamba Vision代码&#xff1a;models_mamba.py运行结果 2.2模块二&#xff1a;MambaIR代码&#xff1a;MambaIR运行结果 第三…

力扣练习4.29-30

86. 分隔链表 解题思路&#xff1a;设置两个链表&#xff0c;分别装小于x和>x的节点&#xff0c;最后将两个链表拼接。 步骤&#xff1a; 1.初始化两个新链表的头结点和指针节点&#xff0c;初始化链表的指针节点 2.遍历变量&#xff0c;如果是小于x&#xff0c;就将第一个…

深入浅出TCP 与 UDP

&#x1f525; 引言 在互联网的广阔天地里&#xff0c;TCP&#xff08;Transmission Control Protocol&#xff09;和UDP&#xff08;User Datagram Protocol&#xff09;作为传输层的两大支柱&#xff0c;各自承担着不同的使命。下面这篇文章将带你从基础到进阶&#xff0c;全…

什么是 Java 集合,Java 集合有几类?

Java集合&#xff08;Java Collections&#xff09;是Java编程语言中一组用于存储和操作数据的框架。它提供了一种便捷的方式来管理和操作数据集合&#xff0c;无论是数组还是其他数据结构。Java集合框架被设计为通用的、可扩展的&#xff0c;并且具有高性能。它为开发人员提供…

a-table导出excel.xlsx文件,含合并表头处理

1、安装 npm install xlsx // 0.15.62、封装tableExport.js import {utils, writeFile } from xlsxexport function tableExport(tableDom, name) {const dom = document.querySelector(.ant-table-fixed-left);const parentDom = dom.parentNodeparentDom?.removeChild(d…

Windows如何启动和停止etw事件监听

Windows如何启动和停止etw事件监听 关于Etw ETW是Event Tracing for Windows的简称&#xff0c;它是Windows提供的原生的事件跟踪日志系统。由于采用内核&#xff08;Kernel&#xff09;层面的缓冲和日志记录机制&#xff0c;所以ETW提供了一种非常高效的事件跟踪日志解决方案…

查表法处理sin,cos,tan函数-360到360度的值

1、把处理函数放到sincostan.h头文件中 /*********************************公式计算********************************/ /* 1.诱导公式 sin(-a)-sin(a) cos(-a)cos(a) sin(π2-a)cos(a) cos(π2-a)sin(a) sin(π2a)cos(a) cos(π2a)-sin(a) sin(π-a)sin(a) cos(π-a)-cos(a)…

解决Linux CentOS 7安装了vim编辑器却vim编辑器不起作用、无任何反应

文章目录 前言一、解决vim不起作用&#xff08;卸载重新安装&#xff09;1.重新安装vim2.测试vim是否能正常使用 二、解决vim: error while loading shared libraries: /lib64/libgpm.so.2: file too short报错三、解决vim编辑器不能使用方向键和退格键问题 remove vim-common …

线上线下收银一体化,新零售POS系统引领连锁门店数字化转型-亿发

在市场竞争日益激烈的背景下&#xff0c;没有哪个商家能够永远屹立不倒。随着互联网技术的快速发展&#xff0c;传统的线下门店面临着来自电商和新零售的新型挑战。实体零售和传统电商都需要进行变革&#xff0c;都需要实现线上线下的融合。 传统零售在客户消费之后就与商家失…

Java 为什么设计成 “String” 不能用 “==” 比较值?

Java中的String是一种特殊的对象类型&#xff0c;用于表示字符串。在Java中&#xff0c;String对象的创建和比较是一个重要的话题&#xff0c;其中&#xff0c;操作符在比较String对象时有着特殊的行为。为了了解Java为什么设计成String不能用比较值&#xff0c;需要深入探讨Ja…

数据结构八:线性表之循环队列的设计

上篇博客&#xff0c;学习了栈&#xff0c;我们可以知道他也是一种线性表&#xff0c;遵从先进后出的原则&#xff0c;在本节&#xff0c;我们进一步学习另一种线性表—队列。就像饭堂里排队打饭的的队伍&#xff0c;作为一种先进先出的线性表&#xff0c;他又有哪些特别之处呢…

公网ip申请ssl仅260

现在很多网站都已经绑定域名&#xff0c;因此使用的都是域名SSL证书保护网站传输信息安全&#xff0c;而没有绑定域名只有公网IP地址的网站想要保护传输信息安全就要申请IP SSL证书。IP SSL证书也是由正规CA认证机构颁发的数字证书&#xff0c;用来保护用户的隐私以及数据安全&…

FLUKE万用表17B+的电压档最大内阻

项目中遇到一个测量兆欧级别电阻两端电压的问题&#xff0c;发现按照上图中的电路搭建出来的电路测得的电压为8.25V左右&#xff0c;按理说应为9V才对&#xff0c;后来想到万用表测量电压档不同的档位会有不同内阻&#xff0c;测量的电阻应远小于万用表电压档内阻才有效。本次测…

Creo Assembly “Save As“时,为什么关联的Drawing无法Save As

问题描述&#xff1a; Creo Assembly 进行“另存为”&#xff0c;勾选了“Copy Drawings”。但操作结果是&#xff0c;该Assembly相关联的Drawing没有被“另存为”。 原因分析&#xff1a; 查看Workspace&#xff0c;发现该Assembly a.asm相关联的Drawing为b.drw&#xff0…

【软测学习笔记】Linux入门Day02

&#x1f31f;博主主页&#xff1a;我是一只海绵派大星 &#x1f4da;专栏分类&#xff1a;软件测试笔记 &#x1f4da;参考教程&#xff1a;黑马教程❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 1、history 查看历史命令 2、ln 链接 3、grep 查找文件内容 4、find …