Download Button

Attachment elements allow a website author to upload a file. A link is presented for the website user to click and download the same file. Ordinarily, WebYep presents the file download as plain link, with the filename showing. This snippet extends the attachment element functionality, in allowing a website author to set a custom label and title tooltip for the download link. The link is restyled as an attractive button. In this example, the styling for the button came from a design on CSS Scan, but you can use almost any button design. If a website author forgets to provide a custom label, the filename gets used instead. The CSS and Javascript only requires adding once per-page.

Example

HTML & PHP

<?php if(webyep_bIsEditMode() == false) : ?><div
  data-download-label="<?php endif; ?><?php webyep_shortText("Button Label", false, 550, 240); // WebYepV2 ?><?php if(webyep_bIsEditMode() == false) : ?>" class="download_button"><?php endif; ?>
  <?php webyep_attachment("File Download", false, "", 550, 240); // WebYepV2 ?>
<?php if(webyep_bIsEditMode() == false) : ?></div><?php endif; ?>

CSS

/* Button design #74 from https://getcssscan.com/css-buttons-examples */
.download_button a {
  background-color: #fbeee0;
  border: 2px solid #422800;
  border-radius: 30px;
  box-shadow: #422800 4px 4px 0 0;
  color: #422800;
  cursor: pointer;
  display: inline-block;
  font-weight: 600;
  font-size: 18px;
  padding: 0 18px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.download_button a:hover {
  background-color: #fff;
}

.downlodownload_buttonader a:active {
  box-shadow: #422800 2px 2px 0 0;
  transform: translate(2px, 2px);
}

@media (min-width: 768px) {
  .download_button a {
    min-width: 120px;
    padding: 0 25px;
  }
}

Javascript

const allDownloadButtons = document.querySelectorAll('.download_button');
allDownloadButtons.forEach((download) => {
  const downloadLabel = download.dataset.downloadLabel;
  if (downloadLabel.length !== 0) {
    const downloadLink = download.querySelector('a');
    downloadLink.innerHTML = downloadLabel;
    downloadLink.setAttribute('title', `Click to download ${downloadLabel}`);
  }
});