Animate a CSS3 button to shift from the right to the left upon hover

Question

Animate a CSS3 button to shift from the right to the left upon hover

I'm attempting to recreate the button effect seen on the right side of this website.

Starting position :

https://i.sstatic.net/TON94.jpg

End position after animation :

https://i.sstatic.net/UhrZ3.jpg

Here is my HTML code :

<div id="btnFeedbackHome">
            <div><img src="img/home_feedback.png" id="feedbackImgHomeBtn" /></div>
            <p>Ideas & feedback</p>
        </div>

And CSS :

#btnFeedbackHome {
    width: 180px;
    height: 45px;
    position: absolute;
    top: 320px;
    right: 0;
    background-color: #35BDCF;
    cursor: pointer;
}

#btnFeedbackHome p{
    color: white;
    font-weight: 600;
    position: absolute;
    top: 1px;
    right: 8px;
    font-size: 14px;
}

#btnFeedbackHome div{
    width: 45px;
    background-color: #2A97A6;
    height: 45px;
}

#feedbackImgHomeBtn {
    margin-top: 9px;
    margin-left: 7px;
}

Currently, my code displays the end position but I am unsure how to achieve the same transformation effect on my div.

Can anyone assist me with this?

javascript jquery html css

Answer 1

Answer №1

It seems like this solution may fit your needs. If you have any further questions, please don't hesitate to reach out.

body
{
    overflow-x:hidden;
}
#btnFeedbackHome {
    width: 180px;
    height: 45px;
    position: absolute;
    top: 320px;
    right: -135px;
    transition:all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    background-color: #35BDCF;
    cursor: pointer;
}

#btnFeedbackHome p{
    color: white;
    font-weight: 600;
    position: absolute;
    top: 1px;
    right: 8px;
    font-size: 14px;
}

#btnFeedbackHome div{
    width: 45px;
    background-color: #2A97A6;
    height: 45px;
}

#feedbackImgHomeBtn {
    margin-top: 9px;
    margin-left: 7px;
}
#btnFeedbackHome:hover
{
    right: 0px;
}

<div id="btnFeedbackHome">
            <div><img src="img/home_feedback.png" id="feedbackImgHomeBtn" /></div>
            <p>Ideas & feedback</p>
        </div>

Answer 2

It seems like this solution may fit your needs. If you have any further questions, please don't hesitate to reach out.

body
{
    overflow-x:hidden;
}
#btnFeedbackHome {
    width: 180px;
    height: 45px;
    position: absolute;
    top: 320px;
    right: -135px;
    transition:all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    background-color: #35BDCF;
    cursor: pointer;
}

#btnFeedbackHome p{
    color: white;
    font-weight: 600;
    position: absolute;
    top: 1px;
    right: 8px;
    font-size: 14px;
}

#btnFeedbackHome div{
    width: 45px;
    background-color: #2A97A6;
    height: 45px;
}

#feedbackImgHomeBtn {
    margin-top: 9px;
    margin-left: 7px;
}
#btnFeedbackHome:hover
{
    right: 0px;
}

<div id="btnFeedbackHome">
            <div><img src="img/home_feedback.png" id="feedbackImgHomeBtn" /></div>
            <p>Ideas & feedback</p>
        </div>

Answer 3

Answer №2

To achieve this effect, you can utilize a simple CSS transition on the element. I have put together a JSFiddle which enhances your example and demonstrates how this can be done without using any JavaScript, simply by adding a hover to the main container. Check it out here: http://jsfiddle.net/cudome3h/1/

If you follow the same steps as before but adjust the CSS code as shown below, you will achieve a similar result:

#btnFeedbackHome {
    width: 180px;
    height: 45px;
    position: absolute;
    top: 320px;
    right: -140px;
    background-color: #35BDCF;
    cursor: pointer;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

#btnFeedbackHome:hover {
    right: 0;
}

Answer 4

To achieve this effect, you can utilize a simple CSS transition on the element. I have put together a JSFiddle which enhances your example and demonstrates how this can be done without using any JavaScript, simply by adding a hover to the main container. Check it out here: http://jsfiddle.net/cudome3h/1/

If you follow the same steps as before but adjust the CSS code as shown below, you will achieve a similar result:

#btnFeedbackHome {
    width: 180px;
    height: 45px;
    position: absolute;
    top: 320px;
    right: -140px;
    background-color: #35BDCF;
    cursor: pointer;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

#btnFeedbackHome:hover {
    right: 0;
}

Animate a CSS3 button to shift from the right to the left upon hover

Answer №1

Answer №2

Similar questions

Confirming whether the digit entered in jQuery is a number

Set a variable to contain a specific scope in JavaScript

What is the best way to utilize CSS 'ids' with server controls in ASP.NET?

CSS Menu Expansion Error in Just Two Lines

The placement of an element is determined by its size and proportions

The button works properly in JSFiddle, however, it is not able to clear the ordered list in the

Is there a way to adjust the position of ::before elements without affecting the border placement?

Calculating the upcoming multiplier values for spacers in the Bootstrap 4 framework

Overflow issue with Bootstrap 4 cards on small screens

Tips for verifying the input field with specific requirements in Angular 6

Changing an array into an object in JavaScript without rearranging the keys

What is the best method for incorporating meta data, titles, and other information at dynamic pages using Node.js and Express?

Having trouble with Rails4 assets when implementing a straightforward slider with Bootstrap?

Executing a JavaScript script from a C# script: A step-by-step guide

Tips on populating the gap between dual cylinder meshes in Three.js

Adjusting the placement of Bootstrap popovers according to their horizontal position relative to the window's edge?

Creating dynamic event handlers in JavaScript

Customize scripts dynamically in Next.js based on the current environment during runtime

Retrieve information using server-side rendering

Unable to show information within input field