Get In Touch Contact Information Icon Designs CSS

 Techmates   21 Apr, 2018  5 mins read   551


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 Styles

 :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!


Other Resources/3rd Party Libraries

  • - Font Awesome 5