Stop Button From Pushes Text to the Left on Hover-CodePudding

Have this button that's great, but when I hover over it, it pushes the text to the left.

Trying to make it so the arrow ONLY expands when you hover ANYWHERE on the button (blank brown button background space, text, or arrow).

CODE:

<a href="/" >
<span >Reserve A Table</span> 
<span ></span>
</a>

.button--gold-arrow {
justify-content: center;
padding: 1.2rem 0;
line-height: 1.5rem;
background: #9e8659;
text-transform: uppercase;
font-family: arial, sans-serif;
width: 350px;
max-width: 350px;
border: 0;
font-size: 14px;
letter-spacing: 3px;
cursor: pointer;
max-width: 100%;
overflow: hidden;
position: relative;
opacity: 1;
transform: translateY(0);
margin: 0 10px 0 0;
transition: right .5s, width .5s, background-size .5s ease-in-out;
text-decoration: none;
display: flex;
justify-content: center;
margin: 0 auto;
}


.button--gold-arrow .button__text {
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition:.5s;
    color: #fff;
}

.button--gold-arrow .button__icon_arrow {
    margin-left: 17px;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    vertical-align: middle;
    position: relative;
    overflow: hidden;
    width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    color: #fff;
}

.button--gold-arrow .button__icon_arrow:before {
    content: "";
    display: flex;
    transition: all .5s ease-in-out;
    right: 1px;
    width: 100%;
    transform: 0;
    border-color: inherit;
    border-top: 1px solid;
    position: absolute;
    top: 50%
}

.button--gold-arrow .button__icon_arrow:after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-right: 1px solid;
    border-bottom: 1px solid;
    transform: rotate(-45deg);
    position: absolute;
    right: 2px;
    top: 8px;
    border-color: inherit
}

/* button on hover action */
.button--gold-arrow.button--large:hover .button__icon_arrow {
    width: 2.8125rem;
    background-position: 0
}

LINK TO PEN TO SEE IT IN ACTION

I'd like it to expand the arrow ONLY and the button should be clickable to the link anywhere on there (background color of button, text, or arrow).

Can anyone help?

CodePudding user response：

.button--gold-arrow.button--large:hover > .button__icon_arrow  {
    width: 2.8125rem;
    background-position: 0
}

Hello, this works for me :)

CodePudding user response：

You can use position:absoluteon the arrow

.button--gold-arrow {
  padding: 1.2rem 0;
  line-height: 1.5rem;
  background: #9e8659;
  text-transform: uppercase;
  font-family: arial, sans-serif;
  width: 350px;
  border: 0;
  font-size: 14px;
  letter-spacing: 3px;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  opacity: 1;
  transform: translateY(0);
  transition: right .5s, width .5s, background-size .5s ease-in-out;
  white-space: nowrap;
  text-decoration: none;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  position: relative;
}

.button__text {
  color: #fff;
}

.button__icon_arrow {
  transition: all .5s;
  width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 25px;
  
}

.button__icon_arrow::before {
  content: "";
  display: flex;
  transition: all .5s ease-in-out;
  right: 1px;
  width: 100%;
  transform: 0;
  border-color: inherit;
  border-top: 1px solid;
  position: absolute;
  top: 50%
}

.button__icon_arrow::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-right: 1px solid;
  border-bottom: 1px solid;
  transform: rotate(-45deg);
  position: absolute;
  right: 2px;
  border-color: inherit
}

.button--gold-arrow:hover .button__icon_arrow {
  transition: all .5s
}


/* button on hover action */

.button--gold-arrow.button--large svg {
  transform: scale(.7)
}

.button--gold-arrow.button--large:hover .button__icon_arrow {
  width: 2.8125rem;
  background-position: 0
}

<a href="/"  rel="noopener noreferrer">
  <span >Reserve A Table</span>
  <span ></span>
</a>

CodePudding user response：

Might not be 100% what you need but here's something you could work with. I made the arrow position:absolute and move it about. I also removed the hover on the arrow.

    .button--gold-arrow {
      justify-content: center;
      padding: 1.2rem 0;
      line-height: 1.5rem;
      background: #9e8659;
      text-transform: uppercase;
      font-family: arial, sans-serif;
      width: 350px;
      max-width: 350px;
      border: 0;
      font-size: 14px;
      letter-spacing: 3px;
      cursor: pointer;
      max-width: 100%;
      overflow: hidden;
      position: relative;
      opacity: 1;
      transform: translateY(0);
      margin: 0 10px 0 0;
      transition: right .5s, width .5s, background-size .5s ease-in-out;
      text-decoration: none;
      display: flex;
      justify-content: center;
      margin: 0 auto;
    }


    .button--gold-arrow .button__text {
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition:.5s;
    color: #fff;
    }

    .button--gold-arrow .button__icon_arrow {
    margin-left: 17px;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    vertical-align: middle;
    position: absolute;
    overflow: hidden;
    width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    top: 18px;
    left: 250px;
    color: #fff;
    }

    .button--gold-arrow .button__icon_arrow:before {
    content: "";
    display: flex;
    transition: all .5s ease-in-out;
    right: 1px;
    width: 100%;
    transform: 0;
    border-color: inherit;
    border-top: 1px solid;
    position: absolute;
    top: 50%
    }

    .button--gold-arrow .button__icon_arrow:after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-right: 1px solid;
    border-bottom: 1px solid;
    transform: rotate(-45deg);
    position: absolute;
    right: 2px;
    top: 8px;
    border-color: inherit
    }

    /* button on hover action */
    .button--gold-arrow.button--large:hover .button__icon_arrow {
    width: 2.8125rem;
    background-position: 0
    }