HTML&CSS 秘籍：打造超实用按钮工具提示

玄之 · 发表于 2025-2-11 16:26:03

这段代码创建了一个带有工具提示的按钮，通过 CSS 技术实现了工具提示的显示和隐藏效果，为页面添加了用户交互体验。

HTML&CSS

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>公众号关注：前端Hardy</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background: #e8e8e8;
}
.tipbox {
position: relative;
background: #ffffff;
color: #000;
padding: 15px;
border-radius: 10px;
width: 100px;
height: 20px;
font-size: 15px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.tooltip {
position: absolute;
top: 0;
font-size: 11px;
background: #ffffff;
color: #ffffff;
padding: 5px 8px;
border-radius: 5px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
opacity: 0;
pointer-events: none;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.tooltip::before {
position: absolute;
content: "";
height: 8px;
width: 8px;
background: #ffffff;
bottom: -3px;
left: 50%;
transform: translate(-50%) rotate(45deg);
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.tipbox:hover .tooltip {
top: -40px;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.tipbox:hover,
.tipbox:hover .tooltip,
.tipbox:hover .tooltip::before {
background: linear-gradient(320deg, rgb(3, 77, 146), rgb(0, 60, 255));
color: #ffffff;
}
</style>
</head>
<body>
<div class="tipbox">
<span class="tooltip">新增客户、现场、设备</span>
<span>新增+</span>
</div>
</body>
</html>

复制代码

HTML 结构

tipbox: 创建一个类名为“tipbox”的 div 元素，用于包含按钮和工具提示。
tooltip: 创建一个类名为“tooltip”的 span 元素，用于显示工具提示的内容。
span: 创建一个 span 元素，用于显示按钮的文本内容。

CSS 样式

body: 设置页面的边距、填充、高度、显示方式和对齐方式，背景色为浅灰色。
.tipbox: 设置按钮的样式，包括位置、背景、颜色、内边距、边框半径、宽度、高度、字体大小、对齐方式、阴影和鼠标指针样式。
.tooltip: 设置工具提示的样式，包括位置、字体大小、背景、颜色、内边距、边框半径、阴影、透明度和指针事件。
.tooltip::before: 设置工具提示的三角形箭头样式，包括位置、内容、尺寸、背景和旋转。
.tipbox:hover .tooltip: 设置鼠标悬停在按钮上时工具提示的样式，使其显示并调整位置。
.tipbox:hover, .tipbox:hover .tooltip, .tipbox:hover .tooltip::before: 设置鼠标悬停在按钮上时按钮和工具提示的背景渐变和颜色。