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:

html:

<button  type="button">
    Continue
    <i ></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;
            }
        }
    }

CodePudding user response：

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 >
  <button  type="button">
      <span>Continue <i ></i></span>
  </button>
</div>

CodePudding user response：

You'll add a border to the left and bottom side, and then reduce them when the button is active

.container {
  width: 150px;
  margin: 0 auto;
  
}
.btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 0.55px;
    border: 1.5px solid #092c4c;
    border-left: 3px solid #092c4c;
    border-bottom: 3px solid #092c4c;
    box-sizing: border-box;
    border-radius: 6px;
    text-decoration: none;
    transition: all .1s;
    animation-timing-function: ease-in-out;
    animation-duration: 150ms;
    cursor: pointer;
    width: 100%;

    &:active {
        border-left: 0 solid #092c4c;
        border-bottom: 0 solid #092c4c;
        background-color: #5a44ff;
        animation-timing-function: ease-in-out;
        animation-duration: 150ms;
    }
    &:focus {
        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: #7a6af6;
        color: white;
        animation-timing-function: ease-in-out;
        animation-duration: 150ms;

        &:not(:disabled) {
            &:hover {
                background-color: #6955ff;
                box-sizing: border-box;
                animation-timing-function: ease-in-out;
                animation-duration: 150ms;
            }
        }
    }
}

Hope it is helpful <3

CodePudding user response：

So from my understanding, you are trying a neubrutalistic button. Here is my approach.

*{
  padding: 0;
  box-sizing: border-box;
  font: inherit;
}
.btn{
  --off-x: 3px;
  --off-y: 4px;
  background: orchid;
  padding: 0.5em 1em;
  color: white;
  font-family: sans-serif;
  font-weight: bold;
  letter-spacing: 1px;
  border-radius: 8px;
  box-shadow: calc(var(--off-x, 0)*-1) var(--off-y, 0) black;
  transform: translate(var(--off-x, 0), calc(var(--off-y, 0)*-1));
  transition: all 100ms ease-in-out;
}

.btn:active{
  box-shadow: 0 0;
  transform: translate(0);
}

<button >Continue</button>