الاثنين، 22 يناير 2018

احصل على هذة الاداة من هنا

#1 | أزرار المعاينة والتحميل



السلام عليكم ورحمة
الله وبركاته
--
 نقدم لكم في هذه التدوينة ازرار المعاينة والتحميل والتي يحتاجها كل مدون
والكعادة نقدمها لكم بتصميم حديث وانيق





طريقة التركيب:

    1. توجه الى القالب ثم تحرير html
    2. ضع كود التالي فوق ]]></b:skin>

    .Button__textWrapper, .Button__text, .Button__icon {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
    }
    
    .Button__text, .Button__icon {
      -webkit-transition: top 500ms;
      transition: top 500ms;
    }
    
    .Button {
      margin: 10px;
      display: inline-block;
      position: relative;
      background-color: #2b3743;
      color: #fff;
      font-size: 1.2rem;
      border-radius: 2px;
      width: 200px;
      height: 60px;
    
      text-align: center;
      -webkit-transition: background-color 500ms, -webkit-transform 100ms;
      transition: background-color 500ms, -webkit-transform 100ms;
      transition: background-color 500ms, transform 100ms;
      transition: background-color 500ms, transform 100ms, -webkit-transform 100ms;
    }
    .Button__textWrapper {
      overflow: hidden;
    }
    .Button__text {
      line-height: 60px;
      top: 0;
    }
    .Button__icon {
      top: 100%;
      background: url("https://cl.ly/0X3o100h2H0g/icon-download.svg") no-repeat center center;
    }
    .Button::before {
      content: attr(data-tooltip);
      width: 140px;
      height: 60px;
      background-color: #2b3743;
      font-size: 1rem;
      border-radius: .25em;
      line-height: 60px;
      bottom: 90px;
      left: calc(50% - 70px);
      direction: rtl;
    }
    .Button::after {
      content: '';
      width: 0;
      height: 0;
      border: 10px solid transparent;
      border-top-color: #2b3743;
      left: calc(50% - 10px);
      bottom: 70px;
    }
    .Button::before, .Button::after {
      position: absolute;
      opacity: 0;
      -webkit-transition: all 500ms;
      transition: all 500ms;
      visibility: hidden;
    }
    .Button:hover {
      background-color: #01BAEF;
    }
    .Button:hover .Button__text {
      top: -100%;
    }
    .Button:hover .Button__icon {
      top: 0;
    }
    .Button:hover::before, .Button:hover::after {
      opacity: 1;
      visibility: visible;
    }
    .Button:hover::after {
      bottom: 60px;
    }
    .Button:hover::before {
      bottom: 80px;
    }
    .Button:active {
      -webkit-transform: translate(2px, 2px);
              transform: translate(2px, 2px);
    }
    #demo .Button__textWrapper .Button__icon {
        background: url(https://1.bp.blogspot.com/-P8wm6U-KIqI/WmXTiBX4aBI/AAAAAAAAC3c/fwmE0giKR5ws-2WugOQXgNnJBoBAhoP6gCLcBGAs/s1600/1608688-256.png) no-repeat center center;
        background-size: 22%;
    }
    #dload:hover {
        background: #d81010;
    }



        1. ضع الكود التالي داخل المواضيع مع تحرير HTML

        المعاينة

          <a class="Button" id="demo" href="#0" data-tooltip="codepen"><span class="Button__textWrapper"><span class="Button__text">معاينة</span><span class="Button__icon" aria-hidden="true"></span></span></a>



            التحميل

              <a class="Button" id="dload" href="#0" data-tooltip="حجم الملف : 2MB"><span class="Button__textWrapper"><span class="Button__text">تحميل</span><span class="Button__icon" aria-hidden="true"></span></span></a>


              EmoticonEmoticon