Merhaba @Anomin;
İşte burada bahsettiğin butonun HTML ve CSS kodları var!
HTML için:
<button class="btn-primary">BTN</button>
CSS için:
.btn-primary {
margin: 10px;
font-size: 28px;
width: 100px;
height: 50px;
padding: 5px;
background: #0055ff;
color: #fff;
outline: none;
border-radius: 4px;
border: 1px solid transparent;
transition: 0.5s;
}
.btn-primary:hover {
background: #0055dd;
color: #fff;
transition: 0.5s;
}
.btn-primary:focus {
box-shadow: 0 0 0 5px rgba(0, 85, 255, 0.5)
}
Sonucu görmek için buraya tıklayabilirsin
Şunları deneyebilirsin:
- Bilgisayarı yeniden başlat veya
- VS Code'u yeniden başlat.
Teşekkür ederim @gangboy
Merhaba @Anomin;
Öncelikle SCSS kullanmanın 2 farklı yolu var:
VS Code Kullanmak:
VS Code eklentilerinden biri olanLive Sass Compilereklentisini indirerek işe başlayabilirsin.
Daha sonra bir.scssdosyası oluştur. AlttaWatchyazan butona görüp tıkladığında yazdıkların her kaydettiğinde oluşturulan.cssdosyasına gönderilecek.
NOT: HTML'E SCSS DEĞİL SCSS DOSYASINI ATAMALISINCodepen Kullanmak:
Codepen'in kod ayarlarını değiştirerek SCSS kullanabilirsin. Bunun için;- Yeni bir
Penoluştur. - Settings butonuna tıkla.
- CSS'i seç
CSS Preprocessordeğerini SCSS yap- Ve TAMAM!
Hadi bir deneme yapalım:
$primary: #0055fff; $primary-text: #c4c4c4; body {background: $primary;color: $primary-text;}- Yeni bir
Sonuç şöyle:
body {background: #0055ff;color: #c4c4c4;}
Google arama sonuçlarını girilmesi sürelerine göre çoktan aza doğru sıralar.
Bu yüzden çıkmıyor olabilir.
Örnek:
<!-- head -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<!-- linkin bulunduğu yer -->
<li><a href="#" class="asagi">Ürünler</a>
<ul>
<li><a href="#">Ürün Kategori 1</a></li>
<li><a href="#">Ürün Kategori 2</a></li>
<li><a href="#" class="sag">Ürün Kategori 3</a>
<ul>
<li><a href="#">Ürün 1</a></li>
<li><a href="#" class="sag">Ürün 2</a>
<ul>
<li><a href="#">Ürün -2 -1</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
.asagi::after {
content: '\f063';
}
.sag::after {
content: '\f061';
}
Mesela Bootstrap gibi open-source kaynaklar yapabilirsin. Sana şimdiden başarılar dilerim.
Merhaba
Bu örnek sana yardımcı olabilir:
HTML:
<div class="form-checkbox">
<input type="checkbox" class="form-checkbox-input" id="check">
<label for="check" class="form-checkbox-label">Default</label>
</div>
CSS:
.form-checkbox-input {
display: none;
}
.form-checkbox-input + .form-checkbox-label:before {
content: " ";
width: 14px;
height: 14px;
border: 2px solid #c4c4c4;
display: inline-flex;
border-radius: 4px;
background-size: 12px;
background-position: center;
transition: 0.2s;
margin-right: 5px;
}
.form-checkbox-input:checked + .form-checkbox-label:before {
background-color: red;
border-color: red;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.2.5L3.5 5.2 1.8 3.5a.7.7 0 0 0-1 1L3 6.8c.3.3.7.3 1 0l5.3-5.3a.7.7 0 0 0-1-1z' fill='%23fff'/%3E%3C/svg%3E");
background-repeat: no-repeat;
}
Umarım yardımcı olabilmişimdir.