Skip to content

Instantly share code, notes, and snippets.

@GrantSmithDoddle

GrantSmithDoddle/simple-contact-button.css

Created June 10, 2017 17:22
Show Gist options
  • Save GrantSmithDoddle/70c5a76a107e16a0c0a6fadcddccd40c to your computer and use it in GitHub Desktop.
Save GrantSmithDoddle/70c5a76a107e16a0c0a6fadcddccd40c to your computer and use it in GitHub Desktop.
Download ZIP
Simple contact button
Raw
simple-contact-button.css
a {
text-decoration: none;
}
.fa {
font-size: 1.2em;
line-height: 2em;
background: white;
border-radius: 2em;
height: 2em;
width: 2em;
display: inline-block;
position: absolute;
top: 8px;
left: 10px;
text-align: center;
color: #C43832;
}
.phone-number {
font-weight: bold;
font-size: 20px;
text-align: right;
text-transform: uppercase;
font-weight: bold;
background: #C43832;
border-radius: 34px;
padding: 1em;
position: relative;
padding-left: 3.5em;
color: white;
display: inline-block;
width: 135px;
}
.phone-number--below {
display: block;
text-align: left;
padding-left: 3.5em;
}
.phone-number:hover {
background: #1d71b8;
}
Raw
simple-contact-button.html
<head>
<script src="https://use.fontawesome.com/35be55a773.js"></script>
</head>
<a href="/contact-us">
<div class="phone-number phone-number--below">
<i class="fa fa-phone" aria-hidden="true"></i> contact us
</div>
</a>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment