Display >> in my button hover

HTML & CSS
1

Good morning,

I don’t understand why in my “Register” button I don’t see the hover effect “>>”
Do you have an idea ?

**index.html**
 <div class="link_buttons">
      <a href="#">Login</a>
      <a href="#" class="orange_link"><span>S'inscrire </span></a>
  </div>

style.css

.link_buttons a {
    margin-left: 15px;
}

.link_buttons a:first-child {
    color: #f26440;
}

.orange_link {
    color: #fff;
    padding: 8px 30px;
    background-color: #f26440;
    border-radius: 4px;
    text-transform: capitalize;
    cursor: pointer;
}

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

.orange_link:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
}

.orange_link:hover span {
    padding-right: 25px;
}

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

your opacity isnt on the span.

.orange_link:after ← after on the A

orange_link:hover span:after ← after on the span.

1 Like
3

Ok thank you and I have to delete this line?

4

It should be:

.orange_link:hover:after {
    opacity: 1;
    right: 0;
}
1 Like
5

I tried your solution and I still don’t have the “>>” characters in the button

.orange_link {
    color: #fff;
    padding: 8px 30px;
    background-color: #f26440;
    border-radius: 4px;
    text-transform: capitalize;
    cursor: pointer;
}

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

.orange_link:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
}

.orange_link:hover span {
    padding-right: 25px;
}

.orange_link:hover:after {
    opacity: 1;
    right: 0;
}
6

Its there but you can’t see it because its oustide the button.

Do this instead:

.orange_link span:after {
  content: "\00bb";
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.orange_link:hover span {
  padding-right: 25px;
}
.orange_link:hover span:after {
  opacity: 1;
  right: 0;
}

(You don’t really need the span but I guess you have a reason for it.)

2 Likes
7

It works thank you very much for your help

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.