
To learn how to create the CSS Heart in Envelope follow the steps below and watch the video tutorial.
Demo:
Step1.
Add HTML
<div class="valentines-day">
<div class="envelope"></div>
<div class="heart"></div>
<div class="text">HAPPY </br>VALENTINE'S </br>DAY!</div>
<div class="front"></div>
<div class="text2">- hover over the envelope - </div>
</div>
Step2.
Add CSS
Set the colour and the position of the background and elements:
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f1e3d3;
overflow: hidden;
}
.valentines-day {
position: relative;
cursor: pointer;
}
Style the envelope:
.envelope {
position: relative;
filter: drop-shadow(0 0 25px rgba(0,0,0,.3));
}
.envelope:before {
content:"";
position: absolute;
width:254px;
height:254px;
background-color: #ff9494;
transform: rotate(-45deg);
border-radius: 0 15px 0 0;
left:-37px;
top:-82px;
}
.envelope:after {
content:"";
position: absolute;
background-color: #ff9494;
width:360px;
height:225px;
left:-90px;
top:45px;
}

Add and style the heart:
.heart {
position: relative;
background-color: #e01911;
display: inline-block;
height: 180px;
top:50px;
left:0;
transform: rotate(-45deg);
width:180px;
filter: drop-shadow(0 -10px 25px rgba(0,0,0,.3));
transition: .5s;
}
.heart:before, .heart:after {
content:"";
background-color: #e01911;
border-radius:50%;
height: 180px;
width: 180px;
position: absolute;
}
.heart:before {
top:-100px;
left:0;}
.heart:after {
left:100px;
top:0;}

Add the front part of the envelope:
.front {
position: absolute;
width:0;
height:0;
border-right: 190px solid #fbd2d2;
border-top: 113px solid transparent;
border-bottom: 113px solid transparent;
top:44px;
left:80px;
z-index:4;
}
.front:before {
content:"";
position: absolute;
width:0;
height:0;
border-left: 190px solid #fbd2d2;
border-top: 113px solid transparent;
border-bottom: 113px solid transparent;
top:-113px;
left:-170px;
}
.front:after {
width:0;
height:0;
position: absolute;
content:"";
border-bottom: 150px solid #fce7e9;
border-right:180px solid transparent;
border-left: 180px solid transparent;
top:-36px;
left:-170px;
}

Style the text:
.text {
position: absolute;
font-family: arial;
letter-spacing:5px;
text-align: center;
color: white;
z-index:2;
top:80px;
left:15px;
transition: .5s;
}
.text2 {
position: absolute;
top:275px;
color: white;
font-family: brush script mt;
text-align: center;
width:195px;
font-size:20px;
}
Add transition on hover:
.valentines-day:hover .heart {
transform: translateY(-50px) rotate(-45deg);
}
.valentines-day:hover .text {
transform: translateY(-50px);
}
Watch also the video tutorial:
Enjoy coding!
Hey, here’s something that might interest you: