CSS技巧专栏:一日一例 3.纯CSS实现炫酷多彩按钮特效

大家好,今天是 CSS技巧专栏:一日一例 第三篇《纯CSS实现炫酷多彩按钮特效》

先看图:

开工前的准备工作

正如昨日所讲,为了案例的表现,也处于书写的习惯,在今天的案例开工前,先把昨天的准备工作重做一遍。

  1. 清除浏览器的默认样式
  2. 定义页面基本颜色
  3. 设定body的样式
  4. 清除button控件的默认边框
  5. 给按钮安一个家

好了,具体过程请参考本专栏第一篇的文章:《CSS技巧 - 一日一例 (1):会讨好的热情按钮》。废话不多说,我们开工!

开工啦!

第一步:基本页面布局

<div class="container"><button class="base" >酷炫多彩的按钮</button>
</div> 

第二步:按钮基本样式

这里于昨天的样式也是一样的,我在前的文章说过:为了实现更多按钮的案例,我把大多数按钮通用的样式写在了一起。今天,再把它复制过来。

.base{position: relative;   padding: 1rem 3rem; /* 用 padding 撑起按钮的宽度和高度 ,并确保了按钮文字水平方向居中 */font-family: "微软雅黑", sans-serif;font-size: 1.5rem;  line-height: 1.5rem; /* 行高和字号大小相等,可以实现按钮文字在按钮内垂直居中 */ font-weight:700;color: var(--color);  /* 文字颜色为预定义的前景色 */cursor: pointer;   /* 鼠标移动到按钮上时候的形状:手型 */user-select: none;  /* 让用户不能选择按钮上的文字 */white-space: nowrap; /* 避免英文单词间的空格导致文字换行 */border-radius: 2rem; text-decoration: none; text-transform:uppercase; /* 字母自动修正为大写 */transition: all .5s; /* 按钮响应动画效果的持续时间 */
}

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

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

相关文章

云视频监控中的高效视频转码策略:视频汇聚EasyCVR平台H.265自动转码H.264能力解析

随着科技的快速发展&#xff0c;视频监控技术已经广泛应用于各个领域&#xff0c;如公共安全、商业管理、教育医疗等。与此同时&#xff0c;视频转码技术作为视频处理的关键环节&#xff0c;也在不断提高视频的质量和传输效率。 一、视频监控技术的演进 视频监控技术的发展历…

SEO之网站结构优化(一)

初创企业搭建网站的朋友看1号文章&#xff1b;想学习云计算&#xff0c;怎么入门看2号文章谢谢支持&#xff1a; 1、我给不会敲代码又想搭建网站的人建议 2、新手上云 网站内的优化大致可以分为两部分&#xff0c;一是网站结构调整&#xff0c;二是页面上针对关键词的相关性优化…

前端八股文 闭包的理解

什么是闭包 闭包是指有权访问另一个函数作用域中的变量的函数 ——《JavaScript高级程序设计》 &#xff08;闭包 内层函数 引用的外层函数的变量&#xff09; 下面就是一个简单的闭包 闭包不一定必须有 return 闭包不一定有内存泄漏 闭包 什么时候用到 return 就是 外部…

apache python使用

修改httpd.conf文件。 AddHandler cgi-script .cgi .py 代码 #!自己的python.exe #-*- coding:UTF-8 -*- print ("Content-type:text/html") print () print (<html>) print (<head>) print (<meta charset"gb2312">) print (<tit…

【排序 - 直接选择排序】

选择排序&#xff08;Selection Sort&#xff09;是一种简单直观的排序算法&#xff0c;虽然不如快速排序或归并排序高效&#xff0c;但它易于理解和实现&#xff0c;适用于小型数据集合。 选择排序原理 选择排序的基本思想是每次从未排序的数据中选出最小&#xff08;或最大…

QGroundControl连接运行在Docker中的PX4固件模拟器

1.通过docker启动PX4无人机 docker run --rm -it jonasvautherin/px4-gazebo-headless:1.14.3 启动成功&#xff1a; PX4完全启动OK如下&#xff1a; 会看到pxh> INFO [commander] Ready for takeoff! 执行takeoff指令 查看运行docker容器与QGC客户端的主机IP&#xff1a; …

【HarmonyOS NEXT】鸿蒙 代码混淆

代码混淆简介 针对工程源码的混淆可以降低工程被破解攻击的风险&#xff0c;缩短代码的类与成员的名称&#xff0c;减小应用的大小。 DevEco Studio提供代码混淆的能力并默认开启&#xff0c;API 10及以上版本的Stage模型、编译模式为release时自动进行代码混淆。 使用约束 …

【企业级监控】Docker部署Zabbix与监控主机

基于Docker部署Zabbix6.2 文章目录 基于Docker部署Zabbix6.2资源列表基础环境一、首先安装Docker1.1、部署Docker1.2、配置Docker加速器 二、部署Zabbix组件介绍三、部署Zabbix3.1、安装数据库容器3.2、安装zabbix-java-gateway3.3、安装zabbix-server3.4、安装zabbix-web界面3…

