CSS button hover effects "Metalic Look"-CodePudding

I am trying to apply a "metallic look" to my button, but I cannot seem to get the "white glistening effect" to show properly. I have added a linear effect to my CSS, but it still will not show. At one point I was able to get it to show, but it was over the button and not hidden. However, even at this point it did not provide a linear effect as it was supposed to. I have provided the code, below my code, that I am trying to replicate. I do not want the turning effect, just the metallic look.

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.clearfix:before, .clearfix:after {
  display: table;
  content: '';
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', sans-serif;
  color: #444;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.pricing-section {
  padding: 2em 0 8em;
  min-height: 100vh;
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}

.bg-1 {
  /* background: #1b1a1c; */
  background-size: cover;
  color: #fff;
}

.pricing {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  width: 100%;
  margin: 0 auto 3em;
}

.pricing-item {
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: stretch;
  align-items: stretch;
  -webkit-flex: 0 1 330px;
  flex: 0 1 330px;
}

.pricing-feature-list {
  text-align: left;
}

.pricing-action {
  color: inherit;
  border: none;
  background: none;
}

.pricing-action:focus {
  outline: none;
}

.pricing-item {
  margin: 1em;
  padding: 2em;
  cursor: default;
  border-radius: 10px;
  background: #1f1f1f;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 15px 30px -10px rgba(0, 0, 0, 0.3);
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
}

.pricing-item:hover {
  background: #141315;
}

.pricing-title {
  font-size: 2em;
  width: 100%;
  margin: 0 0 0.25em;
  padding: 0 0 0.5em;
  border-bottom: 3px solid rgb(27, 26, 28);
}

.pricing-price {
  color: #c81515;
  font-size: 1.75em;
  padding: 1em 0 0.75em;
}

.pricing-sentence {
  font-weight: bold;
}

.pricing-feature-list {
  margin: 0;
  padding: 1em 1.25em 2em;
}

.pricing-action {
  font-weight: bold;
  margin-top: auto;
  padding: 0.75em 2em;
  border-radius: 5px;
  background: #c81515;
  cursor: pointer;
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
  position: relative;
  overflow: hidden;
}

.pricing-action:hover, .pricing-action:focus {
  /* background: Gold; */
  background: linear-gradient(to right, gold, darkorange);
  color: #fff;

}

.pricing-action::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent, white, transparent);
    left: 100%;
    transition: 0.5s;

}

.pricing-action:hover::before {
    left: 100%;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Training Page</title>
    <link rel="stylesheet" href="trainingstyles.css">
  </head>
  <body>
    <div >
      <section >
        <div >
          <div >
            <h3 >Truck Rental</h3>
            <div ><span >$</span>1500
            </div>
            <p >Truck Rental ONLY</p>
            <ul >
              <li >2 test chances</li>
              <li >No Pre-trip hours</li>
              <li >No driving hours</li>
            </ul>
            <button  type="button" name="button">Choose Plan</button>

          </div>

          <div >
            <h3 >Silver Speedy</h3>
            <div ><span >$</span>2500
            </div>
            <p >Medium business plan</p>
            <ul >
              <li >20  Pre-trip, Driving, Maneuver, & Route training hours</li>
              <li >CDL Permit Study Guide</li>
              <li >2 Test chances</li>
              <li >1 on 1 Training</li>
            </ul>
            <button  type="button" name="button">Choose Plan</button>

          </div>
          <div >
            <h3 >Gold Speedy</h3>
            <div ><span >$</span>4800
            </div>
            <p >Small business plan</p>
            <ul >
              <li >Unlimited Pre-trip & Driving hours</li>
              <li >3 test chances</li>
              <li >CDL Permit Study Guide</li>
              <li >1 on 1 Training</li>
            </ul>
            <button  type="button" name="button">Choose Plan</button>

          </div>
        </div>

      </section>

    </div>
  </body>
</html>

html, body {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: skyblue;
}

.box {
    background: linear-gradient(to right, gold, darkorange);
    color: white;
    --width: 250px;
    --height: calc(var(--width) / 3);
    width: var(--width);
    height: var(--height);
    text-align: center;
    line-height: var(--height);
    font-size: calc(var(--height) / 2.5);
    font-family: sans-serif;
    letter-spacing: 0.2em;
    border: 1px solid darkgoldenrod;
    border-radius: 2em;
    transform: perspective(500px) rotateY(-15deg);
    text-shadow: 6px 3px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 2px 0 0 5px rgba(0, 0, 0, 0.2);
    transition: 0.5s;
    position: relative;
    overflow: hidden;
}

.box:hover {
    transform: perspective(500px) rotateY(15deg);
    text-shadow: -6px 3px 2px rgba(0, 0, 0, 0.2);
    box-shadow: -2px 0 0 5px rgba(0, 0, 0, 0.2);
}

.box::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent, white, transparent);
    left: -100%;
    transition: 0.5s;
}

