)
DEMO:
HTML:
Kod:
<div class="unsubscribe">
<div class="title">Abonelikten çıkmak istediğinizden emin misiniz?</div>
<div class="text">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</div>
<div class="buttons">
<a href="https://www.webailesi.com/yonlendir.php?link=%23" class="button primary">Evet, eminim :(</a>
<a href="https://www.webailesi.com/yonlendir.php?link=%23" class="button">Vazgeç</a>
</div>
<div class="emoji">
<div class="face">
<div class="eyes">
<div class="eye"></div>
<div class="eye"></div>
</div>
<div class="mouth"></div>
</div>
</div>
</div>Kod:
*{border-sizing: border-box}
body{
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
padding: 0;
margin: 0;
background: #e8e8e0
}
.unsubscribe{
position: relative;
width: 500px;
max-width: 100%;
margin: 50px auto;
background: #fff;
padding: 50px;
border-radius: 10px;
box-shadow: rgba(0,0,0,.2) 0 10px 10px -10px
}
.unsubscribe .title{
text-align: center;
font-size: 1.3em;
font-weight: bold;
color: #434982
}
.unsubscribe .text{
margin-top: 10px;
text-align: center;
font-size: .95em;
color: rgba(0,0,0,.6)
}
.unsubscribe .buttons{
text-align: center;
margin-top: 25px
}
.unsubscribe .buttons .button{
text-decoration: none;
color: #666;
padding: 8px 20px;
margin: 0 5px;
background: #ddd;
border-radius: 50px;
font-weight: bold;
font-size: .9em;
transition: opacity .2s ease
}
.unsubscribe .buttons .button:hover{opacity: .7}
.unsubscribe .buttons .button.primary{
color: #fff;
background: #01d28e
}
.unsubscribe .emoji{
text-align: center;
margin-top: 40px
}
.unsubscribe .emoji .face{
display: inline-block;
position: relative;
overflow: hidden;
width: 100px;
height: 100px;
background: #dcd880;
border-radius: 50%
}
.unsubscribe .emoji .face:before{
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
left: -7px;
top: -7px;
border-radius: 50%;
background: #f6f078
}
.unsubscribe .emoji .face .eyes{
position: absolute;
width: 50%;
left: 25%;
top: 30%;
display: flex;
justify-content: space-between;
}
.unsubscribe .emoji .face .eyes .eye{
width: 12px;
height: 12px;
background: #745701;
border-radius: 50%;
}
.unsubscribe .emoji .face .mouth{
position: absolute;
width: 20px;
height: 20px;
top: 57%;
left: calc(50% - 10px);
background: #745701;
border-radius: 50%;
transition: all .3s ease
}
.unsubscribe .emoji.sad .face .mouth{
width: 50px;
height: 4px;
border-radius: 10px;
top: 63%;
left: calc(50% - 25px)
}
.unsubscribe .emoji.happy .face .mouth{
width: 50px;
height: 18px;
border-radius: 0 0 50px 50px;
left: calc(50% - 25px)
}Kod:
$(function() {
$('.unsubscribe .button').hover( function(){
$('.unsubscribe .emoji').toggleClass($(this).index() ? 'happy' : 'sad');
},function(){
$('.unsubscribe .emoji').toggleClass($(this).index() ? 'happy' : 'sad');
});
});
