Portofolio Page Project

1

So I’m trying to create an transform on hover for a button, but it doesn’t happen anything. I’m definitely doing something wrong… Can you check my code please? thanks

<style>
.container{
    text-align: center;
    padding-top: 100px;
}
#profile-link{
    text-decoration: none;
    background-color: #303841;
    max-width: 130px;
    margin:auto;
    color: #fff;
    padding: 20px 50px;
    font-size: 1.5em;
    font-weight: 700;
}
#profile-link:hover{
    background-color: #BE3144;
    transition: all 0.3s ease-in;
}
#profile-link span{
    transition: transform 0.3s ease-out;
    transform: translateX(0px);
    margin-left: 10px;
}
#profile-link:hover span{
    transform: translateX(10px);
    transition: transform 0.3s ease-out;
}
</style>
<div class="container">
                    <a href="" id="profile-link">Show all <span class="chevron">></span></a>
                </div>

I’m trying to move the span 10px to right on hover

2

Your <span> is an inline element.

Try changing its display to different one which is not an inline.

1 Like
3

changed to inline-block. It’s working !! :slight_smile:

4

Congrats! :+1:
:muscle: :muscle: :muscle: