Çözüldü CSS buton efekti ilk başta mavi sonra siyah oluyor

brkdnmz dedi:

Sadece paylaştığınız kısımlarla bahsettiğiniz durumu Google Chrome'da yeniden üretemedim. Diğer kısımlarını da paylaşmanız mümkün mü?

Düzenleme: Çok kısa bir süreliğine mavimsi bir renkte oluyor sanki border, şimdi fark ettim.

color: aqua'dan kaynaklandığını düşünüyorum ama anlamlandıramıyorum, border rengini etkilememesi gerektiğini düşünüyorum aslında onun. Yine de bunun üstesinden gelmek için button#sosyalx'e border-left-color: black; özelliği verilebilir. Böylece renge transition uygulanmaz ki sebebin bu olduğunu düşünüyorum, pek emin olmayarak.

Denememi paylaşayım:

---

Border'a renk vermediğiniz takdirde eğer color tanımladıysanız border rengi de otomatikman o oluyormuş, ben de yeni öğrendim. Detayları okumak isterseniz: Why is the CSS border-color inheriting the color property?

Genişletmek için tıkla...

Hocam border left olayını denedim. Zaten daha önce de denemşim şimdi fark ettim ama hala aynı. Üstelik X'in çizgisi diğerlerine göre daha inca sanırım.

brkdnmz dedi:

Denediğiniz CSS'i paylaşır mısınız? Hâlâ aynı olmasını beklemezdim. Paylaştığım JSFiddle'da da düzgün çalıştığını görebiliyorum.

Genişletmek için tıkla...

Şimdi şöyle anlatayım. Button'daki color'ı kaldırırsam (ben butonların metin rengini de direkt açık mavi yapmışım) o yüzden o da gidiyor. Yani tema yine gidiyor. Şayet rengi kaldırırsam sorun çözülüyor ama bu sefer de dediğim gibi oluyor. Ya ne zor işmiş bu site kodlamak bırakasım geldi vallahi. Ayrıca nedense hala ince X'in çizgisi. CSS'in hangi kodunu paylaşmamı istersiniz bu arada? Hepsini mi paylaşayım. Uzun çünkü.

Bak şimdi fark ettim. Instagram logosunda da sorun var. Onda da aynısı oluyormuş. Sadece çizgi kalın diğerleri gibi.

Allah allah acaba psikolojik olarak mı öyle hissediyorum ince gibi geliyor bana anlayamadım.

brkdnmz dedi:

Hepsini paylaşmanız uygun olur. Uzun olmasında sakınca yok. border-left-color'ı denediğiniz CSS olması önemli.



Color'ı kaldırmadan çözümler mevcut ve onlardan birini ilk mesajımda sundum. : )
Özetlemek gerekirse border-left-color vb. özelliklerle border'ın rengini belirtmediğiniz sürece border rengi olarak color seçiliyor, sıkıntı bu. border-left-color'ı ayarladıktan sonra bile sorunun devam ettiğini belirtmiştiniz. Bunun sebebini birlikte bulmanın en sağlıklı yolu, denediğiniz CSS'i incelemek olacak.



CSS, çok zaman ve emeğin yanında bol araştırma isteyen bir şey. "Gülü seven dikenine katlanır." misali, tabii CSS'te biraz fazla diken var.
Bazen gerçekten anlaması güç sorunlarla karşılaşabiliyoruz ama pes etmeyip inat etmek önemli. Ben de sayenizde bugün color'ın border renklerine etki ettiğini öğrendim.



Bu başka bir videonun konusu diyelim. : D Renk sorunu çözüldükten sonra bunun için de ayrı bir konu açmanız faydalı olacaktır.

Genişletmek için tıkla...

Border left color'ı denedim fakat hüsran. Şimdi CSS'in hepsini paylaşıyorum. Bu arada uykudan yeni uyandım haliyle sersemim kusuruma bakmayın <3

[CODE title="CSS kodu"]@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

p{
color: aliceblue;
}

h1{
color: aqua;
}

h2{
color: aqua;
font: 20px Arial, sans-serif;
font-weight: 1000;
}


a{
color: aqua;
font-size: 16px;
font-family: "Outfit", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
text-decoration: none;
}

