Join Our Telegram Channel Join Here!

Top 7 Stylish Button Using HTML-CSS for Your Website

Hey dear blog reader, are you searching out the first-rate call-to-action button design in your internet site and applications?

Hey dear blog reader, are you searching out the first-rate call-to-action button design in your internet site and applications? if yes, then you definitely are in the right place. due to the fact on this blog, I've listed the nice loose HTML, CSS buttons that you could use to design your website and programs.

If you need to make your website appealing and present-day then you may also use CSS paperwork. At first, we will be talking about all the buttons which are using on my website.

So without wasting greater time permit's start.

Here is Top Stylish Button

1. Standard Button

HTML-CSS


<div style="text-align: center;">
<a class="button" href="Your-Link-Here">Standard_button</a></div>

<style>
.button{display:inline-flex;align-items:center;margin:15px 15px 15px 0;padding:10px 20px;
outline:0;border:0;color:#fefefe;background-color:#3b5998;
border-radius:3px; font-size:13px;line-height:22px;}
.button:hover{color:#fefefe;opacity:.75}
</style>

Preview

2. Download Button

HTML-CSS


<p style="font-size: 11px;"><i>Preview</i></p>
<div style="text-align: center;">
  <a class="button" href="Download-Link-Here"><i class="icon1 download"></i>Download</a></div>
   
<style>
  .button{display:inline-flex;align-items:center;margin:15px 15px 15px 0;padding:10px 20px;
  outline:0;border:0;color:#fefefe;background-color:#3b5998;
  border-radius:3px;font-size:13px;line-height:22px;}
  .icon1{flex-shrink:0; display:inline-block;margin-right:12px; width:18px;height:18px;
  background-size:cover;background-repeat:no-repeat;background-position:center}
  .icon1.download{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>")}
  .button:hover{color:#fefefe;opacity:.75}
 </style> 

Preview

3. Download Button v2

HTML-CSS


<div style="text-align: center;">
  <a class="button outline" href="Download-Link-Here"><i class="icon2 download"></i>Download</a></div>

<style>
.button{display:inline-flex;align-items:center;margin:15px 15px 15px 0;padding:10px 20px;outline:0;border:0;color:#fefefe;background-color:#204ecf;border-radius:3px;font-size:13px;line-height:22px;}
.button.outline{color:#48525c;background-color:transparent;border:1px solid #767676}
.icon2{flex-shrink:0; display:inline-block;margin-right:12px; width:18px;height:18px; background-size:cover;background-repeat:no-repeat;background-position:center}
.icon2.download{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b5998' 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>")}
.button:hover{color:#fefefe;opacity:.75} .button.outline:hover{color:#3b5998;border-color:#3b5998} </style>

Preview

4. Demo Button

HTML-CSS


<div style="text-align: center;">
  <a class="button" href="Demo-Link-Here"><i class="icon3 demo"></i>Demo</a></div>

<style>
.button{display:inline-flex;align-items:center;margin:15px 15px 15px 0;padding:10px 20px;outline:0;
 border:0;color:#fefefe; background-color:#204ecf;border-radius:3px;font-size:13px;line-height:22px;}
.icon3{flex-shrink:0; display:inline-block;margin-right:12px; width:18px;height:18px; background-size:cover;background-repeat:no-repeat;background-position:center}
.icon3.demo{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>")}
.button:hover{color:#fefefe;opacity:.75}
</style> 

Preview

5. Buy Now Button

HTML-CSS


<div style="text-align: center;">
  <a class="button" href="Buy-Link-Here"><i class="icon4 buy"></i>Buy Now</a></div>

<style>
.button{display:inline-flex;align-items:center;margin:15px 15px 15px 0;padding:10px 20px;outline:0;border:0;color:#fefefe;background-color:#204ecf;border-radius:3px;font-size:13px;line-height:22px;}
.icon4{flex-shrink:0; display:inline-block;margin-right:12px; width:18px;height:18px; background-size:cover;background-repeat:no-repeat;background-position:center}
.icon4.buy{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-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M7.42226 19.8203C7.84426 19.8203 8.18726 20.1633 8.18726 20.5853C8.18726 21.0073 7.84426 21.3493 7.42226 21.3493C7.00026 21.3493 6.65826 21.0073 6.65826 20.5853C6.65826 20.1633 7.00026 19.8203 7.42226 19.8203Z'/><path d='M18.6747 19.8203C19.0967 19.8203 19.4397 20.1633 19.4397 20.5853C19.4397 21.0073 19.0967 21.3493 18.6747 21.3493C18.2527 21.3493 17.9097 21.0073 17.9097 20.5853C17.9097 20.1633 18.2527 19.8203 18.6747 19.8203Z'/><path d='M2.74988 3.25L4.82988 3.61L5.79288 15.083C5.87088 16.018 6.65188 16.736 7.58988 16.736H18.5019C19.3979 16.736 20.1579 16.078 20.2869 15.19L21.2359 8.632C21.3529 7.823 20.7259 7.099 19.9089 7.099H5.16388'/></svg>")}
</style> 

Preview

6. Whatsapp Me Button

HTML-CSS


<div style="text-align: center;">
  <a class="button whatsapp" href="Whatsapp-Link-Here"><i class="icon5 whatsapp"></i>Whatsapp me</a></div>

<style>
.button.whatsapp{background-color:#25D366}
  .button{display:inline-flex;align-items:center;margin:15px 15px 15px 0;padding:10px 20px;outline:0;border:0;color:#fefefe;background-color:#204ecf;border-radius:3px;font-size:13px;line-height:22px;}
.icon5{flex-shrink:0; display:inline-block;margin-right:12px; width:18px;height:18px; background-size:cover;background-repeat:no-repeat;background-position:center}
.icon5.whatsapp{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23fefefe'><g><path d='M16,2A13,13,0,0,0,8,25.23V29a1,1,0,0,0,.51.87A1,1,0,0,0,9,30a1,1,0,0,0,.51-.14l3.65-2.19A12.64,12.64,0,0,0,16,28,13,13,0,0,0,16,2Zm0,24a11.13,11.13,0,0,1-2.76-.36,1,1,0,0,0-.76.11L10,27.23v-2.5a1,1,0,0,0-.42-.81A11,11,0,1,1,16,26Z'/><path d='M19.86,15.18a1.9,1.9,0,0,0-2.64,0l-.09.09-1.4-1.4.09-.09a1.86,1.86,0,0,0,0-2.64L14.23,9.55a1.9,1.9,0,0,0-2.64,0l-.8.79a3.56,3.56,0,0,0-.5,3.76,10.64,10.64,0,0,0,2.62,4A8.7,8.7,0,0,0,18.56,21a2.92,2.92,0,0,0,2.1-.79l.79-.8a1.86,1.86,0,0,0,0-2.64Zm-.62,3.61c-.57.58-2.78,0-4.92-2.11a8.88,8.88,0,0,1-2.13-3.21c-.26-.79-.25-1.44,0-1.71l.7-.7,1.4,1.4-.7.7a1,1,0,0,0,0,1.41l2.82,2.82a1,1,0,0,0,1.41,0l.7-.7,1.4,1.4Z'/></g></svg>")}
</style>

Preview

7. Download Demo Button

HTML-CSS


<div style="text-align: center;">
  <div class="button-info">
  <a class="button" href="#"><i class="icon1 download"></i>Download</a>
  <a class="button outline" href="#">Demo</a></div>
</div>

<style>
.button-info{display:flex;flex-wrap:wrap;justify-content:center;margin:12px 0 0}
.button-info > *{margin:0 12px 12px 0}
.button-info > *:last-child{margin-right:0}
.button{display:inline-flex;align-items:center;margin:15px 15px 15px 0;padding:10px 20px;outline:0;border:0;color:#fefefe;background-color:#3b5998;border-radius:3px;font-size:13px;line-height:22px;}
.button.outline{color:#48525c;background-color:transparent;border:1px solid #767676}
.icon1{flex-shrink:0; display:inline-block;margin-right:12px; width:18px;height:18px; background-size:cover;background-repeat:no-repeat;background-position:center}
.icon1.download{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>")}
</style>

Preview

8. File Info Button

HTML-CSS


<div class='download-info'>
  <span class='file-icon'>Zip</span>
  <span class='file-text'>Preview.zip</span>
  <a class='button file-link' href='#' target='_blank' rel='noreferrer noopener'><i class='icon1 download'></i>Download</a>
</div>
 

<style>
  .button{display:inline-flex;align-items:center;margin:15px 15px 15px 0;padding:10px 20px;outline:0;border:0;color:#fefefe;background-color:#204ecf;border-radius:3px;font-size:13px;line-height:22px;}
  .icon1{flex-shrink:0; display:inline-block;margin-right:12px; width:18px;height:18px; background-size:cover;background-repeat:no-repeat;background-position:center}
  .icon1.download{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>")}
.download-info{display:flex;align-items:center;margin:1.7em 0;padding:15px;border:2px solid #ebeced;border-radius:3px;font-size:13px}
.download-info .file-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:10px;border-radius:8px;color:#fefefe;background:#ebeced linear-gradient(200deg,#00dcc0 0,#3b5998 80%);font-weight:700;font-family:Poppins, sans-serif}
.download-info .file-text{padding:0 12px;width:calc(100% - 150px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.download-info .file-link{flex-shrink:0;display:flex;font-size:11px;margin:0 0 0 auto;padding:7px 12px}
.download-info .file-link .m-icon{width:15px;height:15px}
</style>

Preview

file_name.zip 200kb

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.