Try CSS3 sticker

[sergeyt]

Yet another card view. The code could be found here.

[sergeyt]

HTML:

<div class="button">Just
simple css 
sticker</div>
<link async href="http://fonts.googleapis.com/css?family=Gochi%20Hand" data-generated="http://enjoycss.com" rel="stylesheet" type="text/css"/>

[sergeyt]

CSS:

.button {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 229px;
  height: 208px;
  content: "";
  padding: 60px 0 0;
  border-bottom: 1px solid rgba(0,0,0,0.2);
  border-left: 1px solid rgba(0,0,0,0.2);
  -webkit-border-radius: 0 10px 200px / 0 200px 14px 250px;
  border-radius: 0 10px 200px / 0 200px 14px 250px;
  font: normal normal normal 34px/1.3 "Gochi Hand", Helvetica, sans-serif;
  color: rgba(255,0,106,0.58);
  text-align: center;
  white-space: pre;
  background: -webkit-repeating-linear-gradient( -90deg, rgba(129,203,188,0.5) 0, rgba(129,203,188,0.5) 0.44%, rgba(0,0,0,0) 0.44%, rgba(0,0,0,0) 22%), #fcf59b;
  background: -moz-repeating-linear-gradient( 180deg, rgba(129,203,188,0.5) 0, rgba(129,203,188,0.5) 0.44%, rgba(0,0,0,0) 0.44%, rgba(0,0,0,0) 22%), #fcf59b;
  background: repeating-linear-gradient( 180deg, rgba(129,203,188,0.5) 0, rgba(129,203,188,0.5) 0.44%, rgba(0,0,0,0) 0.44%, rgba(0,0,0,0) 22%), #fcf59b;
  background-position: 50% 50%;
  -webkit-box-shadow: -3px 5px 12px 0 rgba(0,0,0,0.1) ;
  box-shadow: -3px 5px 12px 0 rgba(0,0,0,0.1) ;
  -webkit-transform: rotateZ(-4deg) scaleX(1) scaleY(1) scaleZ(1)  ;
  transform: rotateZ(-4deg) scaleX(1) scaleY(1) scaleZ(1)  ;
}

.button:after {
  width: 30px;
  height: 30px;
  position: absolute;
  content: "";
  top: 9px;
  right: 0;
  left: 122px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  font: normal normal normal medium/normal Arial, Helvetica, sans-serif;
  color: rgba(0,0,0,0.9);
  background: -webkit-radial-gradient( circle closest-side, rgba(25,119,196,1) 0, rgba(25,119,196,1) 4%, rgba(12,113,201,1) 77%, rgba(255,255,255,0) 89%, rgba(255,255,255,0) 100%), -webkit-radial-gradient( circle closest-side, rgba(0,0,0,0.4) 0, rgba(0,0,0,0.2) 81%, rgba(255,255,255,0) 92%, rgba(255,255,255,0) 100%), -webkit-radial-gradient( ellipse closest-side, rgba(64,150,238,1) 0, rgba(64,150,238,1) 100%), rgba(255,255,255,0.9);
  background: -moz-radial-gradient( circle closest-side, rgba(25,119,196,1) 0, rgba(25,119,196,1) 4%, rgba(12,113,201,1) 77%, rgba(255,255,255,0) 89%, rgba(255,255,255,0) 100%), -moz-radial-gradient( circle closest-side, rgba(0,0,0,0.4) 0, rgba(0,0,0,0.2) 81%, rgba(255,255,255,0) 92%, rgba(255,255,255,0) 100%), -moz-radial-gradient( ellipse closest-side, rgba(64,150,238,1) 0, rgba(64,150,238,1) 100%), rgba(255,255,255,0.9);
  background: radial-gradient( circle closest-side, rgba(25,119,196,1) 0, rgba(25,119,196,1) 4%, rgba(12,113,201,1) 77%, rgba(255,255,255,0) 89%, rgba(255,255,255,0) 100%), radial-gradient( circle closest-side, rgba(0,0,0,0.4) 0, rgba(0,0,0,0.2) 81%, rgba(255,255,255,0) 92%, rgba(255,255,255,0) 100%), radial-gradient( ellipse closest-side, rgba(64,150,238,1) 0, rgba(64,150,238,1) 100%), rgba(255,255,255,0.9);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 96% -4%, 71% 43%, 50% 50%;
  -webkit-background-size: 20px 20px, 20px 20px, auto auto;
  background-size: 20px 20px, 20px 20px, auto auto;
  -webkit-box-shadow: -4px 8px 5px 1px rgba(0,0,0,0.2) ;
  box-shadow: -4px 8px 5px 1px rgba(0,0,0,0.2) ;
}

[sergeyt]

Port CSS to LESS. Use 'sticker' for CSS class name.