body{
background-color: rgb(34, 34, 34);
}

button{
border: none;
color: aqua;
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
border-radius: 5px;
cursor: pointer;
background-color: rgb(54, 54, 54);
display: inline-flex;
align-items: center;
font-family: "Outfit", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
}

button:hover {
border-left: 5px solid aqua;
transition-duration: 0.1s;
background-color: #525252;
}

head {
display: flex;
justify-content: center;
}

label{
color: aqua;
}

#rehber{
border: none;
color: aqua;
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
border-radius: 5px;
cursor: pointer;
background-color: rgb(54, 54, 54)
}

#rehber img {
max-width: 100%;
height: auto;
transition: transform 0.3s ease;
}

#rehber:hover img {
transform: scale(1.1);
}

p{
border: none;
color: whitesmoke;
padding: 10px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
border-radius: 5px;
text-align: left;
background-color: rgb(54, 54, 54)
}
p{
font: 20px Arial, sans-serif;
font-weight: 700;
}

h1{
font: 20px Arial, sans-serif;
font-weight: 1000;
}

h3{
font: 20px Arial, sans-serif;
font-weight: 1000;
}

#jigsaw {
opacity: 0.5;
border: none;
color: aqua;
padding: 10px 32px;
text-align: left;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
border-radius: 5px;
background-color: purple

}

input{
border: none;
color: whitesmoke;
padding: 10px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
border-radius: 5px;
text-align: left;
background-color: rgb(54, 54, 54)
}

#sonuc{
border: none;
color: rgb(255, 0, 0);
padding: 10px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
border-radius: 5px;
text-align: left;
background-color: rgb(54, 54, 54)

}

#bilgibaslik{
color: rgb(255, 0, 0);
}

span{
cursor: pointer;
color: aqua;
font: 20px Arial, sans-serif;
font-weight: 1000;
}

#buton{
margin-right: 3px;
}

#indir{
color: greenyellow;
font-weight: bold;
}

#on{
float: right;
display: block;
text-align: center;
color: white;
}

#otext{
color: rgb(255, 0, 0);
}

#otext:hover{
color:aqua;
}

#yt:hover {
border-left: 5px solid red;
transition-duration: 0.1s;
}

#insta:hover {
border-left: 5px solid orange;
transition-duration: 0.1s;
}

#sosyalx:hover {
border-left-color: black;
transition-duration: 0.1s;
}[/CODE]

brkdnmz dedi:

CSS'inizin önceki hâli:

CSS:

#sosyalx:hover {
  border-left: 5px solid black;
  transition-duration: 0.1s;
}

CSS'inizin sonraki hâli:

CSS:

#sosyalx:hover {
  border-left-color: black;
  transition-duration: 0.1s;
}

Aslında burayı değiştirmenize gerek yoktu. Benim önerdiğim ekleme şuydu:

CSS:

button#sosyalx {
  border-left-color: black;
}

Dilerseniz şöyle de yazabilirsiniz, ben daha ayrıntılı belirtmek istedim selector'ı:

CSS:

#sosyalx {
  border-left-color: black;
}

Sorunun sebebini daha ayrıntılı açıklayayım da neden böyle yaptığımız daha iyi anlaşılsın:
transition-duration: 0.1s özelliğini eklediğinizde elementin :hover'da değişen tüm özelliklerine animasyon uygulanıyor. color: aqua; sebebiyle butonun border'ının ilk rengi aqua. #sosyalx:hover'da da border-left: 5px solid black var ve bu yüzden border rengi de aqua'dan black'e dönüşüyor ve buna da animasyon uygulanıyor. Bunu, transition-duration: 1s falan diyerek daha net görebiliriniz. Bunu engellemek için border'ın asıl rengini yani :hover değilkenki rengini border-left-color: black ile siyah yapabiliriz. Bu sayede :hover'da border rengi değişmez ve o garip maviden siyaha renk atlamasını görmeyiz.

Genişletmek için tıkla...

Çok teşekkür ederim hocam oldu Ya baştan doğru anlasaydım çok kolaymış çözüm aslında Sağ olun tekrardan, güzel günleriniz olsun.