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

Picopat

533388

Hectopat

delikarga

Kilopat

Benzer konular