Short code

Download - Demo

<style>.buttonx {
    display: inline-flex;
    cursor: pointer;
    background: #2d82ea;
    color: #fff!important;
    font-weight: 500;
    font-size: 14px;
    padding: 8px 20px;
    display: inline-block;
    border-radius: 5px;
    margin: 0px 5px;
    box-shadow: 0 1px 6px rgba(32,33,36,.28);
    text-transform: uppercase;
}</style>
<br />
<center>
<a class="buttonx" href="https://www.anhtrainang.com/" target="_blank"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">Live Preview </span></span></a>
<a class="buttonx" href="link-download" target="_blank"><b><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">Download </span></span></b>&nbsp;<span style="font-size: x-small;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">(Get link)</span></span></span></a></center>
<br />

Ghi chú

<div class="content-table">
<div class="text-description">
<h2>
GHI CHÚ</h2>
</div>
<div class="text-post">
Hãy nhập nội dung ghi chú vào đây
Hãy nhập nội dung ghi chú vào đây
Hãy nhập nội dung ghi chú vào đây
Hãy nhập nội dung ghi chú vào đây</div>
</div>
<style>
.content-table {
    margin: 0;
    display: flex;
    -webkit-box-shadow: 0 4px 13px -6px rgba(110,110,110,0);
    -moz-box-shadow: 0 4px 13px -6px rgba(185,185,185,0.45);
    box-shadow: 0 4px 13px -6px rgba(185,185,185,0.45);
}
.content-table .text-description {
    background: -moz-linear-gradient(top,rgba(37,141,200,1) 44%,rgba(115,182,220,1) 64%,rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(top,rgba(37,141,200,1) 44%,rgba(115,182,220,1) 64%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom,rgba(37,141,200,1) 44%,rgba(115,182,220,1) 64%,rgba(255,255,255,0) 100%);
}
.content-table .text-description, .content-table .text-features, .content-table .text-updates {
    padding: 5px;
    margin: 0 auto;
    white-space: nowrap;
    text-align: center;
    -webkit-writing-mode: vertical-lr;
    writing-mode: vertical-rl;
    transform: scale(-1,-1);
}
.content-table .text-description h2, .content-table .text-features h2, .content-table .text-updates h2 {
    padding: 0;
    margin: 0;
    letter-spacing: 2px;
    color: #fff;
    font-size: 18px;
    text-transform: uppercase;
}
.content-table .text-post {
    padding: 10px;
    margin: 0;
    background: #fff;
    width: 100%;
}
</style>

Button mới.

<style>
/* button */
.bttn-success {
  color: #28b78d;}
.bttn,
.bttn-lg,
.bttn-md,
.bttn-sm,
.bttn-xs {
  margin: 0;
  padding: 0;
  border-width: 0;
  border-color: transparent;
  background: transparent;
  font-weight: 400;
  cursor: pointer;
  position: relative;}
.bttn-md {
  font-size: 20px;
  font-family: inherit;
  padding: 8px 66px;}
.bttn-unite {
  margin: 0;
  padding: 0;
  border-width: 0;
  border-color: transparent;
  background: transparent;
  font-weight: 400;
  cursor: pointer;
  position: relative;
  font-size: 20px;
  font-family: inherit;
  padding: 8px 66px;
  z-index: 0;
  overflow: hidden;
  border: 1px solid #1d89ff;
  background: #fff;
  color: #1d89ff;
  -webkit-transition: color 0.3s cubic-bezier(0.02, 0.01, 0.47, 1), border-color 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: color 0.3s cubic-bezier(0.02, 0.01, 0.47, 1), border-color 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);}
.bttn-unite:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background: #d6e3ff;
  content: '';
  opacity: 0;
  z-index: -1;
  -webkit-transition: opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
  -webkit-transform: translate3d(-110%, -10%, 0) skewX(-20deg);
 transform: translate3d(-110%, -10%, 0) skewX(-20deg);}
.bttn-unite:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background: rgba(214,227,255,0.7);
  content: '';
  opacity: 0;
  z-index: -1;
  -webkit-transition: opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
  -webkit-transform: translate3d(110%, -10%, 0) skewX(-20deg);
transform: translate3d(110%, -10%, 0) skewX(-20deg);}
.bttn-unite:hover,
.bttn-unite:focus {
  box-shadow: 0 1px 8px rgba(58,51,53,0.3);
  color: #1d89ff;
  -webkit-transition: all 0.5s cubic-bezier(0.02, 0.01, 0.47, 1);
 transition: all 0.5s cubic-bezier(0.02, 0.01, 0.47, 1);}
