CODEWITHSUNDEEP
css
Justin Erickson
Justin Erickson

Reputation: 177

CSS Button Animation

I am having some trouble with the direction of this css animation. I want the button to shrink and change colors when the user hovers over it.
However when I hover over the button it just shrinks toward the upper left. Any help would be appreciated.

Here is my CSS code:

.btn-lg {
        display: inline-block;
        margin-bottom: 0;
        font-size: 18px;
        font-weight: 400;
        line-height: 1.42857143;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        cursor: pointer;
        border: 1px solid transparent;
        background-color: #f04e45;
        color: white;
        border-radius: 30px;
        padding: 0.9em 2em;
        margin-top: 1em;
        -webkit-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
    }

.btn-lg:hover {
        color: #f04e45;
        border-color: #f04e45;
        border-radius: 22px;
        padding: .5em 1.2em;
        background-color: #ffffff;
        border: 1px solid ;
        transform:scale(.9);
        -webkit-transition:all 0.4s ease-in-out;
        -0-transition: all o.4s ease-in-out;
    }

Upvotes: 0

Views: 258

Answers (4)

Quince
Quince

Reputation: 15000

You could try using transform-origin (https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin)

transform-origin: 100% 100%;

not sure if this is the effect you want but here is a code pen to see

http://codepen.io/leighquince/pen/xujhs

Oh i should also say that using this method you can control the direction however you want the first number represents x-offset and can be be px, % or the words left/right/center the second is the y offset and can again be px, % or the words top/bottom/center. This way you could state what ever direction you wanted it to shrink in.

Upvotes: 1

Sachin
Sachin

Reputation: 179

You can fix this by adding margin to the hover state of button.

    margin: 0.4em 0.8em;
    margin-top: 1em;

Here is a codepen: http://codepen.io/anon/pen/juoHb

Upvotes: 1

UmairKhan
UmairKhan

Reputation: 108

Remove padding: .5em 1.2em; from your CSS and use transform: scale(0.9,0.9); instead of transform:scale(.9);
Here is the Demo

Upvotes: 0

bazeblackwood
bazeblackwood

Reputation: 1204

Add a margin-left:15px; to your :hover class. The element keeps the same box model otherwise, which keeps it aligned left.

Upvotes: 0

Related Questions