<div class="orta">
<button class="gift">
<div class="yatay"><div>
<div class="dikey"><div>
<img src="https://i.hizliresim.com/9zDmAz.png"></img>
  </button>
  <div class="back">Hello Codeopen!</div></div>
View Compiled

.gift{
  position:relative;
  height:32px;
  width:162px;
  background:#f74684;
  border-radius:100px;
  border:2px solid #f74684;
  display:inline-block;
}
.gift:focus{
  box-shadow: 0 0 2px 0px black;
  outline:none;
  position:relative;
  height:30px;
  width:160px;
  top:-10px;
  background:#f74684;
  border-radius:100px;
  border:2px solid #f74684;
  -moz-animation-name: dus;
  -webkit-animation-name: dus;
  animation: dus, yok 0s 1s forwards;
  -moz-animation-timing-function: cubic-bezier(1,0,.91,.100);
  -webkit-animation-timing-function: cubic-bezier(1,0,.91,.100);
  animation-timing-function: cubic-bezier(1,0,.91,.100);
  -moz-animation-duration: 1.5s;
  animation-duration: 1.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes dus {
  from{
      transform: rotate(-20deg);

  }
    to {
       -ms-transform: rotate(20deg);
      transform: rotate(40deg);
      top: 1000px;
    }
}
@keyframes yok {
  to {
transition: opacity; 
opacity:0
    }
}
.yatay{
 background:white;
 height:5px;
 width:160px;
 position:relative;
 top:10px;
 left:-8px;
 display:inline-block;
}
.dikey{
 background:white;
 height:34px;
 width:5px;
 position:relative;
 top:-14px;
 left:50%;
}
img{
  margin-left:-17.5px;
  height:100%;
  width:40px;
  margin-top:-3px;
}
.back{
  position:relative;
  height:32px;
  width:162px;
  background:#972A5C;
  border-radius:100px;
  border: 3px solid #E85656;
  top:-44px;
  left:0px;
  z-index:-1;
  text-align:center;
  font-size:18px;
  color:white;
  line-height:26px;
  box-sizing: border-box;
  font-family:sans-serif;
}
.orta{
  position: relative;
  width: 320px;
  top: 50%;
  left: 50%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.