CSS 按钮浮动

在本文中，我们将介绍 CSS 按钮浮动的知识点以及如何使用它们来创建漂亮的按钮。

阅读更多：CSS 教程

浮动属性

浮动是一种布局技术，可以将元素从其正常的文档流中移除并放置在其包含块的左侧或右侧。CSS 中有三种浮动属性：左浮动、右浮动和无浮动。

左浮动

左浮动的语法如下：

float: left;

举个例子，我们可以用以下代码创建一个左浮动的按钮：

<button class="float-left">按钮</button>

.float-left {
  float: left;
  margin-right: 10px;
}

在上面的代码中，我们使用了浮动属性 float: left，将按钮元素从其正常的文档流中移除并放置在其包含块的左侧。我们还添加了 margin-right: 10px，使按钮与其右侧元素之间添加一定的间距。

右浮动

右浮动的语法和左浮动一样，只需要将 left 替换成 right 即可。

float: right;

以下代码是一个右浮动的按钮示例：

<button class="float-right">按钮</button>

.float-right {
  float: right;
  margin-left: 10px;
}

与左浮动类似，我们使用了右浮动属性 float: right，并添加了 margin-left: 10px，使按钮与其左侧元素之间添加一定的间距。

无浮动

如果一个元素没有浮动属性，它将位于其包含块的文档流中。

float: none;

以下代码展示了一个无浮动的按钮：

<button class="no-float">按钮</button>

.no-float {
  float: none;
  margin: 0 10px;
}

在上述代码中，我们使用了无浮动属性 float: none，并添加了 margin: 0 10px 来设置按钮的外边距，使其与其左右元素保持一定的间距。

按钮样式

除了基本的浮动属性，我们还可以使用样式来自定义 CSS 按钮的外观。下面是几个常用的 CSS 按钮样式。

边框按钮

我们可以使用边框属性来创建一个简单的的按钮，并为其设置不同的颜色。

<button class="border-button">按钮</button>

.border-button {
  border: 2px solid #000;
  padding: 10px 20px;
  background-color: transparent;
  color: #000;
}

在上述代码中，我们通过 border 属性为按钮添加了黑色的边框，设置按钮的内边距为 10px 20px，使其更容易被点击。我们使按钮的 background-color 为透明，避免其背景与页面的其他元素产生冲突。最后，我们使用 color 属性为按钮文字设置了黑色。

圆角按钮

圆角按钮的外观比边框按钮更加现代化，并可以用圆角属性轻松地创建。

<button class="rounded-button">按钮</button>

.rounded-button {
  border: none;
  padding: 10px 20px;
  background-color: #000;
  color: #fff;
  border-radius: 5px;
}

在上述代码中，我们通过 border 属性将边框设为 none，从而取消边框；并设置了按钮的内边距。由于我们将按钮的 background-color 设为了黑色，我们使用了color属性将文字设置为白色。最后，我们使用border-radius` 属性添加了一个 5 像素的圆角效果。

3D按钮

3D 按钮的外观非常吸引人，可以通过投影、渐变和细微的阴影效果来实现。

<button class="threed-button">按钮</button>

.threed-button {
  border: none;
  padding: 10px 20px;
  background: linear-gradient(to bottom, #70bbd9 0%, #006dae 100%);
  color: #fff;
  text-shadow: 0px 1px #000, 1px 0px #000, 1px 1px #000;
  box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.2), 0px 4px 0px 0px rgba(0, 0, 0, 0.1), 0px 5px 0px 0px rgba(0, 0, 0, 0.1);
  transform: translate(0, 5px);
}

在上述代码中，我们通过 border 属性将边框设为空，从而取消了边框。我们使用了 background 属性添加了一个垂直渐变背景效果。我们使用了 text-shadow 属性为文字添加了超细的阴影效果，使其在页面上更加突出。我们还使用了 box-shadow 属性添加了一些微妙的投影和阴影效果。最后，我们使用了 transform 属性将按钮向下移动 5px。