CSS技巧 - 一日一例 (1):会讨好的热情按钮

题外话:

从今天开始,我准备开设一个新的专栏,专门写 使用CSS实现各种酷炫按钮的方法,本专栏目前准备写40篇左右,大概会完成如下按钮效果:

今天,我来介绍第一个按钮的实现方法:会讨好的热情按钮。为什么我给它起这样的名字呢?你看它像不像一个不停摇尾巴的小黄?当你鼠标移动到它头上,它的文字还会转起来,像是眯起来的萌眼睛。

开工前的准备工作

在制作按钮之前,我们通常要做一件事:清除浏览器的默认样式。相信很多小伙伴都知道该怎么做。我这里就不多说了,简单写几行不影响做按钮的表现就行了。

清除浏览器的默认样式

*{margin:0;padding: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}  

其他需要的CSS

定义页面基本颜色:
:root{--main-bg-color: #222;  /* 背景色*/--color:#000;/* 前景色 */
}
设定body的样式:
body {width:100%;height: auto;background: var(--main-bg-color);   
}
清除button控件的默认边框:
button{outline: 0;border: none;
}
给按钮安一个家:
.container{/* 居中 */position: fixed;  left: 50%;top: 50%;transform: translate(-50%, -50%); 
}

(这一步不是必须的,我只是习惯性的让可见元素在页面居中,这样看起来美观,也不用总往屏幕左上角去歪头或斜眼睛)

好了

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

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

相关文章

29 H3C SecPath F1000 系统(概述)

29 H3C SecPath F1000 系统 系统全局功能(高可靠性 日志设置 报表设置 会话设置 升级中心 Lcense配置 高级虚拟化 管理员 维护 诊断中心 配置指导) 高可靠性 1 vrrp VRRP将局域网内的可以承担网关功能的一组设备划分在一起,组成一个备份组…

【Spring Boot】Spring AOP动态代理,以及静态代理

目录 Spring AOP代理一. 代理的概念二. 静态代理三. JDK代理3.1 重写 invoke 方法进⾏功能增强3.2 通过Proxy类随机生成代理对象 四. CGLIB代理4.1 自定义类来重写intercept方法4.2 通过Enhancer类的create方法来创建代理类 五. AOP源码剖析 总结(重中之重,精华) Sp…

git使用总结

git介绍 Git是一款免费、开源的分布式版本控制系统 ,用于敏捷高效地处理任何或小或大的项目。 Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。 git安装 下载地址 # 推荐使用国内镜像下载 http://npm.taobao.org/mirro…

解决win10报“无法加载文件……profile.ps1,因为在此系统上禁止运行脚本”的问题

打开命令行报错 解决方法 使用管理员权限打开PowerShell:WinX, 选择“Windows PowerShell(管理员)” 输入:Set-ExecutionPolicy -ExecutionPolicy RemoteSigned 输入:y确认修改安全策略 :y确认修改安全策略…

前端学习(三)CSS介绍及选择符

##最近在忙期末考试,因此前端笔记的梳理并未及时更新。在学习语言过程中,笔记的梳理对于知识的加深very vital.因此坚持在明天学习新知识前将笔记梳理完整。 主要内容:CSS介绍及选择符 最后更新时间:2024/7/4 目录 内容&#x…

强化学习的数学原理:值函数近似

在上次课介绍了 TD Learning,实际上这次课依然是介绍 TD ,但是上次是用的表格形式介绍的,这次课我们将会介绍基于函数的方式。 算法其实不太难,难的是思路和想法,另外这一节将引入神经网络。 另外最经典的 Deep Q-le…

AutoDL部署半自动大模型标注工具踩坑实录

效果演示 克隆代码 git clone http://github.com/yoletPig/Annotation-with-SAM.git安装SAM cd segment-anything pip install -e .安装SAM-Tool依赖包 pip install -r requirements.txt下载权重 wget https://dl.fbaipublicfiles.com/segment_anything/sam_vit_h_

论文新思路!双通道卷积神经网络!最新成果准确率近100%

双通道CNN是一种创新的卷积神经网络架构,它能捕捉到比单通道CNN更丰富的信息,从而提高模型的性能和鲁棒性。 具体点讲,传统CNN采用单个卷积层提取特征,形成特征映射;而双通道CNN则通过两个并行卷积层同时处理输入数据…

