CODEWITHSUNDEEP
csshovercss-animations
B.I.
B.I.

Reputation: 123

Create button with hover over arrow displayed on the right hand side

I want to create a button that will display an arrow on hover but I want that arrow to come in from the right and float right within the button regardless of what size the button is.

The below is what I have achieved so far.

.button {
background-color: rgb(37,37,37);
background-image: none;
border-radius: 4px;
border: none;
color: #BEC4C9;
cursor: pointer;
display: block;
fill: none;
font-family: Arial;
font-size: 14px;
font-weight: bold;
height: auto;
line-height: 18.2px;
margin: 5px 1.4px 20px 0;
overflow: hidden;
padding: 5.6px 22.9071px 5.6px 14px;
text-align: left;
vertical-align: baseline;
width: auto;
}

.button span {
cursor: pointer; position: relative; transition: 0.5s;
}

.button span:after {
content: '\►'; position: absolute; opacity: 0; top: 0; right: 0; 
}

.button:hover span {
  padding-right: 23px; color: #ffffff;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}

.buttonAfter {
  background-color: rgb(37,37,37);
  background-image: none;
  border-radius: 4px;
  border: none;
  color: #ffffff;
  cursor: pointer;
  display: block;
  fill: none;
  font-family: Arial;
  font-size: 14px;
  font-weight: bold;
  height: auto;
  line-height: 18.2px;
  margin: 5px 1.4px 20px 0;
  overflow: hidden;
  padding: 5.6px 5px 5.6px 14px;
  text-align: left;
  transition: all 0.5s;
  vertical-align: baseline;
  width: 200px;
}
<button class="button" style="width: 200px;"><span>Hover 1</span></button>
<button class="button" style="width: 140px;"><span>Hover 2</span></button>

<DIV>
  I would like it to look something like the below after hovering
  <DIV class="buttonAfter">
    <SPAN style="float: left;"> Hover after </SPAN><SPAN style="float: right">►</SPAN>
  </DIV>
</DIV>

I'd like the arrow to come in from the right from outside of the element (hidden when it overflows and then visible once it is within the confines of the element) and settle once it is nicely within the box, padded 5px from the right hand margin. I still want the "Hover" to be left aligned.

Any help very gratefully received, thanks a lot in advance.

Upvotes: 0

Views: 4804

Answers (2)

jeh
jeh

Reputation: 577

I like to use pseudo elements for animations like this. I added position:relative to the button and the :after element is position:absolute. I set the :after element off to the right and transparent by default. When the button is hovered the :after element moves to where indicated and fades in.

This method requires a lot less code, the width of the button never matters, and it is browser friendly. I hope this is helpful.

button{
background-color:black;
padding:.5em 1em;
color:white;
position:relative;
overflow:hidden;
}

button:after{
  content:'►';
  font-size:10px;
  color:white;
  position:absolute;
  top:.5em;
  right:-2em;
  opacity:0;
  transition:all .5s ease-in-out;
}

button:hover:after{
right:1em;
opacity:1;
}
<button class="button" style="width: 200px;">Hover 1</button>
<button class="button" style="width: 140px;">Hover 2</button>

Upvotes: 2

Mihai T
Mihai T

Reputation: 17687

You just need to make the span equal in width with it's parent. You can use display:block for that on the span.

Also span is not allowed inside button ( as far as i know ) .

So you can try to use :before on the button or change button to div. Then you can use the :before on the div directly or use it like you do now, on the span

Just position your arrow then how you want. ( using left right translate etc. )

P.S. please do not use float for layout. And please use css ' beautifiers ' to organize your code.

.button {
background-color: rgb(37,37,37);
background-image: none;
border-radius: 4px;
border: none;
color: #BEC4C9;
cursor: pointer;
display: block;
fill: none;
font-family: Arial;
font-size: 14px;
font-weight: bold;
height: auto;
line-height: 18.2px;
margin: 5px 1.4px 20px 0;
overflow: hidden;
padding: 5.6px 22.9071px 5.6px 14px;
text-align: left;
transition: all 0.5s;
vertical-align: baseline;
width: auto;
}

.button span {
cursor: pointer; position: relative; transition: 0.5s;
 width: 100%; display:block;
}

.button span:after {
content: '\►'; position: absolute; opacity: 0; top: 0; left: 0; transition: 0.5s;
}

.button:hover span {
  padding-right: 23px; color: #ffffff;
}

.button:hover span:after {
  opacity: 1;
  left: calc(100% - 23px);
}

.buttonAfter {
  background-color: rgb(37,37,37);
  background-image: none;
  border-radius: 4px;
  border: none;
  color: #ffffff;
  cursor: pointer;
  display: block;
  fill: none;
  font-family: Arial;
  font-size: 14px;
  font-weight: bold;
  height: auto;
  line-height: 18.2px;
  margin: 5px 1.4px 20px 0;
  overflow: hidden;
  padding: 5.6px 5px 5.6px 14px;
  text-align: left;
  transition: all 0.5s;
  vertical-align: baseline;
  width: 200px;
}
<div class="button" style="width: 200px;"><span>Hover 1</span></div>
<div class="button" style="width: 140px;"><span>Hover 2</span></div>

<div>
  I would like it to look something like the below after hovering
  <div class="buttonAfter">
    <span style="float: left;"> Hover after </span><span style="float: right">►</span>
  </div>
</div>

Upvotes: 0

Related Questions