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

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title> Renowned buttons </title>

</head>


<body>

  <button > Request now </button>

  <button > Add to Cart </button>

  <button > Sign up </button>

  <button > Get started </button>

  <button > Download </button>

  <button > Apply on company website </button>

  <button > 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)

CodePudding user response：

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 > <span > 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 > Request now </button>

  <button > Add to Cart </button>

  <button > <span > Sign up </span> </button> <!-- line i modified -->

  <button > Get started </button>

  <button > Download </button>

  <button > Apply on company website </button>

  <button > 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>