将图标添加到 CSS 下拉标签按钮的右侧

Question

我正在尝试使用 CSS 创建一个按钮，其中设计添加了一个框阴影来框住与图标保持在适当位置的右侧。悬停时，按钮会向右延伸，从而产生您正在拉动标签的效果。但是，我在添加图标的元素上苦苦挣扎。

编辑：添加了图标，但是，如何删除锚链接中的白色 space？例如，如果我将 padding top 和 bottom 设置为 0px，文本如何不触及背景颜色的顶部和底部？似乎已经死了 space。

<a class="button" href="" title="">Terms &amp; Conditions<span></a>

CSS

a.button {
display: inner-block;
wdith: 100%;
padding: 0em 4.5em 0em 1em;
background: linear-gradient(90deg, #7D80DA, #8EEDF7);
  text-align: center;   
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-decoration: none;
  border: none;
  border-radius: 5px;
  box-shadow: inset -35px 0px 0px #7d80da;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}

a.button:after {
content: "\f0a4";
font-family: FontAwesome;
font-size: 15px;
position: absolute;
right: 4%;
}

a.button:hover {
  padding-right: 8em;
}

Answer 1

首先，添加 position: relative; 和您的按钮代码

并使用此代码：

a.button:after{ 
   content: '»';
   position: absolute;
   right: -30px; 
   /*Your more css here*/
}

将图标添加到 CSS 下拉标签按钮的右侧

Adding Icon to Right Side of CSS Pull Tab Button

html

css

button