How to show hover underline with shadow but keep some opacity from right and left side

Question

I want to create a hover effect on menu list with shadow effect. I want like this. http://prntscr.com/pczetu (See on home effect.)

I just tried to show this desing http://prntscr.com/pczetu Here is my code It's working fine. But want some opacity from right and left side.

body {
  /* pretty it up */
  width: 95vw;
  height: 95vh;
  background-color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button {
  font: 1em Arial, sans-serif;
  display: inline-block;
  padding: 1em;
  margin: 1em;
  /*   border-radius: 5px; */
  text-decoration: none;
  color: gray;
  /* Set up the hover */
  /* If you aren't using autoprefix, remember to prefix the gradient for other browsers */
  background-image: linear-gradient(dodgerblue, dodgerblue), linear-gradient(silver, silver);
  background-size: 0 5px, auto;
  background-repeat: no-repeat;
  background-position: center bottom;
  transition: all .2s ease-out;
}

.button:hover {
  /* The following line makes the underline only as wide as the text */
  /* background-size: calc(100% - 2em) 5px, auto; */
  background-size: 100% 5px, auto;
}

<a href="#" class="button">Checkout</a>
<a href="#" class="button">Buy now</a>
<a href="#" class="button">A really long button for absolutely no reason</a>

On menu hover I want this http://prntscr.com/pczetu Thank You in advance.

Answer 1

you may include the effect within the gradient itself :

update of your code to test and tune : background: linear-gradient(90deg, transparent,dodgerblue,dodgerblue, dodgerblue, transparent) silver/* second gradient turned into bg-color*/;

Demo below

body {
  /* pretty it up */
  width: 95vw;
  height: 95vh;
  background-color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button {
  font: 1em Arial, sans-serif;
  display: inline-block;
  padding: 1em;
  margin: 1em;
  /*   border-radius: 5px; */
  text-decoration: none;
  color: gray;
  /* Set up the hover */
  /* If you aren't using autoprefix, remember to prefix the gradient for other browsers */
  background: linear-gradient(90deg, transparent,dodgerblue,dodgerblue, dodgerblue, transparent) silver;
  background-size: 0 5px, auto;
  background-repeat: no-repeat;
  background-position: center bottom;
  transition: all .2s ease-out;
}

.button:hover {
  /* The following line makes the underline only as wide as the text */
  /* background-size: calc(100% - 2em) 5px, auto; */
  background-size: 100% 5px, auto;
} 

<a href="#" class="button">Checkout</a>
<a href="#" class="button">Buy now</a>
<a href="#" class="button">A really long button for absolutely no reason</a>