How to Get Download Button in Blogger

Image by Shocking Tech

Shocking Tech

Here is Codes for download button in your Wordpress and Blogger website Click on the Copy Codes Paste in your blog or whatever you want

1.Green Download Button Code:

Download

        <style>

.buttonDownload {
  display: inline-block;
  position: relative;
  padding: 10px 25px;
  
  background-color: #4CC713;
  color: white;
  
  font-family: sans-serif;
  text-decoration: none;
  font-size: 0.9em;
  text-align: center;
  text-indent: 15px;
}

.buttonDownload:hover {
  background-color: #000000;
  color: white;
}

.buttonDownload:before, .buttonDownload:after {
  content: ' ';
  display: block;
  position: absolute;
  left: 15px;
  top: 52%;
}

.buttonDownload:before {
  width: 10px;
  height: 2px;
  border-style: solid;
  border-width: 0 2px 2px;
}

.buttonDownload:after {
  width: 0;
  height: 0;
  margin-left: 3px;
  margin-top: -7px;
  
  border-style: solid;
  border-width: 4px 4px 0 4px;
  border-color: transparent;
  border-top-color: inherit;
  
  animation: downloadArrow 2s linear infinite;
  animation-play-state: paused;
}

.buttonDownload:hover:before {
  border-color: #ffffff;
}

.buttonDownload:hover:after {
border-top-color: #ffffff;
  animation-play-state: running;
}

@keyframes downloadArrow {
    0% {
    margin-top: -7px;
    opacity: 1;
  }
  
  0.001% {
    margin-top: -15px;
    opacity: 0;
  }
  
  50% {
    opacity: 1;
  }
  
  100% {
    margin-top: 0;
    opacity: 0;
  }
}
</style>
<a class="buttonDownload" href="" target="_blank">Download</a>
<br /><br />

Shocking Tech

2.Cool Blue Download Button Code:

Download

<style>

.buttonDownloadcoolblue {
  display: inline-block;
  position: relative;
  padding: 10px 25px;
  
  background-color: #2193b0;
  color: white;
  
  font-family: sans-serif;
  text-decoration: none;
  font-size: 0.9em;
  text-align: center;
  text-indent: 15px;
}

.buttonDownloadcoolblue:hover {
  background-color: #000000;
  color: white;
}

.buttonDownloadcoolblue:before, .buttonDownloadcoolblue:after {
  content: ' ';
  display: block;
  position: absolute;
  left: 15px;
  top: 52%;
}

.buttonDownloadcoolblue:before {
  width: 10px;
  height: 2px;
  border-style: solid;
  border-width: 0 2px 2px;
}

.buttonDownloadcoolblue:after {
  width: 0;
  height: 0;
  margin-left: 3px;
  margin-top: -7px;
  
  border-style: solid;
  border-width: 4px 4px 0 4px;
  border-color: transparent;
  border-top-color: inherit;
  
  animation: downloadArrow 2s linear infinite;
  animation-play-state: paused;
}

.buttonDownloadcoolblue:hover:before {
  border-color: #ffffff;
}

.buttonDownloadcoolblue:hover:after {
border-top-color: #ffffff;
  animation-play-state: running;
}

@keyframes downloadArrow {
    0% {
    margin-top: -7px;
    opacity: 1;
  }
  
  0.001% {
    margin-top: -15px;
    opacity: 0;
  }
  
  50% {
    opacity: 1;
  }
  
  100% {
    margin-top: 0;
    opacity: 0;
  }
}
</style>
<a class="buttonDownloadcoolblue" href="" target="_blank">Download</a>
<br /><br />

Shocking Tech

3.Yoda Download Button

Download

   <style>

.buttonDownloadYoda {
  display: inline-block;
  position: relative;
  padding: 10px 25px;
  
  background-color: #FF0099;
  color: white;
  
  font-family: sans-serif;
  text-decoration: none;
  font-size: 0.9em;
  text-align: center;
  text-indent: 15px;
}

.buttonDownloadYoda:hover {
  background-color: #000000;
  color: white;
}

.buttonDownloadYoda:before, .buttonDownloadYoda:after {
  content: ' ';
  display: block;
  position: absolute;
  left: 15px;
  top: 52%;
}

.buttonDownloadYoda:before {
  width: 10px;
  height: 2px;
  border-style: solid;
  border-width: 0 2px 2px;
}

