18 悬浮按钮
2024-01-01 07:43:31
效果演示
实现了一个按钮的悬浮效果,当鼠标悬停在按钮上时,按钮的背景颜色和边框半径会变大,同时按钮中的文字会变成白色。当鼠标点击按钮时,按钮会变得较小。
Code
<button class="cta">
<span>Hover me</span>
<svg viewBox="0 0 13 10" height="10px" width="15px">
<path d="M1,5 L11,5"></path>
<polyline points="8 1 12 5 8 9"></polyline>
</svg>
</button>
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #e8e8e8;
}
.cta {
position: relative;
margin: auto;
padding: 12px 18px;
transition: all 0.2s ease;
border: none;
background: none;
}
.cta:before {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
border-radius: 50px;
background: #b1dae7;
width: 45px;
height: 45px;
transition: all 0.3s ease;
}
.cta span {
position: relative;
font-family: "Ubuntu", sans-serif;
font-size: 18px;
font-weight: 700;
letter-spacing: 0.05em;
color: #234567;
}
.cta svg {
position: relative;
top: 0;
margin-left: 10px;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
stroke: #234567;
stroke-width: 2;
transform: translateX(-5px);
transition: all 0.3s ease;
}
.cta:hover:before {
width: 100%;
background: #b1dae7;
}
.cta:hover svg {
transform: translateX(0);
}
.cta:active {
transform: scale(0.95);
}
实现思路拆分
body {
height: 100vh; /* 设置body高度为视口高度 */
display: flex; /* 设置body元素为flex布局 */
justify-content: center; /* 设置主轴居中对齐 */
align-items: center; /* 设置交叉轴居中对齐 */
background-color: #e8e8e8; /* 设置背景颜色为#e8e8e8 */
}
这段代码设置了整个页面的样式,包括高度、布局方式、对齐方式和背景颜色。
.cta {
position: relative; /* 设置元素为相对定位 */
margin: auto; /* 设置元素水平和垂直居中 */
padding: 12px 18px; /* 设置元素内边距 */
transition: all 0.2s ease; /* 设置过渡效果 */
border: none; /* 设置边框为none */
background: none; /* 设置背景为none */
}
这段代码设置了按钮的样式,包括位置、内边距、过渡效果、边框和背景。
.cta:before {
content: ""; /* 设置伪元素的内容为空 */
position: absolute; /* 设置伪元素为绝对定位 */
top: 0; /* 设置伪元素距离顶部为0 */
left: 0; /* 设置伪元素距离左侧为0 */
display: block; /* 设置伪元素为块级元素 */
border-radius: 50px; /* 设置伪元素的圆角半径为50px */
background: #b1dae7; /* 设置伪元素的背景颜色为#b1dae7 */
width: 45px; /* 设置伪元素的宽度为45px */
height: 45px; /* 设置伪元素的高度为45px */
transition: all 0.3s ease; /* 设置伪元素的过渡效果 */
}
这段代码设置了按钮的伪元素样式,包括内容、位置、大小、圆角半径、背景颜色和过渡效果。
.cta span {
position: relative; /* 设置元素为相对定位 */
font-family: "Ubuntu", sans-serif; /* 设置字体为Ubuntu */
font-size: 18px; /* 设置字体大小为18px */
font-weight: 700; /* 设置字体粗细为700 */
letter-spacing: 0.05em; /* 设置字母间距为0.05em */
color: #234567; /* 设置字体颜色为#234567 */
}
这段代码设置了按钮中的文字样式,包括位置、字体、字体大小、字体粗细、字母间距和字体颜色。
.cta svg {
position: relative; /* 设置元素为相对定位 */
top: 0; /* 设置元素距离顶部为0 */
margin-left: 10px; /* 设置元素左侧外边距为10px */
fill: none; /* 设置元素内部填充为none */
stroke-linecap: round; /* 设置元素线帽为圆形 */
stroke-linejoin: round; /* 设置元素线连接点为圆形 */
stroke: #234567; /* 设置元素线条颜色为#234567 */
stroke-width: 2; /* 设置元素线条宽度为2px */
transform: translateX(-5px); /* 设置元素向左移动5px */
transition: all 0.3s ease; /* 设置元素的过渡效果 */
}
这段代码设置了按钮中的图标样式,包括位置、内边距、填充、线帽、线连接点、线条颜色、线条宽度、移动距离和过渡效果。
.cta:hover:before {
width: 100%; /* 设置伪元素的宽度为100% */
background: #b1dae7; /* 设置伪元素的背景颜色为#b1dae7 */
}
这段代码设置了按钮悬停时的样式,包括伪元素的宽度和背景颜色。
.cta:hover svg {
transform: translateX(0); /* 设置图标在悬停时向右移动0px */
}
这段代码设置了按钮悬停时图标向右移动的效果。
.cta:active {
transform: scale(0.95); /* 设置按钮在点击时放大0.95倍 */
}
这段代码设置了按钮在点击时放大0.95倍的效果。
文章来源:https://blog.csdn.net/weixin_72553980/article/details/135312819
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!