html - css heart shape 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 时的形状不一样.

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>

Note: You can also change the style a little when is clicked by using :active selector.