<div class="wrapper">
	<nav class="main__menu">
		<ul>
			<li><a href="#">Текст</a></li><li><a href="#">Текст</a></li><li><a href="#">Текст</a></li><li><a href="#">Текст</a></li><li><a href="#">Текст</a></li>
		</ul>
	</nav>

	<nav class="main__menu2">
		<ul>
			<li><a href="#">Текст</a></li><li><a href="#">Текст</a></li><li><a href="#">Текст</a></li><li><a href="#">Текст</a></li><li><a href="#">Текст</a></li>
		</ul>
	</nav>

	<nav class="main__menu3">
		<ul>
			<li><a href="#">Текст</a></li><li><a href="#">Текст</a></li><li><a href="#">Текст</a></li><li><a href="#">Текст</a></li><li><a href="#">Текст</a></li>
		</ul>
	</nav>

	<nav class="main__menu4">
		<ul>
			<li><a href="#">Текст</a></li><li><a href="#">Текст</a></li><li><a href="#">Текст</a></li><li><a href="#">Текст</a></li><li><a href="#">Текст</a></li>
		</ul>
	</nav>

	<nav class="main__menu5">
		<ul>
			<li><a href="#">Текст</a></li><li><a href="#">Текст</a></li><li><a href="#">Текст</a></li><li><a href="#">Текст</a></li><li><a href="#">Текст</a></li>
		</ul>
	</nav>

	<nav class="main__menu6">
		<ul>
			<li><a href="#">Текст</a></li><li><a href="#">Текст</a></li><li><a href="#">Текст</a></li><li><a href="#">Текст</a></li><li><a href="#">Текст</a></li>
		</ul>
	</nav>

	<nav class="main__menu7">
		<ul>
			<li><a href="#">Текст</a></li><li><a href="#">Текст</a></li><li><a href="#">Текст</a></li><li><a href="#">Текст</a></li><li><a href="#">Текст</a></li>
		</ul>
	</nav>

	<nav class="main__menu8">
		<ul>
			<li><a href="#"><i class="fa fa-user-circle-o" aria-hidden="true"></i><span>Text</span></a></li><li><a href="#"><i class="fa fa-bar-chart" aria-hidden="true"></i><span>Text</span></a></li><li><a href="#"><i class="fa fa-book" aria-hidden="true"></i><span>Text</span></a></li><li><a href="#"><i class="fa fa-bookmark" aria-hidden="true"></i><span>Text</span></a></li><li><a href="#"><i class="fa fa-cogs" aria-hidden="true"></i><span>Text</span></a></li>
		</ul>
	</nav>

	<nav class="main__menu9">
		<ul>
			<li><a href="#"><span>Text</span><i class="fa fa-cogs" aria-hidden="true"></i></a></li><li><a href="#"><span>Text</span><i class="fa fa-bookmark" aria-hidden="true"></i></a></li><li><a href="#"><span>Text</span><i class="fa fa-book" aria-hidden="true"></i></a></li><li><a href="#"><span>Text</span><i class="fa fa-bar-chart" aria-hidden="true"></i></a></li><li><a href="#"><span>Text</span><i class="fa fa-user-circle-o" aria-hidden="true"></i></a></li>
		</ul>
	</nav>


	<nav class="main__menu10">
		<ul>
			<li><a href="#"><span>Text</span><i class="fa fa-cogs" aria-hidden="true"></i></a></li><li><a href="#"><span>Text</span><i class="fa fa-bookmark" aria-hidden="true"></i></a></li><li><a href="#"><span>Text</span><i class="fa fa-book" aria-hidden="true"></i></a></li><li><a href="#"><span>Text</span><i class="fa fa-bar-chart" aria-hidden="true"></i></a></li><li><a href="#"><span>Text</span><i class="fa fa-user-circle-o" aria-hidden="true"></i></a></li>
		</ul>
	</nav>

	<div style="padding: 40px 0;"></div>
</div>
@import "bourbon"
@import url('https://fonts.googleapis.com/css?family=Roboto')

$a: #000

$m1: #701dbb
$m2: #C11111
$m3: #00B4FF
$m4: #FF4E00
$m5: #159F6D

$m6: #ff3333
$m6_2: #FFD133
$m6_3: #63FF33
$m6_4: #33C3FF
$m6_5: #C833FF

$m8: #157D9F
$m9: #5C9F15
$m10: #9F1573

