How to move text inside the button without moving the button itself

May 31, 2022

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title> Renowned buttons </title>

</head>


<body>

  <button class="Uber"> Request now </button>

  <button class="Amazon"> Add to Cart </button>

  <button class="GitHub"> Sign up </button>

  <button class="Bootstrap_One"> Get started </button>

  <button class="Bootstrap_Two"> Download </button>

  <button class="LinkedIn_One"> Apply on company website </button>

  <button class="LinkedIn_Two"> Save </button>

</body>

</html>


<style>

  .Uber {
    background-color: black;
    color: white;
    border: none;
    height: 35px;
    width: 110px;
    font-size: 12px;
    cursor: pointer;
  }

  .Amazon {
    background-color: rgb(255, 216, 20);
    color: black;
    border: none;
    height: 35px;
    width: 160px;
    border-radius: 35px;
    font-size: 13px;
    cursor: pointer;
    margin-left: 5px;
  }

  .GitHub {
    background-color: rgb(46, 164, 79);
    color: white;
    border: none;
    height: 35px;
    width: 90px;
    border-radius: 5px;
    font-size: 15px;
    position: relative;
    cursor: pointer;
  }

</style>

I need to move only text within the GitHub button up somewhat without moving other buttons, so …

padding doesn’t work because it moves the button itself leaving the text at the same place (that’s not my aim)
position top, bottom does the same thing as padding but moves the text with the button

So I need something between these two arguments (moves only text and not the button)

>Solution :

You could try the following: Put the text inside the button into a <span> tag and then you can simply style it using position: relative; and bottom: 10px;.

Like that:

<!-- replace current line with this one: -->
<button class="GitHub"> <span class="GitHubText"> Sign up </span> </button>

<!-- add this to your <style> tag: -->
.GitHubText {
    position: relative;
    bottom: 5px;
}

Is that what you wanted?

Snippet:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title> Renowned buttons </title>

</head>


<body>

  <button class="Uber"> Request now </button>

  <button class="Amazon"> Add to Cart </button>

  <button class="GitHub"> <span class="GitHubText"> Sign up </span> </button> <!-- line i modified -->

  <button class="Bootstrap_One"> Get started </button>

  <button class="Bootstrap_Two"> Download </button>

  <button class="LinkedIn_One"> Apply on company website </button>

  <button class="LinkedIn_Two"> Save </button>

</body>

</html>


<style>

  .Uber {
    background-color: black;
    color: white;
    border: none;
    height: 35px;
    width: 110px;
    font-size: 12px;
    cursor: pointer;
  }

  .Amazon {
    background-color: rgb(255, 216, 20);
    color: black;
    border: none;
    height: 35px;
    width: 160px;
    border-radius: 35px;
    font-size: 13px;
    cursor: pointer;
    margin-left: 5px;
  }

  .GitHub {
    background-color: rgb(46, 164, 79);
    color: white;
    border: none;
    height: 35px;
    width: 90px;
    border-radius: 5px;
    font-size: 15px;
    position: relative;
    cursor: pointer;
  }
  /* new lines */
  .GitHubText {             
      position: relative;
      bottom: 5px;
  }

</style>