CSS ile şekildeki görsel nasıl elde edilebilir?

yazilimologgg31 · 23 Mart 2024

Arkadaşlar burada tıkandım da nasıl aşağıya alırım bunu, margin falan verdigim zaman olmuyor.

533388 · 23 Mart 2024

Bence ayrı ayrı div olusturun ve onları bir kapsayici içine alıp display:flex yapın.

delikarga · 24 Mart 2024

HTML:

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>delikarga</title>
</head>
<body>
  <button class="login-btn">
    <span>G</span>
    <span>Log in with Google</span>
  </button>
  <button class="login-btn" style="background-color:#333;color:#fff">
    <span>G</span>
    <span>Log in with Github</span>
  </button>
  <button class="login-btn"style="background-color:#5050ff;color:#fff">
    <span>F</span>
    <span>Log in with Facebook</span>
  </button>
</body>
</html>

CSS:

body{
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.login-btn{
  height: 40px;
  width: 300px;
  outline: none;
  border: 1px solid #e5e5e5;
  border-radius: 9px;
  background: #fff;
}

Örnek olarak şöyle yapılabilir. span yerine img elementiyle ilgili ikonları verebilirsiniz.

CSS ile şekildeki görsel nasıl elde edilebilir?

Ayrıntılı düzenleme

yazilimologgg31

Centipat

533388

Hectopat

delikarga

Kilopat

Benzer konular

Technopat Haberler

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz