Pug Preporcessor + SCSS border animation without svg
PURE CSS Using PUG Preprocessor + SCSS to create border animation without SVG HTML Code Normal HTML (Compiled | Before converted to PUG) <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.css"/> <div class="bb"></div> PUG CODE (After Converted from NORMAL HTML) script(src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js') link(rel='stylesheet', href ='https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.css') .bb CSS Code: NORMAL CSS (Before converted to SCSS): .bb, .bb::before, .bb::after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .bb { width: 200px; height: 200px; margin: auto; background: url("https://blog.codepen.io/wp-content/uploads/2012/06/Button-White-Large.png&q