CSS ile Button Hover Gradient

Bu makale, CSS’de button hover gradient yapımı hakkında temel bilgileri edinmek isteyen web geliştiricileri için uygundur.

Butonlarınızı daha ilgi çekici hale getirmek için CSS’de hover efekti ile gradient kullanabilirsiniz. Bu, butonun üzerine gelindiğinde renginin yumuşak bir şekilde değişmesini sağlar.

Bu makalede şunları öğreneceksiniz:

• Temel CSS gradient syntaxı
• Button hover efekti için gradient nasıl kullanılır
• Farklı gradient türleri ve nasıl oluşturulacakları
• Daha karmaşık hover efektleri için ek CSS teknikleri

Aşağıda ki kodlarla yapılmış demoyu inceleyebilirsiniz. CSS Button Hover Gradient (codepen.io)

Örnek kodlar şu şekilde ;

HTML

<a class="btn" href="/">
    <span class="btn_span">Mobil Mucit</span>
</a>

CSS

.btn {
  background-image: linear-gradient(
    135deg, #008aff, #86d472);
  border-radius: 9px;
  box-sizing: border-box;
  color: #ffffff;
  display: block;
  height: 60px;
  font-size: 1.4em;
  font-weight: 600;
  padding: 4px;
  position: relative;
  text-decoration: none;
  width: 7em;
  z-index: 2;
}
.btn:hover {
  color: #fff;
}
.btn .btn_span {
  align-items: center;
  background: #0e0e10;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  height: 100%;
  transition: background 0.5s ease;
  width: 100%;
}
.btn:hover .btn_span {
  background: transparent;
}