HTML ve CSS ile butonda yer ayarlanmıyor

LykeTheBest

Hectopat
Katılım
2 Ağustos 2022
Mesajlar
110
Çözümler
1
Daha fazla  
Cinsiyet
Erkek
HTML ve CSS kullanarak bir site yapmaya çalışıyorum fakat butonda resim ve yazının pozisyonunu ayarlayamadım. Amacım yazıyı görselin altına almak.

Kodlar:
Html:
HTML:
<div class="haber"><a class="button button2" href="/"><img src="https://www.technopat.net/sosyal/styles/default/xenforo/technopat-logo.png">TEST HABERİ</a></div>
Css:
CSS:
.haber .button {
  background-color: RED; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  font-family: 'Roboto', sans-serif;
 
  width:40%;
 
  border-radius:10px;
  float:left;
}


.button1 {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
 

Dosya Ekleri

  • resim_2022-10-02_222440319.png
    5,5 KB · Görüntüleme: 55
Eğer katman olarak altına almak diyorsan. İmg tagını sil. CSS kısmında Button'a background-image ver. Arka plan olacak.

Eğer altına almayı liste gibi diyorsan da. İmg tagını display: block yap.
 
Eğer katman olarak altına almak diyorsan. İmg tagını sil. CSS kısmında Button'a background-image ver. Arka plan olacak.

Eğer altına almayı liste gibi diyorsan da. İmg tagını display: Block yap.

Dostum background image verirsem butonun renginin kaybolacağını düşünüyorum. Ve ayrıca CSS kısmından Image'yi display: Block; olarak ayarladım değişen bir şey olmadı.
 


Böyle olmasını istemiyor musun?

Display Flex, Grid, block. İle sıralama dizayn işlemlerini yapıyoruz. Biraz incelemelisin.
 
Bu siteyi kullanmak için çerezler gereklidir. Siteyi kullanmaya devam etmek için çerezleri kabul etmelisiniz. Daha Fazlasını Öğren.…