.buttonDownloadYoda:after {
  width: 0;
  height: 0;
  margin-left: 3px;
  margin-top: -7px;
  
  border-style: solid;
  border-width: 4px 4px 0 4px;
  border-color: transparent;
  border-top-color: inherit;
  
  animation: downloadArrow 2s linear infinite;
  animation-play-state: paused;
}

.buttonDownloadYoda:hover:before {
  border-color: #ffffff;
}

.buttonDownloadYoda:hover:after {
border-top-color: #ffffff;
  animation-play-state: running;
}

@keyframes downloadArrow {
    0% {
    margin-top: -7px;
    opacity: 1;
  }
  
  0.001% {
    margin-top: -15px;
    opacity: 0;
  }
  
  50% {
    opacity: 1;
  }
  
  100% {
    margin-top: 0;
    opacity: 0;
  }
}
</style>
<a class="buttonDownloadYoda" href="" target="_blank">Download</a>

Shocking Tech

4.Amin Download Button

Download

   <style>

.buttonDownloadAmin {
  display: inline-block;
  position: relative;
  padding: 10px 25px;
  
  background-color: #4A00E0;
  color: white;
  
  font-family: sans-serif;
  text-decoration: none;
  font-size: 0.9em;
  text-align: center;
  text-indent: 15px;
}

.buttonDownloadAmin:hover {
  background-color: #000000;
  color: white;
}

.buttonDownloadAmin:before, .buttonDownloadAmin:after {
  content: ' ';
  display: block;
  position: absolute;
  left: 15px;
  top: 52%;
}

.buttonDownloadAmin:before {
  width: 10px;
  height: 2px;
  border-style: solid;
  border-width: 0 2px 2px;
}

.buttonDownloadAmin:after {
  width: 0;
  height: 0;
  margin-left: 3px;
  margin-top: -7px;
  
  border-style: solid;
  border-width: 4px 4px 0 4px;
  border-color: transparent;
  border-top-color: inherit;
  
  animation: downloadArrow 2s linear infinite;
  animation-play-state: paused;
}

.buttonDownloadAmin:hover:before {
  border-color: #ffffff;
}

.buttonDownloadAmin:hover:after {
border-top-color: #ffffff;
  animation-play-state: running;
}

@keyframes downloadArrow {
    0% {
    margin-top: -7px;
    opacity: 1;
  }
  
  0.001% {
    margin-top: -15px;
    opacity: 0;
  }
  
  50% {
    opacity: 1;
  }
  
  100% {
    margin-top: 0;
    opacity: 0;
  }
}
</style>
<a class="buttonDownloadAmin" href="" target="_blank">Download</a>
<br /><br />

Shocking Tech

5.Harvey Download Button

Download

   <style>

.buttonDownloadHarvey {
  display: inline-block;
  position: relative;
  padding: 10px 25px;
  
  background-color: #1f4037;
  color: white;
  
  font-family: sans-serif;
  text-decoration: none;
  font-size: 0.9em;
  text-align: center;
  text-indent: 15px;
}

.buttonDownloadHarvey:hover {
  background-color: #000000;
  color: white;
}

.buttonDownloadHarvey:before, .buttonDownloadHarvey:after {
  content: ' ';
  display: block;
  position: absolute;
  left: 15px;
  top: 52%;
}

.buttonDownloadHarvey:before {
  width: 10px;
  height: 2px;
  border-style: solid;
  border-width: 0 2px 2px;
}

.buttonDownloadHarvey:after {
  width: 0;
  height: 0;
  margin-left: 3px;
  margin-top: -7px;
  
  border-style: solid;
  border-width: 4px 4px 0 4px;
  border-color: transparent;
  border-top-color: inherit;
  
  animation: downloadArrow 2s linear infinite;
  animation-play-state: paused;
}

.buttonDownloadHarvey:hover:before {
  border-color: #ffffff;
}

.buttonDownloadHarvey:hover:after {
border-top-color: #ffffff;
  animation-play-state: running;
}

@keyframes downloadArrow {
    0% {
    margin-top: -7px;
    opacity: 1;
  }
  
  0.001% {
    margin-top: -15px;
    opacity: 0;
  }
  
  50% {
    opacity: 1;
  }
  
  100% {
    margin-top: 0;
    opacity: 0;
  }
}
</style>
<a class="buttonDownloadHarvey" href="" target="_blank">Download</a>
<br /><br />

Shocking Tech

6.Harvey Light Download Button

Download

   <style>

