<div class="cta__wrapper">
<div class="cta__button"><svg xmlns="http://www.w3.org/2000/svg" width="75" height="75" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve"><g><g><path d="M4.548 31.999c0 10.9 6.3 20.3 15.5 24.706L6.925 20.827C5.402 24.2 4.5 28 4.5 31.999z M50.531 30.614c0-3.394-1.219-5.742-2.264-7.57c-1.391-2.263-2.695-4.177-2.695-6.439c0-2.523 1.912-4.872 4.609-4.872 c0.121 0 0.2 0 0.4 0.022C45.653 7.3 39.1 4.5 32 4.548c-9.591 0-18.027 4.921-22.936 12.4 c0.645 0 1.3 0 1.8 0.033c2.871 0 7.316-0.349 7.316-0.349c1.479-0.086 1.7 2.1 0.2 2.3 c0 0-1.487 0.174-3.142 0.261l9.997 29.735l6.008-18.017l-4.276-11.718c-1.479-0.087-2.879-0.261-2.879-0.261 c-1.48-0.087-1.306-2.349 0.174-2.262c0 0 4.5 0.3 7.2 0.349c2.87 0 7.317-0.349 7.317-0.349 c1.479-0.086 1.7 2.1 0.2 2.262c0 0-1.489 0.174-3.142 0.261l9.92 29.508l2.739-9.148 C49.628 35.7 50.5 33 50.5 30.614z M32.481 34.4l-8.237 23.934c2.46 0.7 5.1 1.1 7.8 1.1 c3.197 0 6.262-0.552 9.116-1.556c-0.072-0.118-0.141-0.243-0.196-0.379L32.481 34.4z M56.088 18.8 c0.119 0.9 0.2 1.8 0.2 2.823c0 2.785-0.521 5.916-2.088 9.832l-8.385 24.242c8.161-4.758 13.65-13.6 13.65-23.728 C59.451 27.2 58.2 22.7 56.1 18.83z M32 0c-17.645 0-32 14.355-32 32C0 49.6 14.4 64 32 64s32-14.355 32-32.001 C64 14.4 49.6 0 32 0z M32 62.533c-16.835 0-30.533-13.698-30.533-30.534C1.467 15.2 15.2 1.5 32 1.5 s30.534 13.7 30.5 30.532C62.533 48.8 48.8 62.5 32 62.533z" class="style0"/></g></g></svg></div>
<div class="cta__button"><svg xmlns="http://www.w3.org/2000/svg" width="75" height="75" viewBox="0 0 100 100"><g fill-rule="evenodd" clip-rule="evenodd"><path d="M58.055 70.316c12.63-.756 19.974-8.27 19.94-21.454-.014-5.4-2.008-8.822-4.538-11.964 1.385-3.272.85-8.585-.412-11.55-5.216-.192-8.635 2.53-12.102 4.537-6.22-1.898-15.664-1.968-21.866 0-3.544-1.93-6.907-4.708-12.1-4.538-1.442 2.822-1.884 8.126-.55 11.414-1.683 2.423-4.033 5.712-4.4 9.902-1.257 14.27 7.092 23.26 19.802 23.654-.266.963-1.404 1.854-1.927 3.162-.364.912-.495 1.94-.688 3.025-3.075 1.318-6.646 1.52-9.076.275C25.69 74.5 24.73 66.59 17.624 68.8c.762 1.95 2.687 2.376 3.988 3.853 1.39 1.572 1.96 3.555 3.026 5.5 2.352 4.3 8.035 5.684 14.438 4.264-.627 3.25 1.345 9.48-1.237 10.45-1.962.737-5.53-1.427-7.425-2.337-6.714-3.23-12.22-8.008-16.364-13.752-5.446-7.548-9.38-18.534-7.84-31.353C7.557 34.233 12.997 25.01 19.69 18.883c7.007-6.414 15.655-11.1 28.19-11.826 13.524-.784 23.694 4.6 30.805 10.59 7.084 5.966 13.08 14.78 14.852 26.127 3.113 19.938-6.55 34.954-17.465 42.905-1.876 1.366-3.976 2.62-6.463 3.85-2.254 1.116-7.164 3.868-8.526 1.513-.707-1.223-.273-5.104-.273-7.426 0-4.203.282-8.19-.825-11.002-.582-1.47-1.17-1.783-1.927-3.3z"/><path d="M22.713 70.316c-.11.117-.377.08-.412.275-.51-.132-.964-.32-.962-.964.447-.42 1.524-.255 1.375.69zM24.64 72.104c-.124.06-.247.12-.276.275-.908.08-1.225-.43-1.237-1.24.606-.533 1.584.012 1.512.964zM25.05 73.203c1.16-.21 1.595.775 1.24 1.65-1.128.23-1.664-.77-1.24-1.65zM28.626 77.328c-.997.455-1.917-.54-1.65-1.236.394-1.03 2.325-.016 1.65 1.236zM31.928 78.43c-.127 1.15-2.415.785-2.064-.55.628-.534 1.98-.278 2.064.55zM38.803 78.016c.31 1.348-1.694 1.607-2.063.688-.07-1.01 1.43-1.202 2.063-.688zM35.502 78.703c.12 1.154-1.74 1.21-2.062.414-.247-1.242 1.83-1.203 2.062-.414z"/></g></svg></div>
<div class="cta__button"><svg xmlns="http://www.w3.org/2000/svg" width="75" height="75" viewBox="0 0 100 100">
<path d="M50 .5C22.6.5.3 22.7.3 50S22.6 99.5 50 99.5c27.4 0 49.7-22.2 49.7-49.5S77.4.5 50 .5zm0 90.9C27.1 91.4 8.5 72.8 8.5 50S27.1 8.6 50 8.6 91.5 27.2 91.5 50 72.9 91.4 50 91.4z"/>
<path d="M80.7 40.3v-.1-.2-.1c0-.1 0-.1-.1-.2 0 0 0-.1-.1-.1 0-.1-.1-.1-.1-.2l-.1-.1c0-.1-.1-.1-.1-.2l-.1-.1-.1-.1-.1-.1-.1-.1-.1-.1-28.2-18.8c-.9-.6-2-.6-2.9 0L20.5 38.5l-.1.1c-.1 0-.1.1-.1.1l-.1.1-.1.1-.1.1c0 .1-.1.1-.1.2l-.1.1c0 .1-.1.1-.1.2 0 0 0 .1-.1.1 0 .1 0 .1-.1.2v20.1c0 .1 0 .1.1.2 0 0 0 .1.1.1 0 .1.1.1.1.2 0 0 0 .1.1.1 0 .1.1.1.1.2l.1.1.1.1.1.1.1.1.1.1 28.1 18.7c.4.3 1 .4 1.5.4s1-.1 1.5-.4l28.1-18.7.1-.1c.1 0 .1-.1.1-.1l.1-.1.1-.1.1-.1c0-.1.1-.1.1-.2l.1-.1c0-.1.1-.1.1-.2 0 0 0-.1.1-.1 0-.1 0-.1.1-.2v-.1-.2-.1-18.8-.4zM52.6 26.9l20.7 13.7-9.2 6.2-11.4-7.6V26.9zm-5.2 0v12.3L36 46.8l-9.2-6.2 20.6-13.7zM24.6 45.6l6.6 4.4-6.6 4.4v-8.8zm22.8 27.5L26.7 59.3l9.2-6.2 11.4 7.6v12.4zM50 56.2L40.7 50l9.3-6.2 9.3 6.2-9.3 6.2zm2.6 16.9V60.8L64 53.2l9.2 6.2-20.6 13.7zm22.8-18.7L68.8 50l6.6-4.4v8.8z"/>
</svg></div>
</div>
body{
background: #1a1a1a;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
svg{
fill: #efefef;
}
.cta__wrapper{
width: 1140px;
display: flex;
justify-content: space-around;
}
.cta__button{
position: relative;
width: 90px;
height: 90px;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
color: #efefef;
border: 3px solid #ed1c5b;
border-radius: 50%;
&:after{
content: "";
position: absolute;
top: 7%;
left: 7%;
border-radius: 50%;
border-top: 1px solid transparent;
border-right: 1px solid #ed1c5b;
border-bottom: 1px solid transparent;
border-left: 1px solid #ed1c5b;
width: 85%;
height: 85%;
transition: border 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86), transform 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transform: rotate(45deg);
backface-visibility: hidden;
}
&:hover{
&:after{
border: 1px solid #ed1c5b;
transform: rotate(135deg);
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.