0
Kayıt Ol

Işıklı Kodlar Nasıl Oluyor?

3

●

172

  • 21-10-2023, 00:03:42
    #1
    soylenmezsmt
    soylenmezsmt
    Merhabalar,

    Bazı butonların dışında renkli renkli ışıklar dönüyor sonsuz olarak nasıl oluyor?Renkler genel olarak birbirleriyle uyumlu renkler oluyor.

    Siz kodunu yazabilir misiniz?
  • 21-10-2023, 00:09:48
    #2
    NeTD
    NeTD
    Kimlik doğrulama veya yönetimden onay bekliyor.
    Selamlar iki tane butonu aşağıdaki kodlarla kullanabilirsiniz.
    HTML;
    <div class="frame">
  <button class="custom-btn btn-1">Read More</button>
  <button class="custom-btn btn-2">Read More</button>
</div>
    CSS;
    .frame {
  width: 90%;
  margin: 40px auto;
  text-align: center;
}
button {
  margin: 20px;
}
.custom-btn {
  color: #fff;
  width: 130px;
  height: 40px;
  padding: 10px 25px;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
}

/* 1 */
.btn-1 {
  border: none;
  background-color: #ff9aff;
  box-shadow: 0 0 5px #ef97e8;
}
.btn-1:hover {
   box-shadow: 0 0 10px #ef97e8, 0 0 20px #ef97e8, 0 0 20px #fff inset;
}

/* 2 */
.btn-2 {
  color: #0bf4f3;
  border: 1px solid #0bf4f3;
  box-shadow:  0 0 5px #0bf4f3,  0 0 5px #0bf4f3 inset;
}
.btn-2:before {
  height: 0%;
  width: 2px;
}
.btn-2:hover {
  color: #fff;
  box-shadow: inset 0 0 10px #0bf4f3, 0 0 20px #0bf4f3 inset, 0 0 20px #0bf4f3 inset;
}
  • 21-10-2023, 00:12:29
    #3
    soylenmezsmt
    soylenmezsmt
    NeTD adlı üyeden alıntı: mesajı görüntüle
    Selamlar iki tane butonu aşağıdaki kodlarla kullanabilirsiniz.
    HTML;
    <div class="frame">
  <button class="custom-btn btn-1">Read More</button>
  <button class="custom-btn btn-2">Read More</button>
</div>
    CSS;
    .frame {
  width: 90%;
  margin: 40px auto;
  text-align: center;
}
button {
  margin: 20px;
}
.custom-btn {
  color: #fff;
  width: 130px;
  height: 40px;
  padding: 10px 25px;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
}

/* 1 */
.btn-1 {
  border: none;
  background-color: #ff9aff;
  box-shadow: 0 0 5px #ef97e8;
}
.btn-1:hover {
   box-shadow: 0 0 10px #ef97e8, 0 0 20px #ef97e8, 0 0 20px #fff inset;
}

/* 2 */
.btn-2 {
  color: #0bf4f3;
  border: 1px solid #0bf4f3;
  box-shadow:  0 0 5px #0bf4f3,  0 0 5px #0bf4f3 inset;
}
.btn-2:before {
  height: 0%;
  width: 2px;
}
.btn-2:hover {
  color: #fff;
  box-shadow: inset 0 0 10px #0bf4f3, 0 0 20px #0bf4f3 inset, 0 0 20px #0bf4f3 inset;
}
    Teşekkürler hocam,PM'den son sorum daha var.
  • 21-10-2023, 00:39:36
    #4
    NeTD
    NeTD
    Üyeliği durduruldu
    soylenmezsmt adlı üyeden alıntı: mesajı görüntüle
    Teşekkürler hocam,PM'den son sorum daha var.
    Yukarıdaki mesajımda olan kodlar bana ait değildir önceden bilginiz olsun. İnternetteki bir kaynaktan sadeleştirdim.
    PM'den bahsettiğim birleştirilmiş kodlar aşağıda;

    <!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Buton Kodlarımız</title>
    <style>
.frame {
  width: 90%;
  margin: 40px auto;
  text-align: center;
}
button {
  margin: 20px;
}
.custom-btn {
  color: #fff;
  width: 130px;
  height: 40px;
  padding: 10px 25px;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
}
/* 1. butona ait kodlar */
.btn-1 {
  border: none;
  background-color: #ff9aff;
  box-shadow: 0 0 5px #ef97e8;
}
/* Üzerine gelme efekti */
.btn-1:hover {
   box-shadow: 0 0 10px #ef97e8, 0 0 20px #ef97e8, 0 0 20px #fff inset;
}
/* 2. Butona ait kodlar */
.btn-2 {
  color: #0bf4f3;
  border: 1px solid #0bf4f3;
  box-shadow:  0 0 5px #0bf4f3,  0 0 5px #0bf4f3 inset;
}
.btn-2:before {
  height: 0%;
  width: 2px;
}
/* Üzerine gelme efekti */
.btn-2:hover {
  color: #fff;
  box-shadow: inset 0 0 10px #0bf4f3, 0 0 20px #0bf4f3 inset, 0 0 20px #0bf4f3 inset;
}
        </style>
</head>
<body>
    <div class="frame">
        <button class="custom-btn btn-1">Read More</button> <!--Bunu kullanacaksanız alt satırı silin. -->
        <button class="custom-btn btn-2">Read More</button> <!--Bunu kullanacaksanız üst satırı silin. -->
      </div>
</body>
</html>