CSS实现心形DIV转化为按钮后样式不同

Question

我有以下代码。

.heart {
  float: left;
  margin-top: 10px;
  width: 10px;
  height: 10px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  background-color: red;
}

.heart:before,
.heart:after {
  position: absolute;
  width: 10px;
  height: 10px;
  content: '';
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  background-color: red;
}

.heart:before {
  bottom: 0px;
  left: -5px;
}

.heart:after {
  top: -5px;
  right: 0px;
}

<div class="heart"></div>

然而，我需要将这个形状变成表单的提交按钮。因此，我创建了一个具有相同类名的button：

<button type="submit" class="heart"></button>

我认为一个按钮仍然可以看起来和以前一样。我已经阅读了一些资料并注意到需要添加border: none;，我已经添加了，但是形状仍然不同于它作为一个div时的形状。

- newbieCoder

Answer 1

移除按钮默认的 padding 和 border，就可以愉快地开始了。

.heart {
  float: left;
  margin: 10px;
  width: 10px;
  height: 10px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  background-color: red;
  padding: 0;  /*added code*/
  border: none;  /*added code*/
  outline:none;
}

.heart:before,
.heart:after {
  position: absolute;
  width: 10px;
  height: 10px;
  content: '';
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  background-color: red;
}

.heart:before {
  bottom: 0px;
  left: -5px;
}

.heart:after {
  top: -5px;
  right: 0px;
}
button.heart:active,
button.heart:active:after,
button.heart:active:before {
  background-color: #e80202;
  box-shadow: inset 1px 1px 1px #c50b0b;
}

<div class=heart>
</div>


<button type="submit" class="heart"></button>

注意：你也可以使用:active选择器在点击时稍微更改样式。

- Chiller

---

话虽如此，OP可能想要研究一些类似normalize.css的东西。 - domsson

Answer 2

按钮默认应用了padding。除了border之外，还要将其移除：

.heart {
  float: left;
  margin-top: 10px;
  width: 10px;
  height: 10px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  background-color: red;
  padding: 0;
  border: 0;
}

.heart:before,
.heart:after {
  position: absolute;
  width: 10px;
  height: 10px;
  content: '';
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  background-color: red;
}

.heart:before {
  bottom: 0px;
  left: -5px;
}

.heart:after {
  top: -5px;
  right: 0px;
}

The html for this css is simply:

<button type="submit" class="heart"></button><br><br>
<div class=heart>
</div>

- sol