越来越多用户和商家选择小程序商城的原因是什么?小程序商城怎么搭建?

得益于小程序的便捷性,越来越多的用户选择在小程序商城购物,越来越多的商家也开始搭建自己的小程序商城。背后原因是什么呢?小程序商城怎么搭建? 用户为何青睐小程序商城? 1、便捷性 小程序商城无需下载安装&#xff…

数据结构——二叉树之c语言实现堆与堆排序

目录 前言: 1.二叉树的概念及结构 1.1 特殊的二叉树 1.2 二叉树的存储结构 1.顺序存储 2.链式存储 2. 二叉树的顺序结构及实现 2.1 堆的概念 ​编辑 2.2 堆的创建 3.堆的实现 3.1 堆的初始化和销毁 初始化: 销毁: 插入&…

开源屏幕分享项目:轻量好用无延迟!!【送源码】

想必大家在日常的工作中,会经常需要分享代码、演示项目或者进行在线教学,这就需要一个既高效又便捷的屏幕共享工具。然而,现有的一些解决方案往往存在延迟高、画质差等问题。 今天就分享一个开源的屏幕共享项目 - screego,不但免…

PHP灵活用工任务小灵通微信小程序系统源码

💼灵活赚钱新风尚!灵活用工任务小灵通微信小程序,兼职自由两不误🚀 🔍 一、海量任务,随时随地接单赚外快 还在为找不到合适的兼职而烦恼吗?🤔 灵活用工任务小灵通微信小程序&#…

Java-Sql注入以及如何解决

sql脚本注入: 如果sql语句使用字符串拼接,可能会出现字符串的拼接,导致sql注入。 #是会先进行预编译,传进来的参数通过占位符填入到已经完成编译的语句中去。

paddleocr运行报错?谈谈解决思路。

🏆本文收录于「Bug调优」专栏,主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案,希望能够助你一臂之力,帮你早日登顶实现财富自由🚀;同时,欢迎大家关注&&收藏&&…

代码随想录算法训练营第四十七天|1143.最长公共子序列、 1035.不相交的线、53. 最大子序和、392.判断子序列

1143.最长公共子序列 题目链接:1143.最长公共子序列 文档讲解:代码随想录 状态:一开始没想明白为啥要 max(dp[i - 1][j], dp[i][j - 1]) 思路: 如果text1[i - 1] 与 text2[j - 1]相同,那么找到了一个公共元素&#xff…

亚马逊个人卖家掌控物流,教你在单个ERP端口上实现全自动发货

亚马逊个人卖家可对接20多家国际物流,个人如何发货打单? 大家好,今天介绍这款erp有了订单后怎么发货。个人ERP在选择发货的时候只能选择中转仓,这是要把货发给ERP的商家,由商家代打包,打包费。这块开发了自…

协议转换网关的工作原理-天拓四方

在当今数字化和网络化的社会中,不同系统和设备之间的通信至关重要。然而,由于技术多样性、厂商差异以及应用需求的复杂性,不同的系统和设备常常采用不同的通信协议,这使得它们之间的直接通信变得困难。为了解决这一问题&#xff0…

单片机软件架构连载(5)-队列

前面讲了指针、结构体之类的基础知识。 这篇内容开始,就要对这些基础知识,做一些复杂的应用了,比如说队列。 其实,在2018年的时候,我录制过一套程序架构的视频,里面有手把手写队列的教程,讲了一…

中国计量大学理学院访问赛氪网:共探校企合作新篇章来

2024年7月5日,中国计量大学理学院代表团莅临环球赛乐(北京)科技有限公司,进行了一场深入的调研交流活动。代表团成员包括中国计量大学理学院副院长王义康教授、数据科学系副主任刘学艺副教授以及金世举老师。此次访问旨在进一步强…

暑期限定|get你的联邦学习技能,隐私计算暑期夏令营开启报名!

伴随着数字经济时代的来临,数据的安全流通和隐私保护也迎来了新的发展和挑战。隐私技术作为关键技术,可以在保护数据安全的同时,联合多方进行安全计算。 “隐语”是蚂蚁集团于2022年开源的一套可信隐私计算技术框架,支持了包括多…