Örnek Buton (HTML/CSS)

0 335

Örnek Buton; Buton, bir web sayfasında kullanıcıların bir işlemi gerçekleştirmeye yönlendirdiği bir tasarım elemanıdır. Örneğin, bir form doldurma sayfasında, “Gönder” butonu tıklandığında form bilgilerinin gönderileceğini belirtir.

Örnek Butonlar HTML etiketleriyle oluşturulur ve genellikle etkileşimli bir web sayfasının bir parçasıdır. Butonların görünümleri CSS (Cascading Style Sheets – Stil Şablonları) ile düzenlenir ve etkileşimleri JavaScript ile yönetilir.

Butonların görünümleri çeşitlidir ve genellikle renk, şekil, yazı tipi gibi özelliklerle özelleştirilebilir. Ayrıca, butonların üzerine fare ile geldiğinde veya tıklandığında değişen stil ve etkileşimler de olabilir.

Butonlar, web sayfalarında kullanıcıların dikkatini çekmek ve işlemlerini hızlandırmak amacıyla kullanılır. Bu nedenle, butonların tasarımı ve etkileşimleri önemlidir.

Örnek Buton-1

*HTML*
<button class="btn">Buton</button>

*CSS*
.btn {
  background-color: blue;
  color: white;
  border: none;
  padding: 12px 30px;
  font-size: 16px;
  cursor: pointer;
}

.btn:hover {
  background-color: lightblue;
}

HTML kodlarını <button> etiketini kullanarak bir buton oluşturur. class özelliğiyle bir sınıf atadık ve CSS kodlarında bu sınıfı kullandık.

CSS kodlarında, .btn sınıfına ait butonların arka plan rengini mavi, yazı rengini beyaz, sınırını yok, kayanı 12px yatay ve 30px dikey olarak belirledik. Ayrıca, butonların yazı tipi büyüklüğünü 16px olarak ayarladık ve fare ile üzerine gelindiğinde butonların arka plan rengini açık mavi olarak değiştirdik.

Örnek Buton-2

*HTML*
<button class="btn">
  <span class="btn-text">Buton</span>
  <span class="btn-arrow">&rarr;</span>
</button>

*CSS*
.btn {
  background-color: #33b5e5;
  color: white;
  border: none;
  border-radius: 50px;
  padding: 12px 30px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.btn .btn-text {
  z-index: 1;
}

.btn .btn-arrow {
  position: absolute;
  right: 10px;
  font-size: 24px;
}

.btn:hover {
  background-color: #0099cc;
}

.btn:active {
  background-color: #007299;
}

Bu buton, yazı ve ok içeren bir tasarıma sahiptir. HTML kodlarında, <span> etiketlerini kullanarak yazı ve oku ayrı elementler olarak tanımladık ve CSS kodlarında bu elementleri stilleyebildik.

CSS kodlarında, .btn sınıfına ait butonların arka plan rengini mavi, yazı rengini beyaz, sınırını yok, köşelerinin yuvarlak olduğunu belirledik. Ayrıca, butonların yazı tipi büyüklüğünü 16px olarak ayarladık ve fare ile üzerine gelindiğinde butonların arka plan rengini açık mavi, tıklandığında ise daha koyu mavi olarak değiştirdik.

Örnek Buton-3

*HTML*
<button class="btn">
  <span class="btn-text">Buton</span>
</button>


*CSS*
.btn {
  background-color: #33b5e5;
  color: white;
  border: none;
  border-radius: 50px;
  padding: 12px 30px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
}

.btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

Bu buton, yumuşak köşeler ve gölge efekti olan bir tasarıma sahiptir. CSS kodlarında, box-shadow özelliğini kullanarak butonların üzerine gölge efekti oluşturduk ve transition özelliğiyle butonların fare ile üzerine gelindiğinde ve tıklandığında hareket ettirilebilmesini sağladık.

Cevap bırakın

E-posta hesabınız yayımlanmayacak.