Skip to content

Instantly share code, notes, and snippets.

@zakirsajib
Last active January 12, 2022 07:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zakirsajib/3cb1b5c08c3b3ff8b29ca2946c32bfa3 to your computer and use it in GitHub Desktop.
Save zakirsajib/3cb1b5c08c3b3ff8b29ca2946c32bfa3 to your computer and use it in GitHub Desktop.
CTA Button Example
.cta-button {
max-width: 333px;
width: 100%;
position: relative;
}
.cta-button .ss-button {
border-top-left-radius: 30px;
border-bottom-right-radius: 30px;
width: 273px;
height: 63px;
background-color: blue;
display: table-cell;
text-align: center;
vertical-align: middle;
text-decoration: none;
color: white;
font-weight: 700;
font-size: 1.25rem;
line-height: 1.938rem;
position: relative;
transition: width 0.5s ease;
}
.cta-button::before {
content: "";
position: absolute;
right: 15px;
clip-path: polygon(70% 0, 100% 50%, 70% 100%, 0% 100%, 30% 50%, 0% 0%);
width: 31px;
height: 27px;
top: 17.5px;
background-color: blue;
}
.cta-button::after {
content: "";
position: absolute;
border-bottom-right-radius: 30px;
background-color: white;
width: 85px;
height: 63px;
right: 0;
top: 0;
z-index: -1;
border: 3px solid blue;
}
<div class="cta-button">
<a class="ss-button" href="#">Contact Us</a>
</div>
@zakirsajib
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment