2 Butonum Var ve Aralarında Boşluk Bırakmam Lazım

HTML
,
1

Merhabalar,

Elimde 2 tane buton var. İkisi de çok güzel çalışıyor. Bu butonları sağa yasladım ancak aralarında belirleyeceğim miktarda boşluk olmasını istiyorum.

Yani

image

şeklinde olmasın, bitişik durmasınlar istiyorum.

index.html

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <button class="kayitTusu" onclick="kayitOl()">Kayıt Ol</button>
    <button class="girisTusu" onclick="girisYap()">Giriş Yap</button>
</body>
</html>

style.css

.kayitTusu {
    float: right;
    background-color: #FF8C00 ;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

.girisTusu {
    float: right;
    background-color: #FF8C00 ;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
2

Merhaba.

İki öğe arasında boşluk bırakmak için, style.css'de margin özelliğini belirtmelisin, bu aynı padding özelliğini tanımlamak gibidir.

2 Beğeni
3
1 Beğeni
4

Teşekkür ederim :blush:

İsteyenler için kod :

style.css

.kayitTusu {
    float: right;
    background-color: #FF8C00 ;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

.girisTusu {
    margin-right: 5px;
    float: right;
    background-color: #FF8C00 ;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
1 Beğeni
5

Haa… bir de, bu şekilde sıfırdan tasarım yapmak bir süre sonra zorlaşır, o yüzden ileryen zamnlarda boostrap çatısını da öğrenmelisin. Mesela ben şu taslağımda boostsrap kullandım.

1 Beğeni