Как добавить эффект тени на кнопку?

Question

Взял кнопку с сайта GitHub как образец сама кнопка выглядит нормально, но на сайте GitHub, откуда я взял её при наведении на неё она отображает эффект тени. Я обнаружил, что не могу воссоздать этот эффект у себя на сайте и не понимаю в чем может быть ошибка. Подскажите что я делаю не так, весь код будет ниже.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/button.css">
    <link rel="stylesheet" href="css/typography.css">
</head>

<header>
    <h1 class="h2-5-mktg-fluid h1-sm-mktg-fluid h0-lg-mktg-fluid color-text-white mb-3 position-relative z-2">
        Where the world builds software </h1>
</header>

<body>
    <button class="btn-mktg-fluid btn-green-mktg-fluid width-full width-sm-auto">
        Sign up for GitHub
    </button>
</body>

<footer>
</footer>

</html>

My button

CSS

body {
    background-color: #040d21;
    text-align: center;
}

.btn-mktg-fluid {
    cursor: pointer;
    position: relative;
    z-index: 1;
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: .9rem 1.5rem 1.1rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 0;
    border-radius: .375rem;
    color: white;
    background-color: #4969ed;
    background-image: linear-gradient(-180deg,#607cef,#4969ed);
}

.btn-mktg-fluid:before {
    background-blend-mode: overlay,normal;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    content: "";
    border-radius: .375rem;
    opacity: 0;
    transition: opacity .4s;
}

.btn-green-mktg-fluid {
    color: white;
    background-color: #2ea44f;
    background-image: linear-gradient(-180deg,#34b859,#2ea44f);
}

.btn-green-mktg-fluid:before {
    background-image: linear-gradient(-180deg,#279a43,#22863a);
}

Github original button

Answer 1

Не нашел я на GitHub кнопки с таким градиентом при наведении. Но вот вам парочку простых примеров:

button {
  cursor: pointer;
  outline: none;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  color: white;
  font-size: 18px;
  font-weight: bold;
  font-family: monospace;
  letter-spacing: 1px;
  transition: all 0.5s;
  background: linear-gradient( 0deg, red, green);
}

.it1, .it2, .it3 {
  background-size: 300% 300%;
}

.it1:hover {
  background-size: 100% 100%;
}

.it2:hover {
  background-size: 10% 10%;
}

.it3:hover {
  background-size: 10% 10%;
  animation: ani 0.5s ease infinite;
}

@keyframes ani { 
    0%{ background: linear-gradient(0deg, red, green);}
    25%{ background: linear-gradient(90deg, red, green);}
    50%{ background: linear-gradient(180deg, red, green);}
    75%{ background: linear-gradient(270deg, red, green);}
    100%{ background: linear-gradient(360deg, red, green);}
}

<button class="it1">Эффект тени</button>
<button class="it2">Эффект тени</button>
<button class="it3">Эффект тени</button>

БЛОГ НА HUSL

Как добавить эффект тени на кнопку?

Ответы (1 шт):