%button.btn.btn-like
  .heart
  
%button.btn.btn-dislike
  .heart
  
.wrapper
  .card-container
    .dog
      .head
        .ears
        .face
        .eyes
          .teardrop
        .nose
        .mouth
          .tongue
        .chin
      .body
        .tail
        .legs
View Compiled
$orange: #F7AA2B
$brown: #CB7A1D
$non-white: #FEFEFE
$red: #F5534F
$grey: #e8e7ec
$blue: #5777C9
$dark: #451d1c

%transition
	transition: .2s ease-in

*
	padding: 0
	margin: 0
	&,
	&::before,
	&::after
		box-sizing: border-box


html, body, .wrapper
	width: 100%
	height: 100%

.wrapper
	@extend %transition
	display: flex
	align-items: center
	justify-content: center
	background: $blue
	overflow-y: hidden

.card-container
	position: relative
	width: 360px
	height: 480px
	margin: auto
	padding-top: 125px
	border-radius: 3%
	background: #fff
	z-index: 0
	&::before,
	&::after
		content: ''
		position: absolute
		height: 100%
		margin: auto
		left: 0
		right: 0
		border-radius: 3%
		z-index: -1

	&::before,
		top: 3%
		width: 93%
		background: rgba(255,255,255,0.7)

	&::after
		top: 5.5%
		width: 85%
		background: rgba(255,255,255,0.35)

.dog

	.head,
	.body
		position: relative
		width: 115px

	.head
		height: 115px
		border-radius: 50% 50% 0 0
		margin: 0 auto

	.ears
		position: relative
		top: -14%
		width: 100%
		&::before,
		&::after
			@extend %transition
			content: ''
			position: absolute
			top: 0
			width: 35px
			height: 70px
			background: $brown
			border-top: 11px solid $orange
			border-left: 7px solid $orange
			border-right: 7px solid $orange

		&::before
			left: 0
			border-radius: 50% 45% 0 0

		&::after
			right: 0
			border-radius: 45% 50% 0 0


	.face
		position: absolute
		background: $orange
		width: 100%
		height: 100%
		border-radius: 50% 50% 0 0
		&::before,
		&::after
			@extend %transition
			content: ''
			display: block
			margin: auto
			background: $non-white

		&::before
			width: 15px
			height: 35px
			margin-top: 24px
			border-radius: 20px 20px 0 0

		&::after
			position: absolute
			bottom: -1px
			left: 0
			right: 0
			width: 60px
			height: 65px
			border-radius: 45% 45% 0 0

	.eyes
		@extend %transition
		position: relative
		top: 29%
		text-align: center
		&::before,
		&::after
			content: ''
			display: inline-block
			width: 12px
			height: 12px
			border-radius: 100%
			background: $dark
			margin: 0 14.5%

	.teardrop
		@extend %transition
		position: absolute
		top: 125%
		left: 19%
		width: 6px
		height: 6px
		border-radius: 0 50% 50% 50%
		transform: rotate(45deg)
		background: $non-white
		visibility: hidden

	.nose
		@extend %transition
		position: relative
		top: 35%
		width: 16px
		height: 8px
		border-radius: 35px 35px 65px 65px
		background: $dark
		margin: auto

	.mouth
		@extend %transition
		position: relative
		top: 34.5%
		width: 4px
		height: 6px
		margin: 0 auto
		text-align: center
		background: $dark
		&::before,
		&::after
			content: ''
			position: absolute
			top: -4px
			width: 18px
			height: 18px
			border-radius: 50%
			border: 4px solid $dark
			border-left-color: transparent
			border-top-color: transparent
			z-index: 2

		&::before
			transform: translateX(-89%) rotate(45deg)

		&::after
			transform: translateX(-2px) rotate(45deg)

	.tongue
		position: relative
		z-index: 1
		&::before,
		&::after
			content: ''
			position: absolute
			@extend %transition

		&::before
			top: 10px
			left: -7px
			width: 18px
			height: 0
			border-radius: 50%
			background: $dark
			z-index: -1

		&::after
			top: 14px
			left: -4px
			width: 12px
			height: 0
			border-radius: 20px
			background: $red
			z-index: 5

	.chin
		@extend %transition
		position: relative
		top: 47.5%
		margin: 0 auto
		width: 12px
		height: 12px
		border-top: 10px solid $grey
		border-left: 5px solid transparent
		border-right: 5px solid transparent
		border-radius: 2px
		z-index: 0


	.body
		position: relative
		height: 139px
		margin: auto
		z-index: 0
		&::before,
		&::after
			content: ''
			position: absolute
			top: -1px
			left: 0
			right: 0
			bottom: 0
			display: block
			width: 100%
			margin: auto
			background: $orange

		&::after
			top: -2px
			bottom: -1px
			width: 60px
			background: $non-white

	.tail
		@extend %transition
		position: absolute
		left: -60%
		bottom: 1px
		background: $orange
		width: 93px
		height: 15px
		transform: rotate(45deg)
		transform-origin: 100% 50%
		border-radius: 25px 0 0 25px
		z-index: -2

	.legs
		position: absolute
		bottom: 0
		left: -10%
		width: 120%
		height: 15%
		background: $orange
		border-radius: 10px 10px 0 0
		&::before,
		&::after
			content: ''
			position: absolute
			bottom: 1px
			background: $brown
			z-index: -1

		&::before
			left: -7.5%
			width: 115%
			height: 55%
			border-radius: 5px 5px 0 0

		&::after
			left: -3.5%
			width: 107%
			height: 250%
			border-radius: 20px 20px 35px 35px


@keyframes movetongue
	100%
		height: 27px

@keyframes movetail
	0%
		transform: rotate(37deg)
	100%
		transform: rotate(52deg)

@keyframes cry
	100%
		visibility: visible

.btn
	@extend %transition
	width: 68px
	height: 68px
	position: absolute
	top: 50%
	margin-top: -34px
	padding-top: 10px
	outline: none
	border: none
	border-radius: 50%
	box-shadow: 0 5px 10px rgba(0,0,0,0.1)
	background: $non-white
	z-index: 5
	&:hover
		transform: scale(1.05)

	&-like
		right: 10%
		@media (min-width: 768px)
			left: calc(50% + 225px)
			right: initial

	&-dislike
		left: 10%
		@media (min-width: 768px)
			left: calc(50% - 293px)
		&::after
			content: ''
			position: absolute
			transform: translate(-50%,-50%) rotate(-45deg)
			top: 50%
			left: 50%
			width: 6px
			height: 38px
			background: #b5b5b5
			border: 2px solid $non-white
		.heart
			&::before,
			&::after
				background-color: #b5b5b5

.heart
	position: relative
	display: inline-block
	width: 36px
	height: 30px

	&::before,
	&::after
		content: ""
		position: absolute
		top: 0
		left: 0
		border-radius: 20px 20px 0 0
		width: 18px
		height: 28px
		background-color: $red
		transform: rotate(45deg)
		transform-origin: 100% 100%

	&::after
		left: 18px
		transform: rotate(-45deg)
		transform-origin: 0 100%

.btn-like:hover ~ .wrapper,
.btn-like:active ~ .wrapper
	background: #F0754A
	.face
		&::before
			margin-top: 10px
		&::after
			height: 85px
	.eyes
		top: 13%
		&::before,
		&::after
			width: 18px
			height: 5px
			margin: 0px 12.5%
			transform: rotate(-37.5deg)
			border-radius: 20px

		&::after
			transform: rotate(37.5deg)
	.nose
		top: 18%
	.mouth
		top: 16.5%
	.tongue
		&::before
			height: 12px
		&::after
			height: 24px
			animation: movetongue .1s linear .35s infinite alternate forwards
	.chin
		top: 34%
	.tail
		animation: movetail .1s linear infinite alternate forwards

.btn-dislike:hover ~ .wrapper,
.btn-dislike:active ~ .wrapper
	background: #747499
	.ears
		&::before
			transform: rotate(-50deg) translate(-7px, 2px)
		&::after
			transform: rotate(50deg) translate(7px, 2px)
	.face
		&::before
			margin-top: 28px
		&::after
			height: 55px
	.eyes
		top: 38%
		&::before,
		&::after
			width: 18px
			height: 5px
			margin: 0px 14.5%
			transform: rotate(-37.5deg)
			border-radius: 20px
		&::after
			transform: rotate(37.5deg)
	.teardrop
		animation: cry 0.1s ease-in 0.25s forwards
	.nose
		top: 44%
	.mouth
		top: 42%
	.chin
		top: 52%
	.tail
		transform: rotate(0)
View Compiled
/**
Pure CSS. Based on Dribbble's https://dribbble.com/shots/3955284-Dog-Cute
**/
Rerun