CODEWITHSUNDEEP
htmlcss
the_new_guy
the_new_guy

Reputation: 197

How to change the animation so that the arrows are to the left?

I have generated a button and designed it in such a way that there are 2 arrows which hover over to the right. i'm unable to make it move to the left.

This is the button code.

<button class="button1" routerLink="/home" title="Home"><span> &laquo;Back</span></button>

This is the css code.

.button1 {
    padding:3px;
    border-radius:8px;
    border-style:solid;
    margin-top:-20px;
    display: inline-block;

    background-color: yellow;
    border: none;
    color: black;
    text-align: center;
    font-size: 18px;
    padding: 20px;
    width: 100px;
    transition: all 0.5s;
    cursor: grab;
    margin: 5px;
    top: 1000px;
  }


  .button1 span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;

  }

  .button1 span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
  }
  .button1:active {
    background-color: yellowgreen;
    box-shadow: 0 5px #666;
    transform: translateY(4px);
  }
  .button1:hover span {
    padding-right: 15px;
    float: left;
  }

  .button1:hover span:after {
    opacity: 1;
    left: 10;
  }

I tried editing out so many things. I know the solution is very simple but my brain isn't lighting up. Need your help fellow programmers. Thanks.

Upvotes: 0

Views: 498

Answers (4)

Priyanka
Priyanka

Reputation: 285

.button1 span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    left: 100px;
    transition: 0.5s;
 }
 .button1:hover span:after {
    opacity: 1;
    left: 50px;
 }

Here is working copy of your code: https://codepen.io/pgurav/pen/vYYMXVQ

Upvotes: 1

bmwz110
bmwz110

Reputation: 1

You can try to switch left to right.

Modify the following classes as follows:

.button1 span:after {
  content: '\00ab';
  position: absolute;
  opacity: 0;
  top: 0;
  left: 10px;
  transition: 0.5s;
}

.button1:hover span {
  padding-right: 15px;
}

.button1:hover span:after {
  opacity: 1;
  left: -20px;
}

and delete &laquo; in HTML.

best wishes.

Upvotes: 0

MonkeyScript
MonkeyScript

Reputation: 5121

I believe you want to show the arrows on left like the way you described in your example. This will do the trick.

HTML : 

<button class="button1" title="Home">
    <span>Back</span>
</button>

CSS :

.button1 {
  border-radius:8px;
  border-style:solid;
  margin-top:-20px;
  display: inline-block;
  background-color: yellow;
  border: none;
  color: black;
  text-align: center;
  font-size: 18px;
  padding: 20px;
  width: 100px;
  transition: all 0.5s;
  cursor: grab;
  margin: 5px;
  top: 1000px;
}

.button1 span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button1 span:before {
  content: '\00ab';
  position: absolute;
  opacity: 0;
  top: 0;
  left: -20px;
  transition: 0.5s;
}

.button1:hover span {
  padding-left: 25px;
}

.button1:hover span:before {
  opacity: 1;
  left: 0;
}

Demo : https://stackblitz.com/edit/typescript-tsm2te

Upvotes: 0

xTrimy
xTrimy

Reputation: 823

.button1 {
    padding:3px;
    border-radius:8px;
    border-style:solid;
    margin-top:-20px;
    display: inline-block;

    background-color: yellow;
    border: none;
    color: black;
    text-align: center;
    font-size: 18px;
    padding: 20px;
    width: 100px;
    transition: all 0.5s;
    cursor: grab;
    margin: 5px;
    top: 1000px;
  }


  .button1 span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    padding:0;
    transition: 0.5s;
    left:0;
  }

  .button1 span:after {
    content: '\00ab';
    position: absolute;
    opacity: 0;
    top: 0;
    left: 10px;
    transition: 0.5s;
  }
  .button1:active {
    background-color: yellowgreen;
    box-shadow: 0 5px #666;
    transform: translateY(4px);
  }
  .button1:hover span {
    padding-right: 15px;
  }

  .button1:hover span:after {
    opacity: 1;
    left: -20px;
  }
<button class="button1" routerLink="/home" title="Home"><span> &laquo;Back</span></button>

Upvotes: 1

Related Questions