Wallpaper Download Widget Box for Blogger

Style 1

Download

Style 2

Download View

CSS

/* Image Box */ .imgBox{margin:30px 0;padding:15px 15px 3px 15px;background:#fff;text-align:center;border-radius:6px;box-shadow:0 10px 40px rgba(149,157,165,.2)} .imgBox img {position:relative;width:100%;height:auto;border-radius:5px;margin:0;object-fit:cover} .imgBox .buttonInfo{margin-top:6px}
/* Change Dark Mode Class */ .drkM .imgBox{background:#252526;box-shadow:0 10px 40px rgba(0,0,0,.2)}
/* Gradient Button */ .gButton{display:inline-flex;align-items:center;margin:6px 0 12px 0;padding:12px 15px;outline:0;border:0;border-radius:50px;line-height:20px;color:#fff;font-size:14px;font-weight:inherit;text-decoration:none;font-family:'Noto Sans', sans-serif;white-space:nowrap;overflow:hidden;max-width:100%;box-shadow:2px 2px 6px rgba(0,0,0, .1);background:linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);background-size:800%;-webkit-background-clip:background;-webkit-text-fill-color:#fff;animation:animategBtn 10s linear infinite} @keyframes animategBtn{100% {filter:hue-rotate(360deg)}} .gButton:hover{opacity:.8}
.gButtonInfo{display:flex;flex-wrap:wrap;justify-content:center;margin-top:6px;width:calc(100% + 12px);left:-6px;right:-6px;position:relative} .gButtonInfo>*{margin:0 6px 12px} @media screen and (max-width:500px){.gButtonInfo >*{flex-grow:1;justify-content:center} .gButtonInfo >*:last-child{flex:0 0 auto}}

ICON CSS

No need to add in Median UI, Fletro Pro or iMagz templates

/* Icon CSS */ .gButton .icon{flex-shrink:0; display:flex} .gButton .icon:before{content:'';width:18px;height:18px;background-size:18px;background-repeat:no-repeat;background-position:center} .gButton .icon:after{content:'';padding:0 6px} .gButton .icon.download:before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3'/><polyline points='8 12 12 16 16 12'/><line x1='12' x2='12' y1='2' y2='16'/></svg>")} .gButton .icon.demo:before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' x2='21' y1='14' y2='3'/></svg>")}

HTML

STYLE 1

<!--[ Image Box ]-->
<div class='imgBox'>
  <img class='lazy' alt='image_alt' data-src='image_src.webp' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <!--[ Gradient Button ]-->
  <a class='gButton' href='image_direct_download_link'><i class='icon download'></i>Download</a>
</div>

STYLE 2

<!--[ Image Box ]-->
<div class='imgBox'>
  <img class='lazy' alt='image_alt' data-src='image_src.webp' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <!--[ Gradient Buttons ]-->
  <div class='gButtonInfo'>
    <a class='gButton' href='image_direct_download_link'><i class='icon download'></i>Download</a>
    <a class='gButton' href='same_image_src.webp'><i class='icon demo'></i>View</a>
  </div>
</div>

Referensi:
Tech With Deo

[ Source Code by Tech With Deo ]

Rate Article

5.0 1 vote

Rate this article