.box:hover::before {
    left: 100%;
}

<div >BUTTON</div>

CodePudding user response：

You are basically just missing a -(minus sign) on the initial left value.
Then you will notice you also need top: 0;

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', sans-serif;
  color: #444;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.pricing-section {
  padding: 2em 0 8em;
  min-height: 100vh;
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}

.bg-1 {
  /* background: #1b1a1c; */
  background-size: cover;
  color: #fff;
}

.pricing {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  width: 100%;
  margin: 0 auto 3em;
}

.pricing-item {
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: stretch;
  align-items: stretch;
  -webkit-flex: 0 1 330px;
  flex: 0 1 330px;
}

.pricing-feature-list {
  text-align: left;
}

.pricing-action {
  color: inherit;
  border: none;
  background: none;
}

.pricing-action:focus {
  outline: none;
}

.pricing-item {
  margin: 1em;
  padding: 2em;
  cursor: default;
  border-radius: 10px;
  background: #1f1f1f;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 15px 30px -10px rgba(0, 0, 0, 0.3);
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
}

.pricing-item:hover {
  background: #141315;
}

.pricing-title {
  font-size: 2em;
  width: 100%;
  margin: 0 0 0.25em;
  padding: 0 0 0.5em;
  border-bottom: 3px solid rgb(27, 26, 28);
}

.pricing-price {
  color: #c81515;
  font-size: 1.75em;
  padding: 1em 0 0.75em;
}

.pricing-sentence {
  font-weight: bold;
}

.pricing-feature-list {
  margin: 0;
  padding: 1em 1.25em 2em;
}

.pricing-action {
  font-weight: bold;
  margin-top: auto;
  padding: 0.75em 2em;
  border-radius: 5px;
  background: #c81515;
  cursor: pointer;
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
  position: relative;
  overflow: hidden;
}

.pricing-action:hover,
.pricing-action:focus {
  /* background: Gold; */
  background: linear-gradient(to right, gold, darkorange);
  color: #fff;
}

.pricing-action::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, transparent, white, transparent);
  top: 0;
  left: -100%;
  transition: 0.5s;
}

.pricing-action:hover::before {
  left: 100%;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Training Page</title>
  <link rel="stylesheet" href="trainingstyles.css">
</head>

<body>
  <div >
    <section >
      <div >
        <div >
          <h3 >Truck Rental</h3>
          <div ><span >$</span>1500
          </div>
          <p >Truck Rental ONLY</p>
          <ul >
            <li >2 test chances</li>
            <li >No Pre-trip hours</li>
            <li >No driving hours</li>
          </ul>
          <button  type="button" name="button">Choose Plan</button>

        </div>

        <div >
          <h3 >Silver Speedy</h3>
          <div ><span >$</span>2500
          </div>
          <p >Medium business plan</p>
          <ul >
            <li >20 Pre-trip, Driving, Maneuver, & Route training hours</li>
            <li >CDL Permit Study Guide</li>
            <li >2 Test chances</li>
            <li >1 on 1 Training</li>
          </ul>
          <button  type="button" name="button">Choose Plan</button>

        </div>
        <div >
          <h3 >Gold Speedy</h3>
          <div ><span >$</span>4800
          </div>
          <p >Small business plan</p>
          <ul >
            <li >Unlimited Pre-trip & Driving hours</li>
            <li >3 test chances</li>
            <li >CDL Permit Study Guide</li>
            <li >1 on 1 Training</li>
          </ul>
          <button  type="button" name="button">Choose Plan</button>

        </div>
      </div>

    </section>

  </div>
</body>

</html>