.buttonDownloadHarveylight {
  display: inline-block;
  position: relative;
  padding: 10px 25px;
  
  background-color: #99f2c8;
  color: white;
  
  font-family: sans-serif;
  text-decoration: none;
  font-size: 0.9em;
  text-align: center;
  text-indent: 15px;
}

.buttonDownloadHarveylight:hover {
  background-color: #000000;
  color: white;
}

.buttonDownloadHarveylight:before, .buttonDownloadHarveylight:after {
  content: ' ';
  display: block;
  position: absolute;
  left: 15px;
  top: 52%;
}

.buttonDownloadHarveylight:before {
  width: 10px;
  height: 2px;
  border-style: solid;
  border-width: 0 2px 2px;
}

.buttonDownloadHarveylight:after {
  width: 0;
  height: 0;
  margin-left: 3px;
  margin-top: -7px;
  
  border-style: solid;
  border-width: 4px 4px 0 4px;
  border-color: transparent;
  border-top-color: inherit;
  
  animation: downloadArrow 2s linear infinite;
  animation-play-state: paused;
}

.buttonDownloadHarveylight:hover:before {
  border-color: #ffffff;
}

.buttonDownloadHarveylight:hover:after {
border-top-color: #ffffff;
  animation-play-state: running;
}

@keyframes downloadArrow {
    0% {
    margin-top: -7px;
    opacity: 1;
  }
  
  0.001% {
    margin-top: -15px;
    opacity: 0;
  }
  
  50% {
    opacity: 1;
  }
  
  100% {
    margin-top: 0;
    opacity: 0;
  }
}
</style>
<a class="buttonDownloadHarveylight" href="" target="_blank">Download</a>
<br /><br />

Shocking Tech

7.Dark Red Download Button

Download

   <style>

.buttonDownloadDarkred {
  display: inline-block;
  position: relative;
  padding: 10px 25px;
  
  background-color: #c31432;
  color: white;
  
  font-family: sans-serif;
  text-decoration: none;
  font-size: 0.9em;
  text-align: center;
  text-indent: 15px;
}

.buttonDownloadDarkred:hover {
  background-color: #000000;
  color: white;
}

.buttonDownloadDarkred:before, .buttonDownloadDarkred:after {
  content: ' ';
  display: block;
  position: absolute;
  left: 15px;
  top: 52%;
}

.buttonDownloadDarkred:before {
  width: 10px;
  height: 2px;
  border-style: solid;
  border-width: 0 2px 2px;
}

.buttonDownloadDarkred:after {
  width: 0;
  height: 0;
  margin-left: 3px;
  margin-top: -7px;
  
  border-style: solid;
  border-width: 4px 4px 0 4px;
  border-color: transparent;
  border-top-color: inherit;
  
  animation: downloadArrow 2s linear infinite;
  animation-play-state: paused;
}

.buttonDownloadDarkred:hover:before {
  border-color: #ffffff;
}

.buttonDownloadDarkred:hover:after {
border-top-color: #ffffff;
  animation-play-state: running;
}

@keyframes downloadArrow {
    0% {
    margin-top: -7px;
    opacity: 1;
  }
  
  0.001% {
    margin-top: -15px;
    opacity: 0;
  }
  
  50% {
    opacity: 1;
  }
  
  100% {
    margin-top: 0;
    opacity: 0;
  }
}
</style>
<a class="buttonDownloadDarkred" href="" target="_blank">Download</a>
<br /><br />

Shocking Tech

8.Dark Orange Download Button

Download

   <style>

.buttonDownloadDarkorange {
  display: inline-block;
  position: relative;
  padding: 10px 25px;
  
  background-color: #f12711;
  color: white;
  
  font-family: sans-serif;
  text-decoration: none;
  font-size: 0.9em;
  text-align: center;
  text-indent: 15px;
}

.buttonDownloadDarkorange:hover {
  background-color: #000000;
  color: white;
}

.buttonDownloadDarkorange:before, .buttonDownloadDarkorange:after {
  content: ' ';
  display: block;
  position: absolute;
  left: 15px;
  top: 52%;
}

.buttonDownloadDarkorange:before {
  width: 10px;
  height: 2px;
  border-style: solid;
  border-width: 0 2px 2px;
}

.buttonDownloadDarkorange:after {
  width: 0;
  height: 0;
  margin-left: 3px;
  margin-top: -7px;
  
  border-style: solid;
  border-width: 4px 4px 0 4px;
  border-color: transparent;
  border-top-color: inherit;
  
  animation: downloadArrow 2s linear infinite;
  animation-play-state: paused;
}

