Как показать наведенное подчеркивание с тенью, но сохранить некоторую непрозрачность справа и слева - PullRequest
Новая
       44

Как показать наведенное подчеркивание с тенью, но сохранить некоторую непрозрачность справа и слева

0 голосов
/ 30 сентября 2019

Я хочу создать эффект наведения в списке меню с эффектом тени. Я хочу так. http://prntscr.com/pczetu (См. О домашнем эффекте.)

Я только что попытался показать этот дизайн http://prntscr.com/pczetu Вот мой код. Он работает нормально. Но нужно немного прозрачности справа и слева. 

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>

В меню при наведении курсора я хочу это http://prntscr.com/pczetu Заранее спасибо.

1 Ответ

0 голосов
/ 30 сентября 2019

вы можете включить эффект в сам градиент:

обновление кода для проверки и настройки: background: linear-gradient(90deg, transparent,dodgerblue,dodgerblue, dodgerblue, transparent) silver/* second gradient turned into bg-color*/;

Демо ниже 

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>
...