fixed-phone-button-widget

pug

#phone-button-module
	.pbm-wrap
		.pbm-outside
			button.pbm-button
				img.pbm-icon(src='/img/pbm-icon.png', alt='phone-icon')
				p.pbm-text Заказать звонок

sass

$color: red;

#phone-button-module
	position: fixed
	bottom: 16px
	right: 16px
	width: 140px
	height: 140px
	padding-left: 30px
	padding-top: 30px
	z-index: 50
	min-width: auto
	
	&:hover .pbm-button
		background-color: $color

.pbm-wrap
	position: absolute
	width: 100%
	height: 100%

.pbm-outside, 
.pbm-button
	border-radius: 50%
	transition: all .7s

.pbm-outside
	background-color: transparentize(lighten($color, 40%), .5)
	padding: 15px
	display: inline-block

.pbm-button
	background-color: lighten($color, 10%);
	width: 80px
	height: 80px
	animation: pbm-animate 1.8s infinite ease-in-out
	cursor: pointer
	user-select: none
	-webkit-user-select: none
	padding: 0
	display: block
	border: none
	position: relative
	outline: none

	&:hover
		.pbm-icon
			transform: scale(0.6, 0.6)
			top: 7px

		.pbm-text
			display: block

.pbm-icon
	width: 40px
	position: absolute
	top: 20px
	left: 20px
	transition: all .2s
	user-select: none
	-webkit-user-select: none

.pbm-text
	display: none
	margin: 0
	text-align: center
	color: #fff
	font-size: 10px
	line-height: 14px
	font-family: sans-serif
	text-transform: uppercase
	user-select: none
	-webkit-user-select: none
	position: absolute
	bottom: 8px

@media screen and (max-width: 768px)
	#phone-button-module
		width: 120px
		height: 120px

	.pbm-outside
		padding: 15px

	.pbm-button
		width: 60px
		height: 60px

		&:hover .pbm-icon
			top: 7px

	.pbm-icon
		width: 30px
		top: 15px
		left: 15px

	.pbm-text
		font-size: 9px
		line-height: 10px

@media screen and (max-width: 480px)
	#phone-button-module
		width: 80px
		height: 80px
		padding-top: 10px
		padding-left: 10px
		bottom: 10px
		right: 10px

	.pbm-outside
		padding: 10px

	.pbm-button
		width: 50px
		height: 50px
		cursor: default

		&:hover
			.pbm-icon
				transform: none
				top: 15px

			.pbm-text
				display: none
				
	.pbm-icon
		width: 20px
		top: 15px
		left: 15px
    
    
    
@keyframes pbm-animate
  0%
    transform: rotate(0)

  10%
    transform: rotate(8deg)

  15%
    transform: rotate(-6deg)

  20%
    transform: rotate(8deg)

  25%
    transform: rotate(-10deg)

  30%
    transform: rotate(6deg)

  35%
    transform: rotate(-4deg)

  40%
    transform: rotate(6deg)

  45%
    transform: rotate(-4deg)

  50%
    transform: rotate(0)

  100%
    transform: rotate(0)


@-webkit-keyframes pbm-animate
  0%
    transform: rotate(0)

  10%
    transform: rotate(8deg)

  15%
    transform: rotate(-8deg)

  20%
    transform: rotate(8deg)

  25%
    transform: rotate(-10deg)

  30%
    transform: rotate(6deg)

  35%
    transform: rotate(-4deg)

  40%
    transform: rotate(6deg)

  45%
    transform: rotate(-4deg)

  50%
    transform: rotate(0)

  100%
    transform: rotate(0)