截图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>截图</title> <style> </style> </head> <style> button { border: 0; background: none; text-transform: uppercase; color: #4361ee; font-weight: bold; position: relative; outline: none; padding: 10px 20px; box-sizing: border-box; } button::before, button::after { box-sizing: inherit; position: absolute; content: ''; border: 2px solid transparent; width: 0; height: 0; } /* button::after { bottom: 0; right: 0; } */ button::before, button::after { top: 0; left: 0; } button:hover::before, button:hover::after { width: 100%; height: 100%; } button:hover::before { border-top-color: #4361ee; border-right-color: #4361ee; transition: width 0.3s, height 0.3s ease-out 0.3s; } button:hover::after { border-bottom-color: #4361ee; border-left-color: #4361ee; transition: height 0.3s, width 0.3s ease-out 0.3s; } </style> <body> <div id="draw-border"> <button>Hover me</button> </div> </body> </html>
截图