Глассморфные кнопки

Пример:

Подробнее

Выбрать другой фон для примера:

HTML:

<div class="glass-btn glass-btn-red">
	<a href="#url">Подробнее</a>
</div>
<div class="glass-btn glass-btn-blue">
	<a href="#url">Подробнее</a>
</div>
<div class="glass-btn glass-btn-green">
	<a href="#url">Подробнее</a>
</div>

<a href="#url">Подробнее</a>

</div>

<a href="#url">Подробнее</a>

</div>

<a href="#url">Подробнее</a>

</div>

CSS:

Верхняя и нижняя подсветка
Нижняя подсветка

.glass-btn {
	position: relative;
	width: 220px;
	height: 50px;
	margin: 20px;
	display: inline-block;
	text-align: center;
}
.glass-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-radius: 30px;
	padding: 0 10px;
	letter-spacing: 1px;
	text-decoration: none;
	text-transform: uppercase;
	overflow: hidden;
	color: #fff;
	font-family: "Roboto", sans-serif;
	font-weight: bold;
	font-size: 16px;
	z-index: 1;
	transition: 0.5s;
	backdrop-filter: blur(15px);
}
.glass-btn:hover a {
	letter-spacing: 3px;
}
.glass-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);
}
.glass-btn:hover a:before {
	transform: skewX(45deg) translate(200px);
}
.glass-btn a:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	transition: 0.5s;
	border-radius: 30px;
	z-index: -1;
}
.glass-btn:hover a:after {
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.glass-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;
}
.glass-btn:hover:before {
	bottom: 0;
	height: 50%;
	width: 80%;
	border-radius: 30px;
}
.glass-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;
}
.glass-btn:hover:after {
	top: 0;
	height: 50%;
	width: 80%;
	border-radius: 30px;
}
.glass-btn.glass-btn-red a:after,
.glass-btn.glass-btn-red:before,
.glass-btn.glass-btn-red:after {
	background: #ff4747;
	box-shadow: 0 0 5px #ff4747, 0 0 15px #ff4747, 0 0 30px #ff4747, 0 0 60px #ff4747;
}
.glass-btn.glass-btn-blue a:after,
.glass-btn.glass-btn-blue:before,
.glass-btn.glass-btn-blue:after {
	background: #419cec;
	box-shadow: 0 0 5px #419cec, 0 0 15px #419cec, 0 0 30px #419cec, 0 0 60px #419cec;
}
.glass-btn.glass-btn-green a:after,
.glass-btn.glass-btn-green:before,
.glass-btn.glass-btn-green:after {
	background: #38ba35;
	box-shadow: 0 0 5px #38ba35, 0 0 15px #38ba35, 0 0 30px #38ba35, 0 0 60px #38ba35;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

.glass-btn {

position: relative;

width: 220px;

height: 50px;

margin: 20px;

display: inline-block;

text-align: center;

}

.glass-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-radius: 30px;

padding: 0 10px;

letter-spacing: 1px;

text-decoration: none;

text-transform: uppercase;

overflow: hidden;

color: #fff;

font-family: "Roboto", sans-serif;

font-weight: bold;

font-size: 16px;

z-index: 1;

transition: 0.5s;

backdrop-filter: blur(15px);

}

.glass-btn:hover a {

letter-spacing: 3px;

}

.glass-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);

}

.glass-btn:hover a:before {

transform: skewX(45deg) translate(200px);

}

.glass-btn a:after {

content: "";

position: absolute;

top: 50%;

left: 50%;

width: 0;

height: 0;

transition: 0.5s;

border-radius: 30px;

z-index: -1;

}

.glass-btn:hover a:after {

left: 0;

top: 0;

width: 100%;

height: 100%;

}

.glass-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;

}

.glass-btn:hover:before {

bottom: 0;

height: 50%;

width: 80%;

border-radius: 30px;

}

.glass-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;

}

.glass-btn:hover:after {

top: 0;

height: 50%;

width: 80%;

border-radius: 30px;

}

.glass-btn.glass-btn-red a:after,

.glass-btn.glass-btn-red:before,

.glass-btn.glass-btn-red:after {

background: #ff4747;

box-shadow: 0 0 5px #ff4747, 0 0 15px #ff4747, 0 0 30px #ff4747, 0 0 60px #ff4747;

}

.glass-btn.glass-btn-blue a:after,

.glass-btn.glass-btn-blue:before,

.glass-btn.glass-btn-blue:after {

background: #419cec;

box-shadow: 0 0 5px #419cec, 0 0 15px #419cec, 0 0 30px #419cec, 0 0 60px #419cec;

}

.glass-btn.glass-btn-green a:after,

.glass-btn.glass-btn-green:before,

.glass-btn.glass-btn-green:after {

background: #38ba35;

box-shadow: 0 0 5px #38ba35, 0 0 15px #38ba35, 0 0 30px #38ba35, 0 0 60px #38ba35;

}

