【css】css实现一个简单的按钮

news2024/11/23 16:57:50

四种链接状态分别是:

  • a:link - 正常的,未访问的链接
  • a:visited - 用户访问过的链接
  • a:hover - 用户将鼠标悬停在链接上时
  • a:active - 链接被点击时
<style>
a:link, a:visited {//未访问、访问过
  background-color: #07c160;//设置背景颜色
  color: white;//设置字体颜色
  padding: 14px 25px;//设置内边距,上下:14px,右左:25px
  text-align: center; //文本居中
  text-decoration: none; //文本装饰设置没有
  display: inline-block; //设置行内块元素,结合了行内和块级的特点,可以设置长宽,可以让padding和margin生效,和其他行内元素并排
}

a:hover, a:active {//鼠标悬停、点击
  background-color: red;
}
</style>
</head>
<body>

<a href="/index.html" target="_blank" >按钮</a>

</body>

效果:
未鼠标悬停、未点击的效果:
在这里插入图片描述
鼠标悬停:
在这里插入图片描述

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

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

相关文章

吉客云·奇门对接打通金蝶云星空销售单查询接口与销售出库新增接口

吉客云奇门对接打通金蝶云星空销售单查询接口与销售出库新增接口 对接系统&#xff1a;吉客云奇门 “吉客云”是一站式企业数字化解决方案系统&#xff0c;可实现业务、财务、办公、人事等一体化管理。相对于传统多套软件系统的集成方案&#xff0c;“吉客云”具有业务流程更流…

Vue3描述列表(Descriptions)

&#x1f601; 整体功能效果与 ant design vue 保持高度一致 &#x1f601; 包含两种组件&#xff1a;Descriptions 和 DescriptionsItem&#xff08;必须搭配使用&#xff01;&#xff09; APIs Descriptions 参数说明类型默认值必传title描述列表的标题&#xff0c;显示在…

Dos 命令简介

DOS 简介 DOS是Disk Operating System的缩写&#xff0c;即“磁盘操作系统”。DOS主要是一种面向磁盘的系统软件&#xff0c;有了DOS&#xff0c;我们就可以更容易理解怎么给机器下命令&#xff0c;不必去深入了解机器的硬件结构&#xff0c;也不必去死记硬背那些枯燥2进制数字…

图论-简明导读

计算机图论是计算机科学中的一个重要分支&#xff0c;它主要研究图的性质和结构&#xff0c;以及如何在计算机上有效地存储、处理和操作这些图。本文将总结计算机图论的核心知识点。 一、基本概念 计算机图论中的基本概念包括图、节点、边等。图是由节点和边构成的数据结构&am…

二叉树进阶版(C)

文章目录 1.树1.1概念1.2相关定义1.3 表示&#xff08;左孩子右兄弟&#xff09; 2.二叉树2.1概念2.2特殊的二叉树1. 满二叉树&#xff1a;2. 完全二叉树&#xff1a; 2.3二叉树的性质2.4练习 3.二叉树的存储结构1. 顺序存储2. 链式存储 4.完全二叉树的代码实现4.1堆的介绍1.堆…

静态路由下一跳地址怎么确定(基本静态路由配置实验步骤)

什么是静态路由&#xff1f;静态路由是路由的一种方式&#xff0c;路由项由手动配置&#xff0c;而非动态决定。与动态路由不同&#xff0c;静态路由是固定的&#xff0c;不会改变&#xff0c;即使网络状况已经改变或是重新被组态。一般来说&#xff0c;静态路由是由网络管理员…

MySQL做分布式锁

分布式锁mysql实现方式 方式1&#xff1a;唯一索引 创建锁表&#xff0c;内部存在字段表示资源名及资源描述&#xff0c;同一资源名使用数据库唯一性限制。多个进程同时往数据库锁表中写入对某个资源的占有记录&#xff0c;当某个进程成功写入时则表示其获取锁成功其他进程由于…

iOS——Block two

Block 的实质究竟是什么呢&#xff1f;类型&#xff1f;变量&#xff1f;还是什么黑科技&#xff1f; Blocks 是 带有局部变量的匿名函数 Blocks 由 OC 转 C 源码方法 在项目中添加 blocks.m 文件&#xff0c;并写好 block 的相关代码。打开「终端」&#xff0c;执行 cd XX…

Windows 使用 Linux 子系统,轻轻松松安装多个linux

Windows Subsystem for Linux WSL 简称WSL,是一个在Windows 10\11上能够运行原生Linux二进制可执行文件&#xff08;ELF格式&#xff09;的兼容层。它是由微软与Canonical公司合作开发&#xff0c;其目标是使纯正的Ubuntu、Debian等映像能下载和解压到用户的本地计算机&#…

【计算机网络】NAT及Bridge介绍

