I just received the PSD from Designer and most of the parts are achievable via CSS, there is only one single bit I am trying to do and seems hard to me is a circle with 2 borders. I can use bg image approach, but it would be ideal to achieve using CSS3.
One of the major reason for using CSS is the same border is been used on several different elements.
You can use ::before or ::after pseudo element to create this shape:
.btn-holder { background: darkgreen; padding: 30px; } .btn { background: transparent; justify-content: center; align-items: center; position: relative; color: #fff; display: flex; height: 100px; width: 100px; } .btn, .btn::after { border: 1px solid #fff; border-radius: 100%; } .btn::after { position: absolute; content: ''; width: 100%; height: 100%; left: 0; top: -4px; }<div class="btn-holder"> <button type="button" class="btn">Register</button> </div>You can try :after to make 2 border for circle:
.green{ width: 300px; height: 300px; background-color: green; display: flex; align-items: center; justify-content: center; } .circle { position: relative; width: 150px; height: 150px; border: 1px solid #fff; border-radius: 50%; } .circle::after { content: ''; width: 150px; height: 150px; border: 1px solid #fff; border-radius: 50%; display: block; margin: -4px 2px; }<div class="green"> <div class="circle"></div> </div>You can use a single element with box-shadow - CSS | MDN
button{ position:relative; margin: 20px auto; border-radius: 50%; border: 2px solid transparent; border-bottom: none; border-top: none; width: 100px; height: 100px; color: red; box-shadow: -1px -1px currentcolor, 1px 1px currentcolor, inset -1px 1px currentcolor, inset 1px -1px currentcolor; display: block; background-color: #fd999952; background-clip: padding-box; font-weight: bolder; outline: none; }<button type="button" class="btn">Register</button>