.bttn-unite:hover:before,
.bttn-unite:focus:before {
  opacity: 1;
  -webkit-transition: opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
  -webkit-transform: translate3d(-50%, -10%, 0) skewX(-20deg);
  transform: translate3d(-50%, -10%, 0) skewX(-20deg);
}
.bttn-unite:hover:after,
.bttn-unite:focus:after {
 opacity: 1;
  -webkit-transition: opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
  -webkit-transform: translate3d(50%, -10%, 0) skewX(-20deg);
 transform: translate3d(50%, -10%, 0) skewX(-20deg);
}
.bttn-unite.bttn-md {
 font-size: 20px;
 font-family: inherit;
 padding: 8px 66px;}
.bttn-unite.bttn-md:hover,
.bttn-unite.bttn-md:focus {
 box-shadow: 0 1px 8px rgba(58,51,53,0.3);}
.bttn-unite.bttn-success {
 border-color: #28b78d;
 color: #28b78d;}
.bttn-unite.bttn-success:hover,
.bttn-unite.bttn-success:focus {
 background: #28b78d;
 color: #fff;}
.bttn-unite.bttn-success:before {
 background: #209271;}
.bttn-unite.bttn-success:after {
 background: #28b78d;}
</style>
<center>
<a href='https://drive.google.com/open?id=1xGsEt3VaSqpCftAz8ePizjT1idKcyqs9' target='_blank'><button class="bttn-unite bttn-md bttn-success">Download</button></a></center>

Note

<div style="background: #ffeaa7; border: 3px solid rgba(0 , 0 , 0 , 0.1); color: #333333; padding: 20px;">
Ghi chú ở đây.</div>

Xem trước - Tải

<style>.demo, .download, .buy, .tz1, .tz2, .item_add{font-size:14px; letter-spacing:1px; color:#fff; background-color:#4B6CBB; border-radius: 4px; display: inline-block!important; font-weight: 600; margin: 8px 8px 0; opacity: 1; padding: 7px 16px; transition: all 0.3s ease-out 0s;}
a:hover.demo, a:hover.download, a:hover.tz1, a:hover.tz2, a:hover.item_add, a:hover.buy{opacity:.8; color:#fff;}
.download, .tz2{background-color:#555;}</style>
<a class='demo' href="https://touchcade2020.blogspot.com/" target="_blank" style='color:#fff'>Live Demo</a>
<a class='dowload' href="https://touchcade2020.blogspot.com/" target="_blank" style='color:#fff'>Live Demo</a><br />

Nút tải chất

<style>/* Download Counter Box */

#btnx{cursor:pointer;padding:10px 20px;border:0;border-radius:3px;background:#fff;color:#0090b8;float:right;text-transform:capitalize;font-weight:500;transition:all 0.5s}#btnx:hover,#downloadx:hover{background:#000000;color:#fff;outline:none}.batas-downx{display:block;margin:0 auto;border-radius:4px}.dalam-downx{background:linear-gradient(to bottom right, DarkCyan, MediumSpringGreen);color:#fff;padding:20px;display:block;border-top-right-radius:3px;border-top-left-radius:3px}.file-info{color:#fff;display:inline-block;font-size:1.2em;line-height:38px;text-align:left}.catatan-downx{padding:20px;background:#f7f7f7;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:#555;font-size:14px}#downloadx{float:right}#downloadx{padding:10px 20px;border-radius:3px;background:#fff;color:#e67e22;float:right;text-align:center;font-size:14px;text-transform:capitalize}.bungkus-info span{display:inline-block;line-height:38px;float:right}.file-deskripsi{display:block}.file-deskripsi span{margin-right:3px}

@media screen and (max-width:640px){.batas-downx{float:none;width:100%}}

@media screen and (max-width:320px){.file-info{display:block;text-align:center}#btnx, a#downloadx{width:100%;margin-bottom:10px}.bungkus-info span{float:none;width:100%;text-align:center}.file-deskripsi{text-align:center}}

</style>

<div class="batas-downx">

<div class="dalam-downx">

<div class="bungkus-info">

<div class="file-info"><i class="fas fa-file-download" aria-hidden="true"></i>

<b>Tải Về</b> <i class="fas fa-chevron-circle-right" aria-hidden="true"></i></div>

<button id="btnx" onclick="generate()"><i aria-hidden="true" class="fa fa-cloud-download"></i> <b>TẢI VỀ</b></button> <a href="https://drive.google.com/uc?export=download&amp;id=16NEddejRlpb9zebQ4VQDkPf4DfSkS2CX" id="downloadx" style="display: none;">Downloading</a><div style="text-align: left;">

File Size: x MB</div></div></div></div>