I'm trying to create a button with CSS where the design adds a box shadow to frame the right that remains in position with the icon. On hover the button extends to the right creating the effect that you are pulling a tab. However, I'm struggling on the element of adding an icon.

EDIT: Icon is added, however, how do you remove white space in anchor links? For example, if I set padding top and bottom to 0px, how does the text not touch the top & bottom of background colour? There appears to be dead space.

CodePen Link

<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;
}

CodePudding user response：

First, add position: relative; with your button code

And use this code:

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