如何在不移动按钮本身的情况下移动按钮内的文本

Question

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

我需要只移动 GitHub 向上按钮 中的文本而不移动其他按钮，所以...

填充不起作用，因为它会移动按钮本身，而将文本留在同一位置（这不是我的目标）
position top, bottom 和 padding 做同样的事情但是用按钮移动文本

所以我需要介于这两个参数之间的东西（只移动文本而不移动按钮）

Answer 1

您可以尝试以下操作：将按钮内的文本放入 <span> 标记中，然后您可以使用 position: relative; 和 bottom: 10px;.

简单地设置样式

像那样：

<!-- 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;
}

这是你想要的吗？

片段：

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

如何在不移动按钮本身的情况下移动按钮内的文本

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

css

button