Changing button width on click but not container

Issue

I am trying to create button when the user clicks down, the inner container changes width but the outer container as a whole (black background) doesnt change width. What i currently have is close, but when a user clicks the shadow changes.

Snippet: Click here

Desired button changes

html:

<button class="btn btn__primary" type="button">
    Continue
    <i class="fa-solid fa-sparkles m-l-8px"></i>
</button>

scss:

.btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px;
    font-family: $aeonik_bold;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 0.55px;
    border: 1.5px solid $button_border_color;
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: -1px 1px 0px 1.5px $button_border_color;
    text-decoration: none;
    transition: all 0.3s;
    animation-timing-function: ease-in-out;
    animation-duration: 150ms;
    cursor: pointer;
    width: 100%;

    &:active {
        box-shadow: none;
        background-color: #5a44ff;
        animation-timing-function: ease-in-out;
        animation-duration: 150ms;
    }
    &:focus {
        box-shadow: none;
        background-color: #5a44ff;
        animation-timing-function: ease-in-out;
        animation-duration: 150ms;
    }
    &:disabled {
        background: #d9dbe9;
        border: 1.5px solid #d9dbe9;
        box-sizing: border-box;
        border-radius: 4px;
        cursor: default;
    }

    &__primary {
        background-color: $purple_resting;
        color: white;
        animation-timing-function: ease-in-out;
        animation-duration: 150ms;

        &:not(:disabled) {
            &:hover {
                background-color: #6955ff;
                border: 1.5px solid #170f49;
                box-sizing: border-box;
                border-radius: 4px;
                box-shadow: -0.5px 0.5px 0px 1px $button_border_color;
                animation-timing-function: ease-in-out;
                animation-duration: 150ms;
            }
        }
    }

Solution

I couldn’t figure out what you were trying to do with the animations so I came up with a different approach using a inset box shadow and padding on a child span with transition.

If you want to change the sizing of box shadow then you just need to add the pixels used in the box shadow to the left and bottom padding of the button and then do the reverse on active e.g.

If the box shadow was inset 4px -4px 0 #000000 and the padding of the button was 16px.

Then the padding of the button would be padding: 16px 16px 20px 20px; and on active it would be padding: 20px 20px 16px 16px;

.btn {
  -moz-box-shadow:    inset 2px -2px 0 #000000;
   -webkit-box-shadow: inset 2px -2px 0 #000000;
   box-shadow:         inset 2px -2px 0 #000000;
   border: 1px solid #000000;
   transition: all 0.25s ease-in-out;
   border-radius: 5px;
}

.btn > span {
   padding: 8px 8px 10px 10px;
   transition: all 0.25s ease-in-out;
   display: block;
}

.btn:active {
   -moz-box-shadow:    inset 0 0 0 #000000;
   -webkit-box-shadow: inset 0 0 0 #000000;
   box-shadow:         inset 0 0 0 #000000;
}

.btn:active > span {
   padding: 10px 10px 8px 8px;
}
<div class="container">
  <button class="btn btn__primary" type="button">
      <span>Continue <i class="fa-solid fa-sparkles m-l-8px"></i></span>
  </button>
</div>

Answered By – WizardCoder

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published