Blue Glass 3D Download Button Set (PNG, JPG, PDF, SVG, HTML/CSS)
Looking for a clean download button that looks the same everywhere on your site? This set has a black, glass-style 3D button with slightly rounded corners, a white download icon and the white text “Download”. Every version, from the images to the code, comes from one master design, so they all look identical.
What’s included in the ZIP
- PNG: 1x, 2x and 3x sizes with a transparent background, sharp on high-resolution screens.
- JPG: on a white background, for places that don’t support transparency.
- PDF: a vector file for print and documents.
- SVG: a master file and a minified web version that stays sharp at any size.
- WebP: a lightweight version for fast page loading.
- HTML and CSS: a ready-made button with no images needed.
- JavaScript and CSS: builds the buttons for you from a short list.
How to download
- Click the download button at the end of this post.
- Save
download-buttons.zipto your computer. - Right-click the file and choose “Extract All” (Windows) or double-click it (Mac).
- Open the folder for the format you need.
How to use it
- As an image in WordPress: go to Media, then Add New, and upload the PNG or WebP. Insert it with an Image block and add your download link in the block’s link settings.
- As code (recommended, since it loads fastest): add a Custom HTML block, paste the button markup from
html-css/index.html, and paste the contents ofbutton.cssinto Appearance, then Customize, then Additional CSS. Change thehrefto your file’s address. - With JavaScript: upload
download-buttons.jsanddownload-buttons.css, add<div data-download-buttons></div>where you want the buttons, and edit the file list in the script. - In design tools: import the SVG or PNG into Canva, Figma, Photoshop, Elementor or any page builder.
- In PDFs and slides: use the PDF or PNG.
Button details
220 × 60 px face, 12 px rounded corners, 6 px 3D depth, black gradient with a glass sheen, and hover and pressed effects in the code versions.