html, body
	width: 100%
	height: 100%
	font-family: 'Roboto', sans-serif
	letter-spacing: 2px
.wrapper
	width: 100%
	background: linear-gradient(135deg, #e1e1e1 0%, white 50%, #e1e1e1 100%)

a
	text-transform: uppercase
	transition: all .2s ease
	text-decoration: none
	color: #000
	&:hover
		text-decoration: none
		transition: all .2s ease-in

/* menu */

.main__menu
	ul
		display: flex
		justify-content: center
		overflow: hidden
		li
			display: inline-block
			border-right: 1px solid #F6F6F6
			border-top: 1px solid #FAFAFA
			box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16)
			&:last-child
				border-right: 0
				a
					&:before
						right: 0
			&:hover
				border-right-color: transparent
				border-top-color: transparent
			a
				+pr
				display: block
				padding: 40px
				background: linear-gradient(to bottom, #ffffff 0%, #f6f6f6 47%, #fafafa 100%)
				transition: all .1s ease
				&:before
					+c
					+pa
					left: 0
					right: -1px
					height: 3px
					background: $m1
					bottom: 0
					transition: all .2s ease
				&:hover
					transform: translate(0, -5px) scale(1.1)
					transition: all .1s ease-in
					box-shadow: 1px 1px 10px rgba($m1, 0.16)
					z-index: 88
					&:before
						right: 0




/* menu2 */

.main__menu2
	margin-top: 50px
	ul
		display: flex
		justify-content: center
		overflow: hidden
		li
			display: inline-block
			border-right: 1px solid #F6F6F6
			border-top: 1px solid #FAFAFA
			box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16)
			&:last-child
				border-right: 0
				a
					&:before
						right: 0
			a
				+pr
				display: block
				padding: 40px
				background: linear-gradient(to bottom, #ffffff 0%, #f6f6f6 47%, #fafafa 100%)
				transition: all .1s ease
				&:before
					+c
					+pa
					left: 0
					right: -1px
					height: 3px
					background: $m2
					bottom: 0
					transition: all .2s ease
				&:hover
					transform: translate(0, -5px)
					transition: all .2s ease-in
					color: $m2
					&:before
						height: 8px
						bottom: -5px
						transition: all .2s ease-in

/* menu3 */

.main__menu3
	margin-top: 50px
	ul
		display: flex
		justify-content: center
		overflow: hidden
		li
			display: inline-block
			box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16)
			+pr
			display: block
			height: 100px
			min-width: 120px
			background: linear-gradient(to bottom, #ffffff 0%, #f6f6f6 47%, #fafafa 100%)
			transition: all .1s ease
			&:after
				+c
				+pa
				left: 0
				right: -1px
				height: 3px
				background: $m3
				bottom: 0
				transition: all .2s ease
			&:hover
				transform: translate(0, -5px)
				// transition: all .2s ease-in
				transition: all .2s cubic-bezier(0, 1.35, 0.85, 1.81)
				&:after
					height: 8px
					bottom: -5px
					// transition: all .2s ease-in
					transition: all .2s cubic-bezier(0, 1.35, 0.85, 1.81)
			&:last-child
				a
					&:before
						right: 0
			&:nth-child(1)
				a
					&:before
						content: '\f1b2'
			&:nth-child(2)
				a
					&:before
						content: '\f140'
			&:nth-child(3)
				a
					&:before
						content: '\f0e5'
			&:nth-child(4)
				a
					&:before
						content: '\f0e0'
			&:nth-child(5)
				a
					&:before
						content: '\f013'
			a
				width: 100%
				height: 100%
				display: block
				line-height: 150px
				+pr
				font-size: 12px
				text-align: center
				&:hover
					color: $m3
				&:before
					display: block
					line-height: 0
					+pr
					top: 35px
					text-align: center
					font-size: 40px
					font-family: FontAwesome

/* menu4 */

.main__menu4
	margin-top: 50px
	ul
		display: flex
		justify-content: center
		overflow: hidden
		li
			display: inline-block
			box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16)
			+pr
			display: block
			height: 100px
			min-width: 120px
			background: linear-gradient(to bottom, #ffffff 0%, #f6f6f6 47%, #fafafa 100%)
			transition: all .1s ease
			&:after
				+c
				+pa
				left: 0
				right: -1px
				height: 3px
				background: $m4
				bottom: 0
				transition: all .2s ease
			&:before
				+c
				+arr(20, 5, $m4, t)
				+pa
				left: 50%
				margin-left: -10px
				opacity: 0
				bottom: 0
				transition: all .2s ease
			&:hover
				transform: translate(0, -5px)
				transition: all .2s cubic-bezier(0, 1.35, 0.85, 1.81)
				&:after
					height: 8px
					bottom: -5px
					transition: all .2s cubic-bezier(0, 1.35, 0.85, 1.81)
				&:before
					opacity: 1
					bottom: 2.9px
					transition: all .2s ease
			&:last-child
				a
					&:before
						right: 0
			&:nth-child(1)
				a
					&:before
						content: '\f1b2'
			&:nth-child(2)
				a
					&:before
						content: '\f140'
			&:nth-child(3)
				a
					&:before
						content: '\f0e5'
			&:nth-child(4)
				a
					&:before
						content: '\f0e0'
			&:nth-child(5)
				a
					&:before
						content: '\f013'
			a
				width: 100%
				height: 100%
				display: block
				line-height: 150px
				+pr
				font-size: 12px
				text-align: center
				&:hover
					color: $m4
				&:before
					display: block
					line-height: 0
					+pr
					top: 35px
					text-align: center
					font-size: 40px
					font-family: FontAwesome

/* menu5 */

.main__menu5
	margin-top: 50px
	ul
		display: flex
		justify-content: center
		overflow: hidden
		li
			display: inline-block
			box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16)
			+pr
			display: block
			height: 100px
			min-width: 120px
			background: linear-gradient(to bottom, #ffffff 0%, #f6f6f6 47%, #fafafa 100%)
			transition: all .1s ease
			&:after
				+c
				+pa
				left: 0
				right: -1px
				height: 3px
				background: #000
				bottom: 0
				transition: all .2s ease
			&:before
				+c
				+arr(20, 5, $m5, t)
				+pa
				left: 50%
				margin-left: -10px
				opacity: 0
				bottom: 0
				transition: all .2s ease
			&:hover
				transform: translate(0, -5px)
				transition: all .2s cubic-bezier(0, 1.35, 0.85, 1.81)
				&:after
					height: 8px
					bottom: -5px
					transition: all .2s cubic-bezier(0, 1.35, 0.85, 1.81)
					background: $m5
				&:before
					opacity: 1
					bottom: 2.9px
					transition: all .2s ease
			&:last-child
				a
					&:before
						right: 0
			&:nth-child(1)
				a
					&:before
						content: '\f1b2'
			&:nth-child(2)
				a
					&:before
						content: '\f140'
			&:nth-child(3)
				a
					&:before
						content: '\f0e5'
			&:nth-child(4)
				a
					&:before
						content: '\f0e0'
			&:nth-child(5)
				a
					&:before
						content: '\f013'
			a
				width: 100%
				height: 100%
				display: block
				line-height: 150px
				+pr
				font-size: 12px
				text-align: center
				&:hover
					color: $m5
				&:before
					display: block
					line-height: 0
					+pr
					top: 35px
					text-align: center
					font-size: 40px
					font-family: FontAwesome


/* menu 6 */

.main__menu6
	margin-top: 50px
	ul
		display: flex
		justify-content: center
		li
			display: inline-block
			box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16)
			overflow-x: hidden
			a
				text-transform: none
				display: block
				padding: 20px
				background: linear-gradient(to bottom, #ffffff 0%, #f6f6f6 47%, #fafafa 100%)
				overflow: hidden
				+pr
				z-index: 99
				&:after
					+c
					+pa
					left: 0
					right: 0
					top: -3px
					background: shade($m6, 20%)
					height: 3px
					opacity: 0
				&:before
					+c
					width: 200%
					height: 100%
					background: $m6
					+pa
					left: -250%
					top: 0
					transform: skew(20deg)
					transition: all .2s ease
					z-index: -1
				&:hover
					color: #fff
					transition: all .2s ease
					&:before
						left: -50%
						transition: all .2s ease
					&:after
						top: 0
						opacity: 1


/* menu 7 */

.main__menu7
	margin-top: 50px
	ul
		display: flex
		justify-content: center
		li
			display: inline-block
			box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16)
			+pr
			overflow-x: hidden
			&:nth-child(1)
				a
					&:before
						background: $m6
					&:after
						background: shade($m6, 20%)
			&:nth-child(2)
				a
					&:before
						background: $m6_2
					&:after
						background: shade($m6_2, 20%)
			&:nth-child(3)
				a
					&:before
						background: $m6_3
					&:after
						background: shade($m6_3, 20%)
			&:nth-child(4)
				a
					&:before
						background: $m6_4
					&:after
						background: shade($m6_4, 20%)
			&:nth-child(5)
				a
					&:before
						background: $m6_5
					&:after
						background: shade($m6_5, 20%)
			a
				text-transform: none
				display: block
				padding: 10px 20px
				background: linear-gradient(to bottom, #ffffff 0%, #f6f6f6 47%, #fafafa 100%)
				overflow: hidden
				+pr
				z-index: 99
				&:after
					+c
					+pa
					left: 0
					right: 0
					top: -3px
					height: 3px
					opacity: 0
				&:before
					+c
					width: 200%
					height: 100%
					+pa
					left: -250%
					top: 0
					transform: skew(20deg)
					transition: all .2s ease
					z-index: -1
				&:hover
					color: #fff
					text-shadow: 0px 0px 1px rgba(0, 0, 0, 1)
					transition: all .2s ease
					&:before
						left: -50%
						transition: all .2s ease
					&:after
						top: 0
						opacity: 1

/* menu 8 */
.main__menu8
	margin-top: 50px
	ul
		display: flex
		justify-content: center
		li
			display: inline-block
			a
				display: block
				font-size: 40px
				text-align: center
				padding: 10px 30px
				transition: all .3s ease-in
				i
					transition: transform .3s ease
				span
					+pr
					top: 10px
					font-size: 11px
					opacity: 0
					display: block
					transition: all .3s ease-in
					// border: 2px solid transparent
					padding: 5px 10px
					// border-radius: 5px
					&:before
						opacity: 0
						transition: all .3s ease-in
				&:hover
					transition: all .3s ease-in
					color: $m8
					i
						transform: scale(1.2)
						transition: transform .3s ease
					span
						opacity: 1
						transition: all .3s ease-in
						// border-color: $m8
						color: $m8
						&:before
							+c
							+pa
							opacity: 1
							top: -6px
							left: 50%
							margin-left: -5px
							+arr(10, 5, $m8, t)
							transition: all .3s ease-in

/* menu 9 */

.main__menu9
	margin-top: 50px
	ul
		display: flex
		justify-content: center
		li
			display: inline-block
			font-size: 40px
			a
				display: block
				padding: 15px 40px
				text-align: center
				transition: all .1s ease-out
				overflow: hidden
				+pr
				&:before
					+c
					+pa
					bottom: -10px
					right: 2px
					+arr(10, 10, $m9, tl)
					opacity: 0
					transition: all .2s ease-out
					transform: rotate(45deg)
				span
					padding: 5px 0
					transition: all .2s ease-out
					display: block
					font-size: 11px
					opacity: 0
					font-weight: bold
				&:hover
					transition: all .1s ease-out
					color: $m9
					text-shadow: 4px 4px 5px rgba($m9, 0.4)
					span
						transition: all .2s ease-out
						opacity: 1
						text-shadow: none
					&:before
						bottom: 0
						opacity: 1
						transition: all .2s ease-out
						transform: rotate(0deg)

/* menu 10 */

.main__menu10
	margin-top: 50px
	ul
		display: flex
		justify-content: center
		li
			display: inline-block
			font-size: 40px
			a
				display: block
				padding: 20px 40px
				text-align: center
				transition: all .1s ease-out
				overflow: hidden
				filter: blur(1px)
				+pr
				&:before
					+c
					+pa
					bottom: -10px
					left: 50%
					margin-left: -5px
					+arr(10, 10, $m10, tl)
					opacity: 0
					transition: all .2s ease-out
					transform: rotate(45deg)
				span
					padding: 5px 0
					transition: all .2s ease-out
					display: block
					font-size: 11px
					opacity: 0
					font-weight: bold
				&:hover
					transition: all .1s ease-out
					color: $m10
					text-shadow: 4px 4px 5px rgba($m10, 0.4)
					filter: blur(0px) !important
					span
						transition: all .2s ease-out
						opacity: 1
						text-shadow: none
					&:before
						bottom: -5px
						opacity: 1
						transition: all .2s ease-out
						transform: rotate(45deg)
View Compiled
Run Pen

External CSS

  1. https://codepen.io/mast/pen/egWzgX
  2. https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.