CODEWITHSUNDEEP
htmlcss
Kirito
Kirito

Reputation: 23

CSS - Can't move font in my button

I have a problem with my font placement. I'm new in doing things with CSS. I am glad that I have come so far with my little project :) but at this point I don't know what I must do. At the moment it looks like this:

enter image description here

I cant't move the font up. I tried with padding & margin. I allways can move it down and right. I hope, that somebody can help me.

body {
  margin: 0 auto;
}

.container {
  width: 400px;
  height: 380px;
  border-radius: 6px;
  text-align: center;
  background-color: rgba(51, 51, 51, 0.8);
  margin: 0 auto;
  margin-top: 20%;
}

.form-input {
  margin-top: auto;
}

.btns {
  background-color: rgba(36, 153, 0, 0.7);
  border-radius: 6px;
  border: none;
  width: 300px;
  height: 75px;
  margin-top: 39px;
  color: white;
  font-size: 60px;
  font-family: Sun Valley;
  text-align: left;
  padding-left: 90px;
  top: -10px;
}

.btn_login {
  position: absolute;
  width: 60px;
  height: 60px;
  background-image: url(../imgs/login.png);
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: 46px;
  margin-left: 15px;
}

.btn_register {
  position: absolute;
  width: 60px;
  height: 60px;
  background-image: url(../imgs/register.png);
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: 46px;
  margin-left: 15px;
}

.btn_rules {
  position: absolute;
  width: 60px;
  height: 60px;
  background-image: url(../imgs/rules.png);
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: 46px;
  margin-left: 15px;
}

@font-face {
  font-family: "Sun Valley";
  src: url(../fonts/sun_valley.ttf);
}
<html>

<link rel="stylesheet" href="css/loginscreen.css"></link>

<body>
  <div class="container">
    <div class="box">
      <div class="form-input">
        <em class="btn_login"></em>
        <button class="btns"><em class="test">Anmelden</em></button>
      </div>
      <div class="form-input">
        <em class="btn_register"></em>
        <button class="btns">Registrieren</button>
      </div>
      <div class="form-input">
        <em class="btn_rules"></em>
        <button class="btns" type="button" onclick="js/">Regelwerk</button>
      </div>
    </div>
  </div>
</body>

</html>

Upvotes: 1

Views: 351

Answers (4)

Goran Markovic
Goran Markovic

Reputation: 1

I think you need to put 

line-height: 75px;
margin-top: 0px;

Never use margin in buttons, better use padding inside of buttons for space.

Upvotes: 0

manneJan89
manneJan89

Reputation: 1024

I think the issue is that you are using a custom font. Try changing the line-height and font-size of the font in the button.

Upvotes: 0

adamoffat
adamoffat

Reputation: 649

Your margin-top for the btns class is 39px, that's what is pushing it down from the top of the container.

Upvotes: 0

magiclantern
magiclantern

Reputation: 798

Set the line-height on .btns to the same value as its height. In your case it would be

line-height: 75px;

You may need to tweak that value depending on the font.

Upvotes: 2

Related Questions