OSI七层模型 七层模型介绍及举例 为通过网络将人类可读信息通过网络从一台设备传输到另一台设备&#xff0c;必须在发送设备沿 OSI 模型的七层结构向下传输数据&#xff0c;然后在接收端沿七层结构向上传输数据。 数据在 OSI 模型中如何流动 库珀先生想给帕尔梅女士发一封电…

Vue + el-upload阿里云文件上传进度条功能,阿里云文件上传切片进度条功能实现,el-upload文件上传真实进度条

el-upload阿里云文件上传进度条功能&#xff0c;进度条切片功能&#xff0c;做一个记录&#xff0c;此功能查询过其他文档&#xff0c;最终都还是实现不了&#xff08;这是真实进度条&#xff0c;就是根据文件上传过程中文件切片实现的&#xff09; 效果&#xff1a; <t…

电脑黑屏按什么键恢复?掌握这3个按键,轻松解决!

“电脑怎么会突然就黑屏呢&#xff1f;我看综艺看得好好的莫名其妙电脑就黑屏了&#xff0c;怎么按都没有用。电脑黑屏应该怎么解决呢&#xff1f;大佬快帮帮我&#xff01;” 对于电脑黑屏的问题&#xff0c;很多小伙伴应该都不陌生吧。在实际使用电脑的操作中&#xff0c;或许…

干货 | 三款民宿App会员评测,你都用过吗?

为了留存用户&#xff0c;许多旅游住宿类APP都开通了会员权益&#xff0c;对老用户来说&#xff0c;会员等级的提升会为他们带来更多的权益及优惠&#xff0c;那么问题来了&#xff0c;到底哪家的会员优惠更多呢&#xff1f; 根据第三方统计的下载数据来看&#xff0c;APP STO…

云计算与大数据领域新指南 | 《揭秘云计算与大数据》助您驾驭数字化浪潮!

日前&#xff0c;《揭秘云计算与大数据》正式上市。这本由国际知名的技术专家撰写的书籍&#xff0c;将带领读者深入了解云计算和大数据领域的技术前沿和应用趋势&#xff0c;为读者呈现一个全面而深入的视角。 随着信息技术的飞速发展&#xff0c;云计算和大数据作为两大前沿…

iOS——Block回调

先跟着我实现最简单的 Block 回调传参的使用&#xff0c;如果你能举一反三&#xff0c;基本上可以满足了 OC 中的开发需求。已经实现的同学可以跳到下一节。 首先解释一下我们例子要实现什么功能&#xff08;其实是烂大街又最形象的例子&#xff09;&#xff1a; 有两个视图控…

自问自答----WEB篇

目录 1、https和http协议的端口 2、http协议的版本 3、linux中查看报文的方法 3.1 curl www.baidu.com -v 3.2 wget --debug www.baidu.com 4、http有哪些请求方法 5、http的请求头 6、http响应头​编辑 7、状态码有哪些 8、uri和url 9、静态&#xff1f;动态&#x…

第九章 HL7 架构和可用工具 - 查看批量消息

文章目录 第九章 HL7 架构和可用工具 - 查看批量消息查看批量消息Class类有关 HL7 消息类别的详细信息TypeCategoryName 第九章 HL7 架构和可用工具 - 查看批量消息 查看批量消息 如果消息是一组批处理格式的 HL7 消息&#xff0c;而不是单个 HL7 消息&#xff0c;则 HL7 文档…

三星书画联展:三位艺术家开启国风艺术之旅

7月22日&#xff0c;由广州白云区文联、白云区工商联主办的“三星书画联展”&#xff0c;在源美术馆正式开展。本次书画展展出的艺术种类丰富&#xff0c;油画、国画、彩墨画、书法等作品异彩纷呈。广东省政协原副主席、农工党省委书画院名誉院长马光瑜&#xff0c;意大利艺术研…

小程序安全性加固:如何保护用户数据和防止恶意攻击

第一章&#xff1a;引言 在当今数字化时代&#xff0c;移动应用程序的使用已经成为人们日常生活中的重要组成部分。小程序作为一种轻量级的应用程序形式&#xff0c;受到了广泛的欢迎。然而&#xff0c;随着小程序的流行&#xff0c;安全性问题也日益凸显。用户数据泄露和恶意攻…

SpringBoot项目修改中静态资源,只需刷新页面无需重启项目(附赠—热加载)

初衷 &#x1f4a2;初衷&#x1f4a2; 因为一遍遍修改并重启项目觉得很麻烦&#xff0c;所以刚开始就自己给项目配置了热加载&#xff0c;但奈何代码更新还是慢&#xff0c;还不如我重启一遍项目的速度&#xff0c;所以放弃了自己上网找到的热加载配置。直到我debugger前端代码…