带有图标的按钮向右倾斜 - CSS

在Web应用程序中，我们经常需要使用按钮来触发一些操作或导航到其他页面。而在设计这些按钮时，我们往往需要添加图标来表示按钮的功能。此外，为了使按钮看起来不那么平凡，我们还需要添加一些样式效果。

本文将介绍如何使用CSS来创建一个带有图标的按钮，并且按钮可以向右倾斜。我们会介绍如何利用CSS的transform属性来实现按钮的倾斜效果，并使用伪元素来添加图标。

创建带有图标的按钮

我们首先需要创建我们的按钮。为此，我们可以使用HTML的button元素。以下是一个基本的按钮：

<button>按钮</button>

现在我们需要添加一些CSS样式来对按钮进行呈现。我们可以使用CSS的background属性来设置按钮的背景颜色，使用border-radius属性来设置按钮的圆角，以及使用padding属性来设置按钮的内部填充。以下是一个基本的样式：

button {
  background: #4169E1;
  border-radius: 5px;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

这将创建一个蓝色的按钮，并具有一些基本的样式，如下图所示：

添加按钮的倾斜效果

现在我们需要将按钮倾斜到右侧。为此，我们可以使用CSS的transform属性。transform属性可以用来旋转、缩放、平移或倾斜元素。以下是将按钮倾斜15度的CSS样式：

button {
  /* ... */
  transform: skewX(15deg);
}

这将会使按钮向右倾斜15度，如下图所示：

但是，现在按钮的文本也被倾斜了。为了使文本保持垂直，我们需要对文本进行反向倾斜。以下是将文本反向倾斜15度的CSS样式：

button {
  /* ... */
  transform: skewX(15deg);
}

button span {
  transform: skewX(-15deg);
  display: inline-block;
}

这将使按钮保持倾斜，而文本垂直显示，如下图所示：

添加图标

现在我们需要为按钮添加一个箭头图标。为此，我们可以使用CSS的伪元素:before。伪元素:before可以用来在元素的内容之前插入一些内容，如图标。以下是将箭头图标添加到按钮的CSS样式：

button {
	/* ... */
	position: relative;
}

button:before {
	content: "\2192";
	position: absolute;
	left: -20px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 16px;
}

这将在按钮的左侧添加一个箭头图标，并将其相对于按钮进行定位。箭头图标使用CSS的content属性声明，并在符号码 \2192 中引用箭头符号。我们还使用CSS的left属性将图标移动到按钮的左侧，并使用CSS的transform属性在垂直方向上将其居中。

以下是带有箭头图标的倾斜按钮的最终CSS样式：

button {
  background: #4169E1;
  border-radius: 5px;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transform: skewX(15deg);
  position: relative;
}

button span {
  transform: skewX(-15deg);
  display: inline-block;
}

button:before {
  content: "\2192";
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
}

这将创建一个带有图标的向右倾斜按钮，如下图所示：

结论

在本文中，我们探讨了如何使用CSS的transform属性，伪元素:before以及其他CSS属性来创建一个带有图标的向右倾斜按钮。我们开发出了图标的定位，同时解决了文本倾斜的问题。一旦你理解了这个技巧，你可以使用它来创建各种各样的有趣的按钮样式！