تبلیغات در اینترنت

تبلیغات در اینترنتگیفت کارت گوگل پلی
نمایش نتایج: از 1 به 3 از 3

مقاله: بی بی کد دکمه دانلود CSS

    1. بی بی کد دکمه دانلود CSS »

      بی بی کد دکمه دانلود CSS

      نگارش: , by (کاربر سایت)
      2013/04/26 03:16 PM
      امتیاز: 

      سلام به همه

      این هم یه BBcode دکمه دانلود که با CSS طراحی شده، خود دکمه ماله یه سایتی بود من یه مقدار ویرایشش کردم و به شکل BBcode درش آوردم.

      عنوان: DownloadButton
      نام برچسب: DLB
      Replacement:
      کد:
      <a href="{param}" target="_blank"><span class="animated-button orange rotate"> <div class="icon" style="background-image: url(images/DLB/download.png);"></div> <div class="content"> <div class="title">دانلود</div> <div class="sub-title">{option}</div> </div> </span></a>
      استفاده از {option} رو هم روی بله بذارید.

      علاوه بر این ها، کد زیر رو در Additional.css اضافه کنید:
      کد:
      /* * Pure CSS Animated Button * * @author: Francisco Neves */ @font-face { font-family: 'BYekan'; src: url('images/DLB/BYekan.eot?#') format('eot'), /* IE6-8 */ url('images/DLB/BYekan.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('images/DLB/BYekan.ttf') format('truetype'); /* Saf3-5, Chrome4+, FF3.5, Opera 10+ */ } @font-face { font-family: 'IranianSans'; src: url('images/DLB/IranianSans.eot') format('eot'), /* IE6-8 */ url('images/DLB/IranianSans.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('images/DLB/IranianSans.ttf') format('truetype'); /* Saf3-5, Chrome4+, FF3.5, Opera 10+ */ } .animated-button { display: table; padding: 7px 15px 8px 15px; font-family: "BYekan"; cursor: pointer; overflow: hidden; } .animated-button:hover { opacity: 1; } .animated-button:active { color: white !important; background-color: #191919 !important; } .animated-button .icon { float: left; margin-right: 10px; width: 32px; height: 32px; margin-top: 2px; } .animated-button .content { float: right; } .animated-button .title { font-family: "IranianSans" } .animated-button .sub-title { font-size: 11px; color: #ffdeb9; } .animated-button.orange .title { color: #9E5900; text-shadow: 1px 1px 1px #f1ab5a; } .animated-button.orange .sub-title { color: #ffdeb9; } .animated-button.orange { border: 1px solid #d17118; background: #ec801a; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #f69f28 2%, #ec801a 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(2%,#f69f28), color-stop(100%,#ec801a)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#f69f28 2%,#ec801a 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#f69f28 2%,#ec801a 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#f69f28 2%,#ec801a 100%); /* IE10+ */ background: linear-gradient(to bottom, #ffffff 0%,#f69f28 2%,#ec801a 100%); /* W3C */ ######: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ec801a',GradientType=0 ); /* IE6-9 */ -webkit-box-shadow: 0px 3px 0px rgba(206, 109, 9, 1), 0px 3px 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 3px 0px rgba(206, 109, 9, 1), 0px 3px 10px rgba(0, 0, 0, 0.3); box-shadow: 0px 3px 0px rgba(206, 109, 9, 1), 0px 3px 10px rgba(0, 0, 0, 0.3); } .animated-button.orange:hover { background: #ed840b; /* Old browsers */ background: -moz-linear-gradient(top, #f4dab7 0%, #f69f28 3%, #ed840b 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4dab7), color-stop(3%,#f69f28), color-stop(100%,#ed840b)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f4dab7 0%,#f69f28 3%,#ed840b 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f4dab7 0%,#f69f28 3%,#ed840b 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #f4dab7 0%,#f69f28 3%,#ed840b 100%); /* IE10+ */ background: linear-gradient(to bottom, #f4dab7 0%,#f69f28 3%,#ed840b 100%); /* W3C */ ######: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4dab7', endColorstr='#ed840b',GradientType=0 ); /* IE6-9 */ } .animated-button.orange:active { -webkit-box-shadow: 0px 2px 0px rgba(206, 109, 9, 1), 0px 2px 5px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0px 2px 0px rgba(206, 109, 9, 1), 0px 2px 5px rgba(0, 0, 0, 0.4); box-shadow: 0px 2px 0px rgba(206, 109, 9, 1), 0px 2px 5px rgba(0, 0, 0, 0.4); margin-top: 1px; margin-bottom: -1px; } .animated-button.rotate:hover > .icon { -webkit-animation: zoom_rotate 0.6s ease-in-out; -moz-animation: zoom_rotate 0.6s ease-in-out; -ms-animation: zoom_rotate 0.6s ease-in-out; -o-animation: zoom_rotate 0.6s ease-in-out; animation: zoom_rotate 0.6s ease-in-out; } @-webkit-keyframes zoom_rotate { 50% { -webkit-transform: rotate(360deg) scale(20); opacity: 0; } } @-moz-keyframes zoom_rotate { 50% { -moz-transform: rotate(360deg) scale(20); opacity: 0; } } @-o-keyframes zoom_rotate { 50% { -o-transform: rotate(360deg) scale(20); opacity: 0; } } @-ms-keyframes zoom_rotate { 50% { -ms-transform: rotate(360deg) scale(20); opacity: 0; } } @keyframes zoom_rotate { 50% { transform: rotate(360deg) scale(20); opacity: 0; } }
      همینطور فایل زیر رو در پوشه Images فروم اکسترکت کنید.

      برای استفاده از کد، لینک دانلود رو بین تگ ها و متن دلخواهتون رو به این شکل وارد کنید:
      کد:
      [DLB=matn]link[/DLB]
      که مثلا این متن میتونه حجم فایل یا اسم اون فایل یا هر چیز دیگه ای باشه.


      دمو


      دانلود فایل:http://up.vbiran.ir/uploads/136697242724201_DLB.zip
  1. Top | #2
    کاربر سایت

    ورژن ویبولتین
    4.2.0
    نوشته ها
    216
    میزان امتیاز
    27

    پیش فرض

    شات اسکرین قرار نمیدهید ؟

  2. Top | #3
    کاربر سایت

    ورژن ویبولتین
    4.2
    نوشته ها
    32
    میزان امتیاز
    0

    پیش فرض

    نقل قول نوشته اصلی توسط Xm0on نمایش پست ها
    شات اسکرین قرار نمیدهید ؟
    دکمه دانلود

    2 تشکر توسط:


اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •