Bu makalede, CSS kullanarak bir butona nasıl gradient uygulayacağımızı anlatacağım. Gradient, bir butona görsel ilgi ve derinlik katmanın harika bir yoludur.

Konular:

• Linear Gradients: Renklerin doğrusal bir şekilde değiştiği gradient türü.
• Radial Gradients: Renklerin dairesel bir şekilde değiştiği gradient türü.
• Multiple Gradients: Birden fazla gradient birleştirme.
• CSS Gradients ile Animasyon: Gradient efektlerini canlandırma.

Örnek kodlar şöyledir ;

HTML

<a href="/">
  <button class="btn">MobilMucit</button>
</a>

CSS

.btn {
  border: none;
  padding: 0.8em 2.5em;
  outline: none;
  color: white;
  font-style: 1.2em;
  position: relative;
  z-index: 1;
  cursor: pointer;
  background: none;
  text-shadow: 3px 3px 10px 
    rgba(0, 0, 0, 0.45);
}

.btn:before,
.btn:after {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 10em;
  -webkit-transform: translateX(-50%) 
    translateY(-50%);
  transform: translateX(-50%) 
    translateY(-50%);
  width: 105%;
  height: 105%;
  content: "";
  z-index: -2;
  background-size: 400% 400%;
  background: linear-gradient(
    60deg,
    #f79533,#f37055,#ef4e7b,
    #a166ab,#5073b8,#1098ad,
    #07b39b,#6fba82
  );
}

.btn:before {
  -webkit-filter: blur(7px);
  filter: blur(7px);
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  -webkit-animation: pulse 10s 
    infinite ease;
  animation: pulse 10s infinite ease;
}

.btn:after {
  -webkit-filter: blur(0.3px);
  filter: blur(0.3px);
}

.btn:hover:before {
  width: 115%;
  height: 115%;
}