.circle-border{width:300px;height:300px;border-radius:100%;padding:30px;background-color:#000}.circle{width:300px;height:300px;display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center;background:none;border:0;box-sizing:border-box;border-radius:100%;font-size:inherit;font-weight:700;position:relative;vertical-align:middle}.circle:before,.circle:after{box-sizing:inherit;content:"";position:absolute;width:100%;height:100%;border-radius:100%}.circle:hover{color:#ff0}.circle:before,.circle:after{top:0;left:0}.circle:before{border:2px solid transparent}.circle:hover:before{border-top-color:#ff0;border-right-color:#ff0;border-bottom-color:#ff0;transition:border-top-color .15s linear,border-right-color .15s linear .1s,border-bottom-color .15s linear .2s}.circle:after{border:0 solid transparent}.circle:hover:after{border-top:2px solid yellow;border-left-width:2px;border-right-width:2px;transform:rotate(270deg);transition:transform .4s linear 0s,border-left-width 0s linear .35s}