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

Question

I have the following code

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

However, I need this shape to become a submit button for a form. So I created a button instead with the same class name:

I'd assume that a button can still just look exactly the same. I've done some reading and noticed i need to have border: none; which I've added, but the shape is still not the same as it was when it was a div.

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

2 Answers