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>

但是，我需要这个形状来成为表单的提交按钮。所以我用相同的 class 名称创建了一个 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.

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>

css 心形 div 变成按钮后看起来不一样

css heart shape div does not appear the same when turned into a button

html

css

css-shapes