CSS网页导航按钮：创建多样化的导航按钮样式

扁平按钮（Flat Button）
扁平按钮是指没有立体感和阴影效果的按钮样式。它们通常具有简洁、干净的外观，适用于现代和简约风格的网页。下面是一个扁平按钮的代码示例：

.flat-button {
  background-color: #3498db;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

这个示例中，我们使用了background-color和color属性来定义按钮的背景色和文字颜色，padding属性用于设置按钮的内边距，border属性和border-radius属性用于定义按钮的边框样式和圆角，cursor属性指定鼠标在按钮上的样式为手型。

三维按钮（3D Button）
三维按钮通过使用阴影和渐变效果来给按钮增加立体感，使其看起来更具层次感和质感。下面是一个三维按钮的代码示例：

.3d-button {
  background: linear-gradient(to bottom, #3498db, #2980b9);
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

在这个示例中，我们使用了linear-gradient属性来创建按钮的渐变背景色，box-shadow属性用于添加按钮的阴影效果。通过调整渐变的起始和结束颜色，可以实现不同的按钮效果。

悬浮按钮（Floating Button）
悬浮按钮是一种悬浮在内容上方的按钮样式，常见于移动设备上的应用程序中。它们通常具有圆形的外观和突出的阴影效果，给人一种浮在页面上的感觉。下面是一个悬浮按钮的代码示例：

.floating-button {
  background-color: #3498db;
  color: #fff;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  position: fixed;
  bottom: 20px;
  right: 20px;
  cursor: pointer;
}

在这个示例中，我们设置了按钮的宽度和高度为60px，使用了border-radius属性将按钮的形状定义为圆形，通过box-shadow属性添加按钮的阴影效果。使用position属性将按钮固定在页面的右下角。