使用React.js实现泡泡糖（软糖 | 口香糖）风格的社交按钮

ReactJS social buttons，按钮带漂亮的渐变色彩，鼠标悬停可以变色。很不错的React按钮控件设计。

react, app, blob, button

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3551
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

$primary: #1976D2;

#root {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background: $primary;
}

.social {
	&-links {
		background: #fff;
		display: flex;
		padding: 50px 25px;
		margin: 0;
		border-radius: 12px;
		box-shadow: 0 12px 16px 0 rgba(#000, 0.1);
	}
	&__link {
		flex: 1;
		list-style: none;
		width: 100px;
		height: 100px;
		margin: 0 25px;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		color: rgba(#000, 0.25);
		position: relative;
		transition: 0.6s ease;
		&::before {
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -50px 0 0 -50px;
			width: 100%;
			height: 100%;
			opacity: 0.25;
			background: #fff;
			transition: 0.6s ease;
			animation: blob 12s linear infinite alternate;
		}
		&.link--twitter::before {
			background: linear-gradient(165deg, #1DA1F2, #657786);
		}
		&.link--facebook::before {
			background: linear-gradient(165deg, #3C5A99, #dfe3ee);
		}
		&.link--instagram::before {
			background: linear-gradient(165deg, #405de6, #fd1d1d);
		}
		a {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 2;
		}
		i {
			position: relative;
			z-index: 1;
		}
		&:hover {
			color: #fff;
			&:before {
				opacity: 1;
			}
		}
	}
}

@keyframes blob {
	0%,
	100% {
		border-radius: 43% 77% 80% 40% / 40% 40% 80% 80%;
	}
	20% {
		border-radius: 47% 73% 61% 59% / 47% 75% 45% 73%;
	}
	40% {
		border-radius: 46% 74% 74% 46% / 74% 58% 62% 46%;
	}
	60% {
		border-radius: 47% 73% 61% 59% / 40% 40% 80% 80%;
	}
	80% {
		border-radius: 50% 70% 52% 68% / 51% 61% 59% 69%;
	}
}

HTML

ReactJS social buttons，按钮带漂亮的渐变色彩，鼠标悬停可以变色。很不错的React按钮控件设计。

react, app, blob, button

编辑器支持Emmet

快捷键

ReactJS social buttons，按钮带漂亮的渐变色彩，鼠标悬停可以变色。很不错的React按钮控件设计。

react, app, blob, button

使用React.js实现的平面几何三角学交互图形

使用React.js实现的城市风景幻灯片

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：