Contact Buttons

<div id="contact_button">
	<div id="contact_button_child" style="visibility: hidden;">
		<a target="_blank" href="https://maps.app.goo.gl/axKrbURwAxabKX3D7" class="contact_button_map">
			<img width="30" height="30" alt="gmap" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAACrklEQVR4nO2Zv2sUQRTHN/6IEEliVESNdTRip51c0FYQo8FgY5NWEIREWws5LVRQRJLGwtKAYOslgn9BLAzGRkliIUZFo14sNB8ZfZhF7m7fzM3ObCRfWDjY/b55n72ZeTOzSbKm/1zAXuASMAG8AL7KZX5XgItAT1JUAYeASfQyoAeTogjYCNwBlrGX8dwGNsSG6AKeOADU+ne2xPwnbLpSlp4CrTFATHfyrVsxBrbLmMjSctAJwHOX+leVUBD7yF89IUBMsdNoDhgA2uXqB2aU3pEQIBUlxNY607W5l6XHIUBeKhIZaOA/rfDPhABZVCTS3sDfofAvhgCpNgnSqfBXQ4C8USTS38A/qPDPhQDRrK3M7NRVw7sNmFf4J0KA3FQk8vutysDukGtQCWF0PQTIcfLXsRAgm4HvOUJUgbbcQQTmYY4gD4JACMipHEFOhN5UzeYAMW9iBwMRmOEcQC4EhRAQM6V+8gjx2VT94CACc8MjyLUoEAKyG/jmAeILsDMaiMBc8QByOSqEkez+3jYB8c6Mt6QIAs43AXIuKYqAVmDaAeJ57nUDaAFeZSRyJPV8yfKsyzx7NOU/nOE3BbjFBaSkfKN/D6CB+xYg91K+9cAzhafkAjIq5rKFZwfwQZHQArDdIm5ZfKMuff69mA9Yes8qQM5YxuwV30dgk43RHKYZTdk0qFzmP3KMOWW9OgbGxTTs2OiuOl1swbWCs7JIHbdZDJpd2k9gj0ujEuekz70Gf5ZDP4Al1UchYEganXRtNBVrLAVx1+NXgCG/D2fHapNCOe1jH472JQPd0qWWfO0NZMbp9RSrU3IzOXY3enDEakBFEJqJKFVd6x55xhZZpQHY71R0AousYg1clZtjScHFymxYrrXSfc3q0yywLg3Sx+pVX4ROsaYkS78A4C8IokWKTaoAAAAASUVORK5CYII=">
		</a>
		<a target="_blank" href="mailto:mail.artru@gmail.com" class="contact_button_mail">
			<img width="30" height="30" alt="mail" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAC2UlEQVR4nO2YbWhOYRjHz4yxqdWMvK5G1vhCyry0hqQoLfFBFELSPsjK1L4un5R8GD4gSilvJYqUfCBaWO2T15BS8v6yedvDbD/ddd260s7ZOefxnOecp/Or9Tx7znVf93Xd3ee6/vftOCkpKSkp+YACwaGAEsmQfDImkYXAe5LLJ2CxfU+mA09IHs+BmTaJWfI5HugkOXSamP/mAHwFVsoPo4CzxJ+LQJnEvAzotlXrN9AkD4qBA8SXo8BwiXUL8Guw8tsODBOjZqCf+DAAtElsReb7UH3knNliMmA18J38kwHWSUwlwEm/DbEDGCsD5wNvyR8fgQaJpQK4HrSzPwVqxME04DHR8wyolRimAg/DSpQPQL04GgPcJDpuA+Nk7jrgTbZaqxdYKw5HAqfIPeeBUplzlZ/31K9oNOV5p1vF+M+0q8q5HejLhfrVk2zzO0mAxdoRdrHCyPgLqqsuB76QPd+ARqUuzkR1HrmrdM5s4CXheQ3MFV+VwK2oD1ZdRs5IANVepdEDM6ZaSaOusMGETeS+6jFFqlndCODD2Fb846MGuBdVIkZ5lqttZVZ1vZd8GEIGrZFmWyf/lwIncpmIqVC71eptBH7IMyMuW1TF2eMiOPvlmfXRouyMr03qUmRXkKroN5F3wFKZYARw0MXukHpvFgGX5Rht/i4pzVQstm4+SsRuiV+d5/g8iVWJ44k+qso1YLLH9dMUsfGiA5ik7O9km8gxtZfrgVf44zOwD5gne75MVPR+oCdAWW5Q0uhwmESM/m9Wq2ikwk+ipw9oVXFscNNdgyVimtsC1WWPk39OA6Mlpjlye+KZiJHpE2RAVcxuVR7Zqx9RAFfdEjliKpIYrpCTWdzoMcdvVfnabPl25LyxWfWAVlGicWUA2KtUeKO9DrIXdOXStZPCFSVxZthqUAs8IHm8sNLGHiW7SS69wFZH9lzicSgQHAoEJyUlJSXFyQN/AKRYWuwUHEYdAAAAAElFTkSuQmCC">
		</a>
		<a target="_blank" href="https://www.facebook.com/artruuser" class="contact_button_facebook">
			<img width="30" height="30" alt="facebook" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAABfElEQVR4nO2WTStEURiAL2WBbJTFbMwCiVLClJ2NX2DlF7BV0yR/QMMOO39AYS1ZyHczRikpX6HM5BdIg3h06shN57733HvPlMU8dTfnvO/7nM7pvPd4Xp3/BtADZIEd4BZ40d+NHlNz3S6F/cAm8EU4KmYD6EsqnQLeiM4HMBtXukJylqNK53BHzlaaAT4dilWtYRvxIe45Bhok6Si1IyOJFy2LbAOPwvyFYSwviU8tpLtAM5A2yEvAJPBgyCtI4ucQaRFo88V3AvdARd/5duA8ILciiash26cKNwEpX04KaAFagRMhvyqJywFJd1owDlzquLQvTy1mK2S3ypLYtOInYALY/zN+BXQAjcAa4RQk8YLh8heFhnIGrGJHXhIPUjtGAsU17Fx7olSLB4B3h1J1TEOhYi3PORRnraQ++bwD6VIk6Q8JhKoRTXtxITrqzbUO9MaWKgyFD3SHUk3lVb8yr/Xfagbo8lzAL0eqXTopaoO6f8CYVXAdT+YbNF0J+VU71hcAAAAASUVORK5CYII=">
		</a>
		<a target="_blank" href="https://zalo.me/pc" class="contact_button_zalo">
			<img width="30" height="30" alt="zalo" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAACcklEQVR4nO2ay2oUQRSGy7gwmIwgXtAIgkiWQZHRhYwXCIgwIrhzm1eQRNGtCiKoTyCYCOLOxSS6cdS9lwcQQQQXooKXEWMg+MmR01AM05Xqnk53ddP/ppuun6rzdU1dTtcYU6tWrVQCzgBd4BfFq6extJNCXCNcXU3SE6I/wCywO8bXAN4UBNP2AXmm5lmHZwRYojh1fUDk9yja5fBcpFj99AH5L0f5fmC5WA7IAqRDADLDgAAHgL9UAOQegcikBQHGrImg1CBnCUhmCJBb6xTTUaCVJ8hTVzAxdZ30DShPkA+OelsxdU2FCNLzbOMtMAps0B1rcCCrHvXLGjOt/hnruSyih4HNuhY1o3ExAKSj3jG9LhbRI/Pq3QZ8jgJztdXXbifG9yivMSL6CuxQ74L1vGnlOL+B6w6Qpt7fsL3AkbxmLdGM+qb7tjENfS6BiXoOkMYgr+Y+mYHccUC80ME9qoPdlv2Wlz175KYmduvSI66VfSqmrlZGY2QpS5Bxx4eIEzF1HdPyRX2rMmsd1NkoKmtZ97Z3XK8DM9HUIFp2n0BkhgQ5VIl8RAQ8JgCZtbSWEZisRM4uAq5UBWQEeFJ6EBGwBXhVehARsLcqIFurAnK6KiDPSw0CbC/gY91r4HzWIO9iGpOt9wPgFLAPOKdJ1veUwX8B7kbps298SUBuK4ykvx816boA7Izxb9Jd7mXgIfAS+CTHA9rcN+C9TufzWtdxYGOa+JIZCxIJQKK3NPDIrUgBezS2Hz7m6FvUnAlMwKUkR29ta+DKEdtELlG6Y5pQiBWNze+YWo6AKfvxdF/PdAM5E+ml+sNArVq1TKR/mltIdwGgAksAAAAASUVORK5CYII=">
		</a>
	</div>
	<a href="tel:+0123456789" id="contact_button_phone" style="visibility: hidden;">
		<img width="30" height="30" alt="phone" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAACEElEQVR4nO3ZzYtNYRzA8Z/XUWJDGKJk5WUpWUrsyEYUNanBn6D8BbLDCv+BxcR4jSxQkxoLRnmLImXl5UZIqI9OcxY3Zu7c59zuuc9kPn/B/fac+5zn+Z2IGTN6B3swii94gK0xnWAezvpXA6tiOsAiXDe5a5E7rMQTUxuIXGE5XmjPJ/RHbjAfI9IMR25wXDUHIyd4UzHkA1ZELvBVdUORC7zUmf2RAwx1GPI8coCjHYZ8jxxgGX53EHI/coHbHYQM5HbSreIRZkcuMAtjFUJ2Rm6wLzHicuTI+KrcSwgZjFxhI34mnILXRa5wMmFVHmJh5Ah95Q9sV7F190WOsAHfEmIuYm7kCEekOV9sGJEjE09TWjkVGY+G7iTGnM5yZYwPJl5VeMzmRG6wBm8TYy5hQeQGm/AxMebmRO+ZYrVwqBzF/sKz4ohUZ8yWchacYqz5BIDtLd5TV4pBYV0xO/AjMaY4zgziapvTmQN13l9SY1T4j/XXEbOtwmOWqlHMFOqI2Yz3uu8GVtdx9H9XQ0yj2Gy6HbO2wkuzitGuhjSNlVJumFV87npI0yeKc10MGaklpCnocOJ9pl27ag0pY9Yn3jSncqb2iL+uzScSBhqttt/e30DLLfquah5jcWQ2N9ub+Lg9Le5DkaMyaDdulUf4yRRb+dKYDrCkPBVfKD4YlZ8BX+NYcc3u9e+b8d/6A8BzVur0abPMAAAAAElFTkSuQmCC">
		0123 456 789
	</a>
	<a href="#contact_button_main" id="contact_button_main">
		<img width="30" height="30" alt="contact-button" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAABoUlEQVR4nO3WO2sVQRTA8RssVILYWgSMaSReEGIpYpFEi1QKfgFrwSf4AfwUFhqwt7ARa59RBCuFGLUQEdRYXOH6QMWfjJxikd17Zx+RFP5hmt1z5j+PnbPT6/1ns4DdOIdbeIUhPuM1buICproUTmEZ340nxVzDrrbSJXxUn5Sz1FR6HD8bSIuzP1FXOoev2vMF/VzpBB7ojoe54qO6Zz5HvLwB4ss54mcNOh6kznEMM5iMNhMf6cUc8acawh+4hJ1Z+9iR+B0OFvKOxDatRUVLle05rmJxpDSBp5lLOxfxe3AvI+cOpntVxAjHcTJi+1iXzwfMVonnxyQ/ibO+HS/VZw3bysSp07sjEs9E3HnNOVs1636UuzL+lEA8aiFeGVfBvpUk7Whw7P5mUCmOzldKkibj3WBDxFisSJrtYKnvV0n3430hMEkO4xQORUy6BjXldJU4ffJvcD1q7URJTDpOLxpIV7G11wbsq1lAhtjbSlqQT+N2pvgXFjoRFwawgCuxlMNoq/HscUG+jgOdykcMaku6+OEG3qa/1j8Rb0p+A80BMS4AyKiHAAAAAElFTkSuQmCC">
	</a>