.buttonDownloadDarkorange:hover:before {
  border-color: #ffffff;
}

.buttonDownloadDarkorange:hover:after {
border-top-color: #ffffff;
  animation-play-state: running;
}

@keyframes downloadArrow {
    0% {
    margin-top: -7px;
    opacity: 1;
  }
  
  0.001% {
    margin-top: -15px;
    opacity: 0;
  }
  
  50% {
    opacity: 1;
  }
  
  100% {
    margin-top: 0;
    opacity: 0;
  }
}
</style>
<a class="buttonDownloadDarkorange" href="" target="_blank">Download</a>

Shocking Tech

9.Light Yellow Download Button

Download

   <style>

.buttonDownloadlightyellow {
  display: inline-block;
  position: relative;
  padding: 10px 25px;
  
  background-color: #f5af19;
  color: white;
  
  font-family: sans-serif;
  text-decoration: none;
  font-size: 0.9em;
  text-align: center;
  text-indent: 15px;
}

.buttonDownloadlightyellow:hover {
  background-color: #000000;
  color: white;
}

.buttonDownloadlightyellow:before, .buttonDownloadlightyellow:after {
  content: ' ';
  display: block;
  position: absolute;
  left: 15px;
  top: 52%;
}

.buttonDownloadlightyellow:before {
  width: 10px;
  height: 2px;
  border-style: solid;
  border-width: 0 2px 2px;
}

.buttonDownloadlightyellow:after {
  width: 0;
  height: 0;
  margin-left: 3px;
  margin-top: -7px;
  
  border-style: solid;
  border-width: 4px 4px 0 4px;
  border-color: transparent;
  border-top-color: inherit;
  
  animation: downloadArrow 2s linear infinite;
  animation-play-state: paused;
}

.buttonDownloadlightyellow:hover:before {
  border-color: #ffffff;
}

.buttonDownloadlightyellow:hover:after {
border-top-color: #ffffff;
  animation-play-state: running;
}

@keyframes downloadArrow {
    0% {
    margin-top: -7px;
    opacity: 1;
  }
  
  0.001% {
    margin-top: -15px;
    opacity: 0;
  }
  
  50% {
    opacity: 1;
  }
  
  100% {
    margin-top: 0;
    opacity: 0;
  }
}
</style>
<a class="buttonDownloadlightyellow" href="" target="_blank">Download</a>
<br /><br />

Shocking Tech

10.Meh Download Button

Download

   <style>

.buttonDownloadMeh {
  display: inline-block;
  position: relative;
  padding: 10px 25px;
  
  background-color: #2ebf91;
  color: white;
  
  font-family: sans-serif;
  text-decoration: none;
  font-size: 0.9em;
  text-align: center;
  text-indent: 15px;
}

.buttonDownloadMeh:hover {
  background-color: #000000;
  color: white;
}

.buttonDownloadMeh:before, .buttonDownloadMeh:after {
  content: ' ';
  display: block;
  position: absolute;
  left: 15px;
  top: 52%;
}

.buttonDownloadMeh:before {
  width: 10px;
  height: 2px;
  border-style: solid;
  border-width: 0 2px 2px;
}

.buttonDownloadMeh:after {
  width: 0;
  height: 0;
  margin-left: 3px;
  margin-top: -7px;
  
  border-style: solid;
  border-width: 4px 4px 0 4px;
  border-color: transparent;
  border-top-color: inherit;
  
  animation: downloadArrow 2s linear infinite;
  animation-play-state: paused;
}

.buttonDownloadMeh:hover:before {
  border-color: #ffffff;
}

.buttonDownloadMeh:hover:after {
border-top-color: #ffffff;
  animation-play-state: running;
}

@keyframes downloadArrow {
    0% {
    margin-top: -7px;
    opacity: 1;
  }
  
  0.001% {
    margin-top: -15px;
    opacity: 0;
  }
  
  50% {
    opacity: 1;
  }
  
  100% {
    margin-top: 0;
    opacity: 0;
  }
}
</style>
<a class="buttonDownloadMeh" href="" target="_blank">Download</a>
<br /><br />

How to Get Download Button in Blogger | Shocking Tech |

Post a Comment

20 Disney+ Hotstar Best Movies and hotstar originals |Stark Developer|

Contact Form