.glass-btn {
	position: relative;
	width: 220px;
	height: 50px;
	margin: 20px;
	display: inline-block;
	text-align: center;
}
.glass-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-radius: 30px;
	padding: 0 10px;
	letter-spacing: 1px;
	text-decoration: none;
	text-transform: uppercase;
	overflow: hidden;
	color: #fff;
	font-family: "Roboto", sans-serif;
	font-weight: bold;
	font-size: 16px;
	z-index: 1;
	transition: 0.5s;
	backdrop-filter: blur(15px);
}
.glass-btn:hover a {
	letter-spacing: 3px;
}
.glass-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);
}
.glass-btn:hover a:before {
	transform: skewX(45deg) translate(200px);
}
.glass-btn a:after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 0;
	height: 0;
	transition: 0.5s;
	border-radius: 30px;
	z-index: -1;
}
.glass-btn:hover a:after {
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.glass-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;
}
.glass-btn:hover:before {
	bottom: 0;
	height: 80%;
	width: 80%;
	border-radius: 30px;
}
.glass-btn.glass-btn-red a:after,
.glass-btn.glass-btn-red:before {
	background: #ff4747;
	box-shadow: 0 0 5px #ff4747, 0 0 15px #ff4747, 0 0 30px #ff4747, 0 0 60px #ff4747;
}
.glass-btn.glass-btn-blue a:after,
.glass-btn.glass-btn-blue:before{
	background: #419cec;
	box-shadow: 0 0 5px #419cec, 0 0 15px #419cec, 0 0 30px #419cec, 0 0 60px #419cec;
}
.glass-btn.glass-btn-green a:after,
.glass-btn.glass-btn-green:before {
	background: #38ba35;
	box-shadow: 0 0 5px #38ba35, 0 0 15px #38ba35, 0 0 30px #38ba35, 0 0 60px #38ba35;
}

100

101

102

.glass-btn {

position: relative;

width: 220px;

height: 50px;

margin: 20px;

display: inline-block;

text-align: center;

}

.glass-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-radius: 30px;

padding: 0 10px;

letter-spacing: 1px;

text-decoration: none;

text-transform: uppercase;

overflow: hidden;

color: #fff;

font-family: "Roboto", sans-serif;

font-weight: bold;

font-size: 16px;

z-index: 1;

transition: 0.5s;

backdrop-filter: blur(15px);

}

.glass-btn:hover a {

letter-spacing: 3px;

}

.glass-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);

}

.glass-btn:hover a:before {

transform: skewX(45deg) translate(200px);

}

.glass-btn a:after {

content: "";

position: absolute;

top: 100%;

left: 50%;

width: 0;

height: 0;

transition: 0.5s;

border-radius: 30px;

z-index: -1;

}

.glass-btn:hover a:after {

left: 0;

top: 0;

width: 100%;

height: 100%;

}

.glass-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;

}

.glass-btn:hover:before {

bottom: 0;

height: 80%;

width: 80%;

border-radius: 30px;

}

.glass-btn.glass-btn-red a:after,

.glass-btn.glass-btn-red:before {

background: #ff4747;

box-shadow: 0 0 5px #ff4747, 0 0 15px #ff4747, 0 0 30px #ff4747, 0 0 60px #ff4747;

}

.glass-btn.glass-btn-blue a:after,

.glass-btn.glass-btn-blue:before{

background: #419cec;

box-shadow: 0 0 5px #419cec, 0 0 15px #419cec, 0 0 30px #419cec, 0 0 60px #419cec;

}

.glass-btn.glass-btn-green a:after,

.glass-btn.glass-btn-green:before {

background: #38ba35;

box-shadow: 0 0 5px #38ba35, 0 0 15px #38ba35, 0 0 30px #38ba35, 0 0 60px #38ba35;

}

Лидия Александровна: 26.07.2023 в 21:18

Закачала ваши стеклянные кнопки на свой сайт в Сraftum. Смотрятся замечательно! Но чтобы кнопки стали живыми не получается. Т.е. нужно ещё вставлять какой-то код, чтобы с этих кнопок переходить на другую страницу? Будьте добры, подскажите

Ответить
- Alexander: 01.08.2023 в 08:05
  Наверное так:
  
  <a href="ссылка_на _страницу">Подробнее</a>
  Ответить
Алексей.: 02.07.2023 в 14:28

Я счастлив! Кнопточки сделали мой день)
https://baae48.stage.rufj.su/asiatex/asiatex-3

Ответить
- Лидия Александровна: 30.07.2023 в 18:16
  
  Алексей, добрый день! У меня кнопки тоже прекрасно появились на сайте, но не работают. Как у вас они заработали? Что вы добавили, или изменили?
  
  Ответить

Пример:

HTML:

CSS:

Смотрите также:

Оформление текста в SVG

Круговая пульсация на элементах

Кнопка "вверх" и варианты ее оформления

Добавить комментарий:

Комментарии: