Best way to use a right pointing arrow in CSS animation - html

Question

I'm trying to create a continue button that shows a right pointing arrow in a hover state. I also want the arrow to be centered.
I've tried adding .icon-arrow-right:before {content: "&rarr";}
body {
background: #00b894;
}
.btn {
font-size: 14px;
background: none;
padding: 25px 80px;
display: inline-block;
margin: 15px 30px;
position: relative;
border: 3px solid #fff;
color: #fff;
overflow: hidden;
transition: all 0.3s;
}
.btn:before {
position: absolute;
height: 100%;
font-size: 125%;
line-height: 3.5;
color: #fff;
transition: all 0.3s;
left: 130%;
top: 0;
}
.icon-arrow-right:before {
content: "#";
}
.btn:hover:before {
left: 80%;
}
<button class="btn icon-arrow-right">Continue</button>
I would like the arrow to be to the right of the button text in a hover state. I would also like the arrow to be centered with the button text.

Answer 1

Make your pseudo element into the triangle you desire:
.icon-arrow-right:before {
margin-top: 21px;
content: "";
width: 0;
height: 0;
border-top: 7px solid transparent;
border-left: 14px solid white;
border-bottom: 7px solid transparent;
}
This uses the awesome transparent border trick to make the element box appear as a triangle. Change the border widths to alter the size of the triangle, notice the border with color is twice as wide as the transparent sides. You can play with these values to nuance the triangle how you like.
I also changed how you are positioning the text in the button:
.btn {
padding: 0 80px; /* padding on sides only */
height: 64px; /* height of the button you want */
line-height: 58px; /* same as height minus the border-top and border-bottom */
border: 3px solid #fff;
}
By using line-height this way you can guarantee your text will be vertically centered in the button at any font-size.
Check out the full working example:
body {
background: #00b894;
}
.btn {
font-size: 14px;
background: none;
padding: 0 80px; /* padding on sides only */
height: 64px; /* height of the button you want */
line-height: 58px; /* same as height minus the border-top and border-bottom */
display: inline-block;
margin: 15px 30px;
position: relative;
border: 3px solid #fff;
color: #fff;
overflow: hidden;
transition: all 0.3s;
cursor: pointer;
}
.btn:before {
position: absolute;
height: 100%;
font-size: 125%;
line-height: 3.5;
color: #fff;
transition: all 0.3s;
left: 130%;
top: 0;
}
.icon-arrow-right:before {
margin-top: 21px;
content: "";
width: 0;
height: 0;
border-top: 7px solid transparent;
border-left: 14px solid white;
border-bottom: 7px solid transparent;
}
.btn:hover:before {
left: 80%;
}
<button class="btn icon-arrow-right">Continue</button>

Answer 2

I have vertically centered the arrow with top:50%;transform:translateY(-50%);. I removed the line-height and height CSS from the .btn pseudo element because they weren't needed. I have just used > for the arrow, but you can use something like fontawesome to get a nice icon.
body {
background: #00b894;
}
.btn {
font-size: 14px;
background: none;
padding: 25px 80px;
display: inline-block;
margin: 15px 30px;
position: relative;
border: 3px solid #fff;
color: #fff;
overflow: hidden;
transition: all 0.3s;
}
.btn:before {
position: absolute;
font-size: 125%;
color: #fff;
transition: all 0.3s;
left: 130%;
top:50%;
transform:translateY(-50%);
}
.icon-arrow-right:before {
content: ">";
}
.btn:hover:before {
left: 80%;
}
<button class="btn icon-arrow-right">Continue</button>

Answer 3

Just expanding on #BugsArePeopleToo 's answer, using borders ans transforms to keep the ">" shape the OP wanted.
body {
background: #00b894;
}
.btn {
font-size: 14px;
background: none;
padding: 0 80px; /* padding on sides only */
height: 64px; /* height of the button you want */
line-height: 58px; /* same as height minus the border-top and border-bottom */
display: inline-block;
margin: 15px 30px;
position: relative;
border: 3px solid #fff;
color: #fff;
overflow: hidden;
transition: all 0.3s;
cursor: pointer;
}
.btn:before {
position: absolute;
height: 100%;
font-size: 125%;
line-height: 3.5;
color: #fff;
transition: all 0.3s;
left: 130%;
top: 0;
}
.icon-arrow-right:before {
content: "";
width: 0.5em;
height: 0.5em;
position:absolute;
top:50%;
border-top:2px solid #fff;
border-right:2px solid #fff;
transform:translateY(-50%) rotate(45deg);
}
.btn:hover:before {
left: 80%;
}
<button class="btn icon-arrow-right">Continue</button>