</div>
<style>
	#contact_button {
		position: fixed;
		z-index: 9999;
		bottom: 20px;
		left: 20px;
	}
	#contact_button a {
		display: flex;
		border-radius: 50%;
		width: 50px;
		height: 50px;
		box-shadow: 2px 2px 10px 0px rgb(0, 0, 0, 0.5);
	}
	#contact_button img {
		margin: auto;
	}
	#contact_button #contact_button_child a {
		margin-bottom: 10px;
	}
	@keyframes wave {
		0% {
			box-shadow: 0 0 0px 0px rgba(255, 121, 121, 0.5);
		}
		100% {
			box-shadow: 0 0 0px 10px rgba(255, 121, 121, 0.271);
		}
	}
	#contact_button_main {
		background-color: #d20000;
		animation: wave 1s linear infinite;
	}
	.contact_button_zalo {
		background-color: #00B2FF;
	}
	.contact_button_map {
		background-color: #c21111;
	}
	.contact_button_mail {
		background-color: #eabe0f;
	}
	.contact_button_facebook {
		background-color: #4267B2;
	}
	#contact_button #contact_button_phone {
		background-color: #007941;
		color: #eee;
		font-size: 18px;
		text-decoration: unset;
		align-items: center;
		border-radius: 5px;
		padding: 0px 10px;
		position: fixed;
		left: 80px;
		bottom: 20px;
		width: auto;
		height: 50px;
		font-weight: 900;
	}
	#contact_button #contact_button_phone img {
		margin-right: 5px;
	}
	@keyframes fadeIn {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	.open_contact {
		visibility: visible !important;
		animation: fadeIn 1s;
	}
</style>
<script>
	document.getElementById("contact_button_main").addEventListener("click", function(event) {
		event.preventDefault();
		document.getElementById("contact_button_child").classList.toggle('open_contact');
		document.getElementById("contact_button_phone").classList.toggle('open_contact');
	});
</script>

Hướng dẫn

Contact Buttons

PREVIEW ()