<div class="btn-wrapper">
<a class="center-btn btn btn-default" href="#">Meet our team </a>
</div>
<div class="text-block linkStyleOne">
<p>Gaining this accreditation has also been an important step on the road to making sure we comply with the General Data Protection Regulation (GDPR) ahead of the 2018 deadline (we’ve also helped write a plain English <a href="https://www.deeson.co.uk/blog/gdpr-guide-you-wont-hate">guide to GDPR</a> for our clients along the way too). Gaining this accreditation has also been an important step on the road to making sure we comply with the General Data Protection Regulation (GDPR) ahead of the 2018 deadline (we’ve also helped write a plain English</p>
</div>
/* Ignore Just for Pen Postioning */
body {background-color: #edeee9;}
.btn.center-btn {
margin:auto;
display:table;
margin-top:25vh;
}
div {margin-top:80px;}
/* Ignore Just for Pen Postioning */
/* Button CSS */
.btn {
font-family: "CircularStd-Bold", sans-serif;
font-weight: normal;
background-color: transparent;
border: solid 4px #000000;
color: #000000;
cursor: pointer;
display: inline-block;
font-size: 16px;
padding: 12px 28px;
text-decoration: none;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='17' fill='%23000000'%3E %3Cpath fill-rule='evenodd' d='M24.736 10.246v6.351l16.4-8.347-16.4-8.099v6.085H.541v4.01h24.195z'/%3E %3C/svg%3E");
background-position: right 32px center;
background-repeat: no-repeat;
background-size: 31px 12px;
padding-right: 80px;
}
.btn:hover, .btn:focus {
background-color: #000;
border-color: #000;
color: #ffffff;
transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 2s cubic-bezier(0.165, 0.84, 0.44, 1);
transform: translateY(-4px);
box-shadow: 4px 4px 0px rgba(3,4,3,.2);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='17' fill='%23ffffff'%3E %3Cpath fill-rule='evenodd' d='M24.736 10.246v6.351l16.4-8.347-16.4-8.099v6.085H.541v4.01h24.195z'/%3E %3C/svg%3E");
}
.btn:active {
transform: translateY(0px);
box-shadow: 0px 0px 0px rgba(3,4,3,.15);
}
.btn:hover::after {
opacity: 1;
}
/* Link CSS */
.text-block {
color: #000000;
font-family: "MaisonNeue-Book",Helvetica,Arial;
font-size: 16px;
line-height: 1.5;
text-align: left;
margin-left: auto;
margin-right: auto;
max-width: 600px;
width: calc(100% - (20px * 2));
padding-bottom: 65px;
}
.text-block a:not(.btn) {
color: #000000;
font-family: "MaisonNeue-Bold",Helvetica,Arial;
font-weight: bold;
transition: all 0.3s ease;
display: inline-block;
font-size: 16px;
}
.text-block a:not(.btn):hover, .text-block a:not(.btn):focus {
// color: #fff;
}
.linkStyleOne a {
color: #000;
text-decoration: none;
border-bottom: 2px solid #000;
display: inline-block;
position: relative;
padding: 0 .15em;
transitionall 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
z-index: 1000;
}
.linkStyleOne a:before {
content: "";
z-index: -1;
width: 100%;
height: 0%;
background: rgba(0, 0, 0, 1);
bottom: 0;
left: 0;
position: absolute;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.linkStyleOne a:hover {
border-bottom: 2px solid #ff0046;
transform: translateY(-1px);
}
.linkStyleOne a:active {
transform: translateY(0px);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.