cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              %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
            
          
!
            
              $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)
            
          
!
            
              /**
Pure CSS. Based on Dribbble's https://dribbble.com/shots/3955284-Dog-Cute
**/
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console