Css heart shape div not showing the same when it turns into a button
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;
}
<div class="heart"></div>
However, I need this form to become a form submit button. So I created button
instead with the same class name:
<button type="submit" class="heart"></button>
I would guess that the button may still look exactly the same. I did some reading and noticed that I needed to add border: none;
, but the shape is still not what it was when it was div
.
source to share
Remove the default padding
and buttons and border
you're good to go.
.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 slightly on click
:active
.
source to share
Applies to this button by default padding
. Remove this in addition to 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>
source to share