Shortcodes

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

Đường viền hoạt hình

<style>

.animation-examples {

  width: 600px;

  height: 120px;

  display: table-cell;

  vertical-align: middle;

  text-align: center;

  font-size: 30px;

  font-weight: bold;

  font-family: Arial;

}

/*------------*/

.animation-examples.one {

  color: #69D2E7;

  outline: 10px dashed #E0E4CC;

  box-shadow: 0 0 0 10px #69D2E7;

  animation: 1s animateBorderOne ease infinite;

}

@keyframes animateBorderOne {

  to {

    outline-color: #69D2E7;

    box-shadow: 0 0 0 10px #E0E4CC;

  }

}

/*------------*/

.animation-examples.two {

  color: #FA2A00;

  outline: 10px dashed #F2D694;

  box-shadow: 0 0 0 10px #FA2A00;

  animation: 2s animateBorderTwo ease infinite;

}

@keyframes animateBorderTwo {

  to {

    outline-color: #FA2A00;

    box-shadow: 0 0 0 10px #F2D694;

  }

}

/*------------*/

.animation-examples.three {

  color: #BEF202;

  background: linear-gradient(to bottom, #BEF202 50%, #1B676B 50%);

  background-size: auto 2px;

  outline: 10px dashed #BEF202;

  box-shadow: 0 0 0 10px #1B676B;

  animation: 1s animateBorderThree ease infinite;

}

@keyframes animateBorderThree {

  to {

    outline-color: #1B676B;

    box-shadow: 0 0 0 10px #BEF202;

  }

}

}

</style>

<div class="animation-examples one">Nội dung</div>

  <div class="animation-examples two">Nội dung</div>

  <div class="animation-examples three">Nội dung</div>

Hổ trợ CAD

Googledrive



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>

Đăng nhận xét (0)