php 粘性网站标签

Posted 2021-05-04

/* Whatsapp Button */
.fk-whatsapp-button {
	position: fixed;
	bottom: 1rem;
	left: 1rem;
	background: #fff;
	width: 50px;
	padding: 0.4rem 0.4rem 0;
	box-shadow: 0px 10px 24px 6px rgba(0,0,0,0.06);
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999;
}

.fk-whatsapp-button a {
	color: #486066;
	font-size: 0.8rem;
}

.fk-whatsapp-button-image {
	width: 100%;
}

.fk-whatsapp-button-text {
	width: 70%;
	display: none;
}

@media(min-width:992px) {
	.fk-whatsapp-button {
		width: 300px;
	}
	
	.fk-whatsapp-button-image {
		width: 30%;
		padding: 0.5rem 1rem 0.5rem 0.5rem;
	}
	
	.fk-whatsapp-button-text {
		display: block;
	}
}

<div class="fk-whatsapp-button">
	<div class="fk-whatsapp-button-image">
			<a href="#"><img class="fk-whatsapp-image" src="http://savergy.de/wp-content/uploads/2018/03/Messenger_Icon.png"/></a>
	</div>
	<div class="fk-whatsapp-button-text">
		<a href="#">
			Sie haben noch Fragen? Klicken Sie hier und erreichen Sie uns im Messenger!
		</a>
	</div>
</div>