Download-Button for blogger

Here are some attractive Download Button for blogger website you can use this in your article or post for providing users to access or download your shared content, items, Photo, image, etc.

How to add download button:-

if you consider how to use this code or add download button then follow up some simple steps its easy to apply just copy Html and CSS code given below and create a new post or go to your article were you want to add download button then paste this code, and paste your download link under "<a href="">"section.

if you will use download button in multiple posts then you can paste CSS code in blogger theme - Edit Html section, above "]]></b:skin>" and remove "<style></style>" sow you will easily add download button just using Html code in post.

1. Download--Button :-

Download Click here

HTML Code

<!-----Download Button Html Code----->

<div class="Download-Button">
  
<a href="https://Downloadlink.com">
  
<span class="circle">
  
<i class="fa fa-download"></i></span>
 
<span class="title">Download</span>  
  
<span class="title-hover">Click here</span>
  
</a></div>

CSS Code

 <!-----Download Button CSS Code------>

<style>

.abc{}

.Download-Button {
    text-align: center;
}
.Download-Button a {
    display: Inline-block;
    text-align: center;
    position: relative;
    height: 40px;
    width: 270px;
    line-height: 40px;
    border-radius: 50px;
    background-color: #fdfdfd;
    border: 2px solid #f84f4f;
    margin: 10px;
    transition: all 1000ms;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
 }
.Download-Button a span.circle {
   display: block;
   background-color: #f84f4f;
   color: #fff;
   position: absolute;
   float: left;
   margin: 5px;
   line-height: 30px;
   height: 30px;
   width: 30px;
   top: 0;
   left: 0;
   transition: all 1000ms;
   border-radius: 50%;
   opacity: 1;
}
.Download-Button a span.title {
   position: absolute;
   left: 100px;
   text-align: center;
   margin: 0 auto;
   font-size: 16px;
   font-weight: bold;
   color: #f84f4f;
   transition: all 1000ms;
   opacity: 1;
}
.Download-Button a span.title-hover {
   position: absolute;
   left: 100px;
   text-align: center;
   margin: 0 auto;
   font-size: 16px;
   font-weight: bold;
   color: #f84f4f;
   transition: all 1000ms;
   opacity: 0;
}
.Download-Button a:hover {
   border: 2px solid #36D7B7;
   background-color: #fdfdfd;
 }
.Download-Button a:hover span.circle {
   left: 100%;
   margin-left: -45px;
   background-color: #36D7B7;
   color: #fdfdfd;
   opacity: 1;
}
.Download-Button a:hover span.title {
   left: 40px;
   color: #fdfdfd;
   opacity: 0;
}
.Download-Button a:hover span.title-hover {
   left: 28px;
   color: #36D7B7;
   opacity: 1;
}


</style>

2. Download--Button :-

Download Click here

HTML Code

  
  <!----Download Button2 Html Code---->

<div class="Download-Button2">
<a href="#">
<span class="circle">
<i class="fa fa-download"></i></span>   <span class="title">Download</span>     
<span class="title-hover">Click here</span>
</a></div>
  

CSS Code

  
<!-----Download Button2 CSS Code------>

<style>


.abc{}

.Download-Button2 {
    text-align: center;
}

.Download-Button2 a {
    display: Inline-block;
    text-align: center;
    position: relative;
    height: 40px;
    width: 270px;
    line-height: 40px;
    border-radius: 50px;
    background-color: #fdfdfd;
    border: 2px solid #f84f4f;
    margin: 10px;
    transition: all 1000ms;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
 }  
.Download-Button2 a span.circle {
   display: block;
   background-color: #f84f4f;
   color: #fff;
   position: absolute;
   float: left;
   margin: 5px;
   line-height: 30px;
   height: 30px;
   width: 30px;
   top: 0;
   left: 0;
   transition: all 1000ms;
   border-radius: 50%;
   opacity: 1;
}

.Download-Button2 a span.title {
   position: absolute;
   left: 100px;
   text-align: center;
   margin: 0 auto;
   font-size: 16px;
   font-weight: bold;
   color: #f84f4f;
   transition: all 1000ms;
   opacity: 1;
}
.Download-Button2 a span.title-hover {
   position: absolute;
   left: 100px;
   text-align: center;
   margin: 0 auto;
   font-size: 16px;
   font-weight: bold;
   color: #f84f4f;
   transition: all 1000ms;
   opacity: 0;
}

.Download-Button2 a:hover {
   border: 2px solid #f84f4f;
   background-color: #f84f4f;
 }

.Download-Button2 a:hover span.circle {
   left: 100%;
   margin-left: -45px;
   background-color: #fdfdfd;
   color: #f84f4f;
   opacity: 1;
}

.Download-Button2 a:hover span.title {
   left: 40px;
   color: #fdfdfd;
   opacity: 0;
}
.Download-Button2 a:hover span.title-hover {
   left: 28px;
   color: #fdfdfd;
   opacity: 1;
}
  
</style>
  
  
  
  
  

3. Download--Button :-

Download Click here

HTML Code

 

 <!----Download Button3 Html Code---->

<div class="Download-Button3">
<a href="#">
<span class="circle">
<i class="fa fa-download"></i></span>   <span class="title">Download</span>     
<span class="title-hover">Click here</span>
</a></div>

CSS Code

<!-----Download Button3 CSS Code------>

<style>


.abc{}

.Download-Button3 {
    text-align: center;
}

.Download-Button3 a {
    display: Inline-block;
    text-align: center;
    position: relative;
    height: 40px;
    width: 270px;
    line-height: 40px;
    border-radius: 50px;
    background-color: #fdfdfd;
    border: 2px solid #36D7B7;
    margin: 10px;
    transition: all 1000ms;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
 }

.Download-Button3 a span.circle {
   display: block;
   background-color: #36D7B7;
   color: #fff;
   position: absolute;
   float: left;
   margin: 5px;
   line-height: 30px;
   height: 30px;
   width: 30px;
   top: 0;
   left: 0;
   transition: all 1000ms;
   border-radius: 50%;
   opacity: 1;
}
.Download-Button3 a span.title {
   position: absolute;
   left: 100px;
   text-align: center;
   margin: 0 auto;
   font-size: 16px;
   font-weight: bold;
   color: #36D7B7;
   transition: all 1000ms;
   opacity: 1;
}

.Download-Button3 a span.title-hover {
   position: absolute;
   left: 100px;
   text-align: center;
   margin: 0 auto;
   font-size: 16px;
   font-weight: bold;
   color: #fdfdfd;
   transition: all 1000ms;
   opacity: 0;
}

.Download-Button3 a:hover {
   border: 2px solid #36D7B7;
   background-color: #36D7B7;
 }
.Download-Button3 a:hover span.circle {
   left: 100%;
   margin-left: -45px;
   background-color: #fdfdfd;
   color: #36D7B7;
   opacity: 1;
}

.Download-Button3 a:hover span.title {
   left: 40px;
   color: #fdfdfd;
   opacity: 0;
}

.Download-Button3 a:hover span.title-hover {
   left: 28px;
   color: #fdfdfd;
   opacity: 1;
}
  
  
</style>

4. Download--Button :-

DOWNLOAD

HTML Code

 
     <!-----Download--Button----->

<div class="Download--Button">

  <a href="#">DOWNLOAD</a>

</div>

CSS Code

<style>

.abc{}

.Download--Button {
  display: flex;
  margin: 10px;
  justify-content: center;
}

.Download--Button a {
  color: black;
  margin: 10px;
  padding: 8px 25px;
  border-radius: 50px;
  transition: all 1000ms;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.Download--Button a:hover {
  background: #c5c5e9;
  border-radius: 50px;
}

  
</style>

5. Download--Button :-

DOWNLOAD

HTML Code

 
     <!-----Download--Button----->

<div class="Download--Button2">

  <a href="#">DOWNLOAD</a>

</div>-

CSS Code

<style>

.abc{}

.Download--Button2 {
  display: flex;
  margin: 10px;
  justify-content: center;
}

.Download--Button2 a {
  color: black;
  margin: 10px;
  background: #008000;
  padding: 8px 25px;
  border-radius: 50px;
  transition: all 1000ms;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.Download--Button2 a:hover {
  background: #f84f4f;
  border-radius: 50px;
}

  
</style>

6. Download--Button :-

DOWNLOAD

HTML Code

 
     <!-----Download--Button----->

<div class="Download--Button3">

  <a href="#">DOWNLOAD</a>

</div>

CSS Code

<style>

.abc{}

.Download--Button3 {
  display: flex;
  margin: 10px;
  justify-content: center;
}

.Download--Button3 a {
  color: black;
  margin: 10px;
  padding: 8px 25px;
  background: #008000;
  border-radius: 50px;
  transition: all 1000ms;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.Download--Button3 a:hover {
  background: #c5c5e9;
  border-radius: 50px;
}

  
</style>