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 />

Service & High Quality Anh Trai Nang Blogger

Powered by BFGMedia

Chuyên dịch vụ dành cho blogspot
và truyền thông

Google Fonts

Integrated with 100+ Google Fonts on the Blogger Template Designer

Unlimited Sidebars

Make your own sidebar with our high quality blogger templates

Font Awesome

More than 1000 icons

Exclusive Documentation

Easy & Exclusive Documentation

Unlimited Colors

Customize the Skin of the template with Unlimited Color Options

Google Analytics

Place your Tracing Code like Google Analytics Only in few options

Social Sharing

100% Compatible with 200+ Social Sharing Websites

Fully Responsive

Full Compatibility with all Devices like Mobile, Tablet and Desktop

No Coding Required

Customize your Website with No Coding Knowledge Required