Question

HTML：

<button type="button" onClick="location.href='#'" class="buttonpink2">Claim 10 Free Student Accounts for Your School</button>

的CSS：

/* PINK BUTTON 2 */
.buttonpink2 {
    font-weight: bold;
    font-size: 30px;
    color: white;
    cursor: pointer;
    cursor: hand;
    border-radius: 5px !important;
    box-shadow: 4px 4px 4px #b5bcc2;
    border: 0;
    background-repeat: no-repeat;
    background: #e57780;
    height: 75px;
    width: 100%;
    position: relative;
}

.buttonpink2:after {
    border-radius: 5px !important;
    content: "Claim 10 Free Student Accounts for Your School";
    display: block;
    height: 100%;
    width: 100%;
    opacity: 0;
    background: #c24e57;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
    top: 0;
    left: 0;
    position: absolute;

}

.buttonpink2:hover:after {
    opacity: 1;
}

.buttonpink2 p {
    color: #fff;
    z-index: 1;
    position: relative;
}

看着它，我不知道为什么当我将鼠标悬停在按钮上时，文字移到顶部.. 我想文字仍然在按钮的中心。我做错了什么？

任何人都可以提供帮助吗？

Answer 1

不知道为什么你把它复杂得太多但你只需要使用line-height等于元素高度：

＆＃13;

/* PINK BUTTON 2 */

.buttonpink2 {
  font-weight: bold;
  font-size: 30px;
  color: white;
  cursor: pointer;
  cursor: hand;
  border-radius: 5px !important;
  box-shadow: 4px 4px 4px #b5bcc2;
  border: 0;
  background-repeat: no-repeat;
  background: #e57780;
  height: 75px;
  width: 100%;
  position: relative;
}
.buttonpink2:after {
  border-radius: 5px !important;
  content: "Claim 10 Free Student Accounts for Your School";
  display: block;
  height: 100%;
  width: 100%;
  opacity: 0;
  background: #c24e57;
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  transition: all 1s;
  top: 0;
  left: 0;
  position: absolute;
  line-height: 75px;/*add line height equal of element height*/
}
.buttonpink2:hover:after {
  opacity: 1;
}
.buttonpink2 p {
  color: #fff;
  z-index: 1;
  position: relative;
}

＆＃13;

<button type="button" onClick="location.href='./freeaccess'" class="buttonpink2">Claim 10 Free Student Accounts for Your School</button>

＆＃13;

Answer 2

奇怪的方法，为什么你只是为了改变背景颜色而使用伪元素？

.buttonpink2:after {
    height: 75px;
    line-height:75px;
    ...
}

会解决您的问题，但我建议您删除.buttonpink2:after元素，只需更改按钮的背景颜色

Answer 3

如果您更愿意使用填充而不是行高，则可以执行以下操作：

.buttonpink2:after {
    height: 50%;
    padding: 20px 0;
}

Answer 4

你可以添加一些字母间距：在解决之后，我只添加了0.3px，你可以尝试其他值来使其更好。

＆＃13;

/* PINK BUTTON 2 */
.buttonpink2 {
    font-weight: bold;
    font-size: 30px;
    color: white;
    cursor: pointer;
    cursor: hand;
    border-radius: 5px !important;
    box-shadow: 4px 4px 4px #b5bcc2;
    border: 0;
    background-repeat: no-repeat;
    background: #e57780;
    height: 75px;
    width: 100%;
    position: relative;
}

.buttonpink2:after {
    border-radius: 5px !important;
    content: "Claim 10 Free Student Accounts for Your School";
    display: block;
    height: 100%;
    width: 100%;
    opacity: 0;
    background: #c24e57;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
    top: 0;
    left: 0;
    position: absolute;
    letter-spacing: 0.3px
}

.buttonpink2:hover:after {
    opacity: 1;
}

.buttonpink2 p {
    color: #fff;
    z-index: 1;
    position: relative;
}

＆＃13;

<button type="button" onClick="location.href='#'" class="buttonpink2">Claim 10 Free Student Accounts for Your School</button>

＆＃13;

Answer 5

在这种情况下，您根本不应该使用：after标记。

//所有的定位让按钮变得疯狂。

你应该这样做：

使用.buttonClass {}设置基本按钮样式，并使用.buttonClass：hover {}仅更改按钮的背景。您不必复制：悬停部分中的每个项目。

/* PINK BUTTON 2 */
.buttonpink2 {
    font-weight: bold;
    font-size: 30px;
    color: white;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 4px 4px 4px #b5bcc2;
    border: 0;
    height: 75px;
    width: 100%;
    background: #e57780;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
}

.buttonpink2:hover {
    background: #c24e57;
}

.buttonpink2 p {
    color: #fff;
    z-index: 1;
}

带有悬停效果的按钮上的中心文本

5 个答案: