Get In Touch Contact Information Icon Designs CSS

In this demo we're going to create a creative get in touch contact information icon designs and their hover effects.

Let's dive into the code:

HTML Structure

<div class="card">
	<div class="social-icon marker-style">
		<i class="fas fa-phone"></i>
	</div>
	<br />
	<label>xxx-xxx-xxxx</label>
</div>
<div class="card">
	<div class="social-icon marker-style pin">
		<i class="fas fa-envelope-open"></i>
	</div>
	<br />
	<label>example@domain.com</label>
</div>
<div class="card">
	<div class="social-icon marker-style icon-bg">
		<i class="fas fa-map-marker-alt"></i>
	</div>
	<br />
	<label>Address Address...</label>
</div>

<div class="card">
	<div class="social-icon perspactive-style">
		<i class="fas fa-map-marker-alt"></i>
	</div>
	<br />
	<label>xxx-xxx-xxxx</label>
</div>
<div class="card">
	<div class="social-icon perspactive-style round">
		<i class="fas fa-map-marker-alt"></i>
	</div>
	<br />
	<label>example@domain.com</label>
</div>
<div class="card">
	<div class="social-icon perspactive-style between">
		<i class="fas fa-map-marker-alt"></i>
	</div>
	<br />
	<label>Address Address...</label>
</div>

<div class="card">
	<div class="social-icon hexagon-style square-sm">
		<i class="fas fa-phone"></i>
	</div>
	<br />
	<label>xxx-xxx-xxxx</label>
</div>
<div class="card">
	<div class="social-icon hexagon-style square-lg">
		<i class="fas fa-envelope-open"></i>
	</div>
	<br />
	<label>example@domain.com</label>
</div>
<div class="card">
	<div class="social-icon hexagon-style pentagon">
		<i class="fas fa-map-marker-alt"></i>
	</div>
	<br />
	<label>Address Address...</label>
</div>

CSS

:root {
    --clr-blue: #4285F4;
    --clr-red: #EA4335;
}
.section {
    padding: 50px;
    border-top: 1px solid rgba(0, 0, 0, .2);
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    margin: -1px 0;
}
.card {
    display: inline-block;
    width: 300px;
    cursor: pointer;
}

Hope you guys liked the demo!