css左下角悬浮按钮 |css seo

.btn {
position: fixed;
bottom: 20px;
left: 20px;
background-color: #2196F3;
color: white;
padding: 10px 15px;
border-radius: 50%;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
cursor: pointer;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #1976D2;
}
.btn::before {
content: "+";
font-size: 30px;
line-height: 30px;
text-align: center;
display: block;
transform: rotate(45deg);
}
@media(max-width: 767px) {
.btn {
bottom: 10px;
left: 10px;
padding: 8px 12px;
font-size: 16px;
}
}

通过使用CSS的position属性和bottom和left属性，可以将按钮定位到页面的左下角。同时，为了让按钮有一些深度感，大家使用了box-shadow属性来给按钮添加阴影效果。

按钮的样式还包括了背景颜色、字体颜色、内边距、边框圆角等。在鼠标悬停到按钮上时，按钮的背景色会变成另外一种颜色。这是通过:hover伪类实现的。

悬浮按钮的最后一个特效是通过:before伪元素实现的。大家使用了content属性来设置按钮里面的加号，同时设置了字体颜色、字体大小、行高和旋转45度的效果。

除了基本样式之外，这个代码还包括了一些响应式设计的元素。当屏幕宽度小于767像素时，按钮会变得更小，并调整padding和font-size属性。