从零开始实现大语言模型(四):简单自注意力机制

1. 前言 理解大语言模型结构的关键在于理解自注意力机制(self-attention)。自注意力机制可以判断输入文本序列中各个token与序列中所有token之间的相关性&#xff0c;并生成包含这种相关性信息的context向量。 本文介绍一种不包含训练参数的简化版自注意力机制——简单自注意…

JMH324-免费【最后一战LOL】MOBA竞技版本+单机一键端+视频教程+文本教程

资源介绍&#xff1a; 修改前打开【D:\ZHServer】文件夹里的【[1]一键启动.bat】&#xff0c;游戏不要打开&#xff0c;否则修改失败。 修改完以后重启架设程序才会生效。 fball_gamedb1数据库——gameuser数据表 obj_name 角色名 obj_lv 等级 obj_diamond 钻石 obj_gold 8…

ZFT9-7VE8043-Z同期脉冲发送装置100V JOSEF约瑟 柜内安装

ZFT9(PIG)同期脉冲发送装置 系列型号 ZFT9(PIG) 7VE8033同期脉冲发送装置; ZFT9(PIG) 7VE8043同期脉冲发送装置; ZFT9 7VE8033同期脉冲发送装置; ZFT9 7VE8043同期脉冲发送装置; 用途&#xff1a; ZFT9同期脉冲发送装置用于船舶的三相系统&#xff0c;根据发电机和电力系…

为什么要考国际人力资源证书?HR不能不知道!

在人力资源领域中&#xff0c;持有专业的人力资源证书并非铁律般的必需。但不容忽视的是&#xff0c;随着时代的进步和行业的不断演进&#xff0c;越来越多的人力资源专业人员开始重视并追求人力资源资格认证。 一张高含金量的证书让HR在求职市场上更具竞争力&#xff0c;更能…

JavaScript中的执行上下文和原型链

目录 一、执行上下文 1.执行上下文 2.执行上下文栈 3.闭包 1&#xff09;定义 2&#xff09;形成条件 3&#xff09;例子 &#xff08;1&#xff09;例子1&#xff1a;简单闭包 &#xff08;2&#xff09;例子2&#xff1a;闭包与循环 &#xff08;3&#xff09;例子…

mes系统在新材料行业中的应用价值

万界星空科技新材料MES系统是针对新材料制造行业的特定需求而设计的制造执行系统&#xff0c;它集成了生产计划、过程监控、质量管理、设备管理、库存管理等多个功能模块&#xff0c;以支持新材料生产的高效、稳定和可控。以下是新材料MES系统的具体功能介绍&#xff1a; 一、生…

【算法入门-栈】逆波兰表达式求值

&#x1f4d6;逆波兰表达式求值 ✅描述✅扩展&#xff1a;什么是逆波兰表达式✅题解方法一&#xff1a;栈✅题解方法二&#xff08;数组模拟栈&#xff09; 今天又刷了一道题&#xff0c;奥利给 刷题地址&#xff1a; 点击跳转 ✅描述 给定一个逆波兰表达式&#xff0c;求表达…

吹田电气绿色能源 未来可期

在2024年7月的上海慕尼黑电子展上&#xff0c;吹田电气功率分析仪成为了备受瞩目的明星产品。作为电子测试与测量领域的重要工具&#xff0c;功率分析仪在展会上展示了其在绿色能源和高效能量管理方面的最新应用&#xff0c;引发了广泛关注和热议。 领先技术&#xff0c;精准测…

[leetcode]kth-smallest-element-in-a-sorted-matrix 有序矩阵中第k小元素

. - 力扣&#xff08;LeetCode&#xff09; class Solution { public:bool check(vector<vector<int>>& matrix, int mid, int k, int n) {int i n - 1;int j 0;int num 0;while (i > 0 && j < n) {if (matrix[i][j] < mid) {num i 1;j;…

Qt/QML学习-PathView

QML学习 PathView例程视频讲解代码 main.qml import QtQuick 2.15 import QtQuick.Window 2.15Window {width: 640height: 480visible: truetitle: qsTr("Hello World")color: "black"PathView {id: pathViewanchors.fill: parentmodel: ListModel {List…

电厂数字孪生能源数据可视化运维平台开发炫酷且性价比更高

3D数据可视化大屏平台是我们为工厂车间提供的线上展示自定义工具&#xff0c;深度融合了web3D开发建模、AI和图形图像技术&#xff0c;完美还原车间产线布局&#xff0c;让复杂的生产流程和设备运行数据在大屏上直观呈现。 3D可视化数据大屏采用全景3D视角和虚拟现实技术&#…

快速测试electron环境是否安装成功

快速测试electron环境是否安装成功 测试代码正确运行的效果运行错误的效果v22.4.1 版本无法使用v20.15.1版本无法使用v18.20.4 版本无法使用 终极解决办法 测试代码 1.npx create-electron-app my-electron-app 2.cd my-electron-app 3.npm start 正确运行的效果 环境没问题…