TikTok Tutorial #29 - How to create Glassmorphism Button Hover Effects in CSS

Learn with us how to create Glassmorphism Button Hover Effects in CSS!

If you found us on TikTok on the following post, check out this article and copy-paste the full code!

Happy coding! 😻

@creative.tim If you want, you can check the full code in bio 🤩 #programmingexercises #csscoding #webdev #cssprojects #programminglanguage ♬ original sound - Creative Tim

1. HTML Code

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Glassmorphism button</title>
</head>

<body>
	<div class="container">
		<div class="btn"><a href="#">Button 1</a></div>
		<div class="btn"><a href="#" >Button 2</a></div>
				<div class="btn"><a href="#" >Button 3</a></div>

	</div>		
</body>

2. CSS Code

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=Roboto:wght@400;500;700&display=swap");

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Roboto", sans-serif;
}
body {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: linear-gradient(to bottom, #0D1B2A, #1B263B); /*fiolet*/
}
.container {
	width: 1000px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.container .btn {
	position: relative;
	top: 0;
	left: 0;
	width: 250px;
	height: 50px;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
.container .btn a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(255, 255, 255, 0.05);
	box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 30px;
	padding: 10px;
	letter-spacing: 1px;
	text-decoration: none;
	overflow: hidden;
	color: #fff;
	font-weight: 400px;
	z-index: 1;
	transition: 0.5s;
	backdrop-filter: blur(15px);
}
.container .btn:hover a {
	letter-spacing: 3px;
}
.container .btn a::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);
	transform: skewX(45deg) translate(0);
	transition: 0.5s;
	filter: blur(0px);
}
.container .btn:hover a::before {
	transform: skewX(45deg) translate(200px);
}
.container .btn::before {
	content: "";
	position: absolute;
	left: 50%;
	transform: translatex(-50%);
	bottom: -5px;
	width: 30px;
	height: 10px;
	background: #f00;
	border-radius: 10px;
	transition: 0.5s;
	transition-delay: 0.5;
}
.container .btn:hover::before /*lightup button*/ {
	bottom: 0;
	height: 50%;
	width: 80%;
	border-radius: 30px;
}

.container .btn::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translatex(-50%);
	top: -5px;
	width: 30px;
	height: 10px;
	background: #f00;
	border-radius: 10px;
	transition: 0.5s;
	transition-delay: 0.5;
}
.container .btn:hover::after /*lightup button*/ {
	top: 0;
	height: 50%;
	width: 80%;
	border-radius: 30px;
}
.container .btn:nth-child(1)::before, /*chnage 1*/
.container .btn:nth-child(1)::after {
	background: #FFA400;
	box-shadow: 0 0 5px #F49D37, 0 0 15px #F49D37, 0 0 30px #F49D37,
		0 0 60px #F49D37;
}
.container .btn:nth-child(2)::before, /* 2*/
.container .btn:nth-child(2)::after {
	background: #1AFFD5;
	box-shadow: 0 0 5px #1AFFD5, 0 0 15px #1AFFD5, 0 0 30px #1AFFD5,
		0 0 60px #1AFFD5;
}
.container .btn:nth-child(3)::before, /* 3*/
.container .btn:nth-child(3)::after {
	background: #EF476F;
	box-shadow: 0 0 5px #EF476F, 0 0 15px #EF476F, 0 0 30px #EF476F,
		0 0 60px #EF476F;
}

I hope you did find this tutorial useful!

For more web development or UI/UX design tutorials, follow us on:

Other useful resources:

Alexandra Murtaza

Alexandra Murtaza