دکمه دانلود مخصوص سایت های نرم افزاری

دکمه دانلود مخصوص سایت های نرم افزاریبازديد : 773

پيام خصوصي نقل قول تشکر کنيد

سلام خدمت شما دوستان گرامی

امروز برای لوگوی قالب گراف یک استایل بسیار زیبای دکمه دانلود گذاشتم.

ا[font=BYekan]میدوارم که خوشتون بیاد[font=BYekan]

اگه خوشتون اومد تشکر نشه فراموش[font=BYekan]

[font=BYekan][font=BYekan]

دمــــــــــو

کــــــد:

کد:

<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface no-generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"><head><script src="//production-assets.codepen.io/assets/editor/live/console_runner-5710c30fb566082d9fcb6e7d97ee7e3f2a326128c9f334a4231b6fd752b29965.js"></script><script src="//production-assets.codepen.io/assets/editor/live/events_runner-d5e4bf42585b8da8c18f7d963dbfc17cd66a79aa586c9448c4de8d6952ee9d97.js"></script><script src="//production-assets.codepen.io/assets/editor/live/css_live_reload_init-25d1423d5d6fb975e7d61832d2c061422a94963ca446583b965dfc5569147311.js"></script><meta charset="UTF-8"><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico"><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111"><link rel="canonical" href="http://codepen.io/andiio/pen/hzyLl"><script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"><link rel="stylesheet prefetch" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"><style class="cp-pen-styles">@import url(http://fonts.googleapis.com/css?family=Open+Sans);.transition-ano, .windows-bit li a:hover {  -webkit-transition: all 0.5s ease-in-out;  -moz-transition: all 0.5s ease-in-out;  -o-transition: all 0.5s ease-in-out;  transition: all 0.5s ease-in-out;}
/************************************\Setup\************************************/* {  -webkit-box-sizing: border-box;  margin: 0;  padding: 0;}
body {  font-family: 'Open Sans', sans-serif;  background: url("http://i39.tinypic.com/2a6a54w.jpg");  background-size: 300%;}
.container {  width: 700px;  margin: 10em auto;  position: relative;}
a:hover {  text-decoration: none;  cursor: pointer;}
/************************************\INTERESTING STYLES\************************************/.btn-wrapper-shop,.btn-wrapper-download {  height: 82px;  float: left;}
.download-btns {  min-width: 300px;  background-color: #5bb75b;  color: #ffffff;  text-align: center;  line-height: 82px;  font-size: 1.4em;  cursor: pointer;}
.mac-btn,.windows-btn {  height: 82px;  width: 150px;  float: left;  font-size: 1.6em;}
.mac-btn {  background-color: #95a5a6;}
.windows-btn {  background-color: #3498db;}
.win-btn-wrapper {  display: block;  width: 150px;  height: 82px;  float: left;}
.store-btn,.download-text {  height: 82px;  display: block;}.store-btn a,.download-text a {  float: left;  background-color: #555555;  color: white;  padding: 0 1.3em;  font-size: 1.5em;  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);  line-height: 82px;  text-decoration: none;}
.store-btn {  margin-left: 1em;  min-width: 2em;}
#shop-info,#download-info {  color: #ffffff;  font-size: 0.8em;  text-align: center;}
#shop-info {  margin-left: 1.2em;}

.windows-bit { position: absolute; width: 150px; left: 0px; top: -82px; z-index: 9;}.windows-bit li { list-style: none; text-align: center; display: inline-block; float: left; width: 50%; display: table;}.windows-bit li:first-child { border-right: 1px solid #343434;}.windows-bit li a { background-color: #1a1a1a; color: #b3b3b3; display: block; font-weight: lighter; font-size: 1em; height: 68px; display: table-cell; vertical-align: middle; text-decoration: none; letter-spacing: 1px;}.windows-bit li a:hover { background-color: #343434; color: #ffffff;}</style></head><body><div class="container"> <section class="btn-wrapper-download"> <div class="download-btns"> <span class="download-text"><i class="fa fa-cloud-download"> </i>Download</span> <div class="win-btn-wrapper" style="display: none;"> <div class="windows-bit" style="display: none;"> <ul> <li><a href="javascript:void(0)">32bit</a></li> <li><a href="javascript:void(0)">64bit</a></li> </ul> </div> <a class="windows-btn" title="Choose your Windows System"><i class="fa fa-windows"></i></a> </div> <a class="mac-btn" title="Mac OS X Lion (10.7)" style="display: none;"><i class="fa fa-apple"></i></a> </div> <span id="download-info" style="display: none;">Completely free 7-day full trial</span> </section>  <section class="btn-wrapper-shop"> <div class="store-btn"> <a href="javascript:void(0)">Store</a> </div> <span id="shop-info" style="display: none;">Individual license: 49 US$</span> </section></div><script src="//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-58d22c749295bca52f487966e382a94a495ac103faca9206cbd160bdf8aedf2a.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script><script>function fadeIn($elts) { $elts.each(function () { var $this = $(this); if ($this.css('opacity') == 0 || !$this.is(':visible')) $this.fadeIn('slow'); });}$(document).ready(function () { $('#download-info').fadeOut(100);});$('.download-btns').hover(function () { $('.download-text').css('display', 'none'); fadeIn($('.win-btn-wrapper, a.mac-btn, #download-info'));}, function () { $('#download-info').fadeOut(100);});$('.store-btn').hover(function () { fadeIn($('#shop-info'));}, function () { $('#shop-info').fadeOut(100);});$('.win-btn-wrapper').hover(function () { fadeIn($('.windows-bit'));}, function () { $('.windows-bit').fadeOut(100);});//# sourceURL=pen.js</script></body></html>

امضاي کاربر :

طـــــــــــــــراحــــــــــــ و کُــــــــــــــــــــــــــد نـــــــــویـــــــــســـــــــــــ.
.

تَـــــــــــــحــــــــــــــــــتـــــِ وبـــــــــــــ
.
.
.

اِرتــــــــــــــتِــــــــــــبــــــــــاطــــــــ بــــــــا
.
.
.

بَـــــــــــنـــــــــــد هــــــــــ :

.
.
.