Live Demo
マウスを乗せるかTabキーでフォーカスして動作を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1252"><label class="upload" for="tb-1252-file"><span class="corners" aria-hidden="true"><i></i><i></i><i></i><i></i></span><span class="symbol" aria-hidden="true">↑</span><strong>Attach a file</strong><span class="hint">PDF, JPG or PNG</span><input type="file" id="tb-1252-file" accept=".pdf,image/jpeg,image/png"><span class="assist">Choose file <span aria-hidden="true">↗</span></span></label></div>CSS
.tbx-1252{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;min-height:212px;overflow:hidden;padding:16px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#193647;}
.tbx-1252 *, .tbx-1252 *::before,.tbx-1252 *::after{box-sizing:border-box}
.tbx-1252{background:#e6eff2}.tbx-1252 .upload{position:relative;display:grid;justify-items:center;align-content:center;gap:5px;width:min(100%,278px);min-height:171px;padding:17px;border:2px dashed #aac3cc;border-radius:11px;background:#f7fcfd;color:#345465;text-align:center;cursor:pointer;overflow:hidden;transition:border-color .34s,background .34s}.tbx-1252 .symbol{font-size:25px;color:#5b94aa;transition:transform .35s}.tbx-1252 strong{font-size:16px}.tbx-1252 .hint{font-size:10px;color:#8298a5}.tbx-1252 input{position:absolute;width:1px;height:1px;opacity:0;left:50%;bottom:0}.tbx-1252 .assist{font-size:10px;font-weight:700;color:#4e8a9b}.tbx-1252 .corners i{position:absolute;width:24px;height:24px;border:2px solid #3789a2;opacity:0;transform:scale(.4);transition:opacity .3s,transform .4s}.tbx-1252 .corners i:nth-child(1){top:7px;left:7px;border-right:0;border-bottom:0}.tbx-1252 .corners i:nth-child(2){top:7px;right:7px;border-left:0;border-bottom:0}.tbx-1252 .corners i:nth-child(3){bottom:7px;left:7px;border-right:0;border-top:0}.tbx-1252 .corners i:nth-child(4){bottom:7px;right:7px;border-left:0;border-top:0}.tbx-1252 .upload:is(:hover,:focus-within){border-color:#4a98a7;background:#eaf7fa}.tbx-1252 .upload:is(:hover,:focus-within) .corners i{opacity:1;transform:scale(1)}.tbx-1252 .upload:is(:hover,:focus-within) .symbol{transform:translateY(-5px)}.tbx-1252 .upload:focus-within{outline:3px solid #bb713f;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.tbx-1252 *, .tbx-1252 *::before, .tbx-1252 *::after{{transition-duration:0.01ms!important;animation-duration:0.01ms!important;scroll-behavior:auto!important}}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Form, Upload
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末はホバーできないことがあります。必要な操作や情報はタップでも利用できるようにしてください。
Browser：最新版のChrome・Safari・Firefox・Edgeを推奨。
Reduced Motion：prefers-reduced-motion: reduce対応。