اسلام عليكم و رحمة الله تعالي و بركاته مرحبا بكم علي قناة و موقع جيك برو و في هذه التدوينة الجديده علي مدونتنا نقدم لكم شرح جديد و حصري و هو عن طريقة عمل ازرار التحميل و المعاينه مثل مدونتنا
و الان نبحث عن الـ]]></b:skin> او </style>
#wrap {margin:20px auto;text-align:center;}a.BTN-G {display: inline-block;position: relative;text-decoration: none;font-weight: 100;letter-spacing: .5px;padding: 10px 20px;margin: 10px;color: #536476;font-size: 16px;text-transform: uppercase;border-radius: 3px;transition: all 0.3s ease-out;border: 1px solid #536476;}a.BTN-G:hover {background: #617284;color: #fff;box-shadow: inset 0px -50px 0px #3b4d60;}a.BTN-G::before {color: #536476;display: -webkit-inline-box;content: "\f06e";font-family: fontawesome;margin: 0 0 0 5px;}a.BTN-G:hover::before {color: #fff;}a.BTN-G2 {display: inline-block;position: relative;text-decoration: none;font-weight: 100;background: #617284;letter-spacing: .5px;padding: 10px 20px;margin: 10px;color: #fff;box-shadow: inset 0 0 0 #22313F;font-size: 16px;text-transform: uppercase;border-radius: 3px;transition: all 0.3s ease-out;}a.BTN-G2:hover {background: #2897f3;color: #fff;box-shadow: inset 0px -50px 0px #22313F;}a.BTN-G2::before {color: #FFFFFF;display: -webkit-inline-box;content: "\f090";font-family: fontawesome;margin: 0 0 0 5px;}#wrap { margin: 20px auto; text-align: center; } #wrap br { display: none; } .BTN-G-slide, .BTN-G-slide2 { position: relative; display: inline-block; height: 54px; width: 170px; line-height: 50px; padding: 0; border-radius: 10px; background: #FDFDFD; border: 2px solid #4e6071; margin: 10px; transition: .5s; } .BTN-G-slide2 { border: 2px solid #243750; } .BTN-G-slide:hover { background-color: #536476; } .BTN-G-slide2:hover { background-color: #243750; } .BTN-G-slide:hover span.circle, .BTN-G-slide2:hover span.circle2 { left: 100%; margin-left: -45px; background-color: #fdfdfd; color: #536476; } .BTN-G-slide2:hover span.circle2 { color: #243750; } .BTN-G-slide:hover span.title, .BTN-G-slide2:hover span.title2 { left: 40px; opacity: 0; } .BTN-G-slide:hover span.title-hover, .BTN-G-slide2:hover span.title-hover2 { opacity: 1; left: 40px; } .BTN-G-slide span.circle, .BTN-G-slide2 span.circle2 { display: block; background-color: #536476; color: #fff; position: absolute; float: left; margin: 5px; line-height: 42px; height: 40px; width: 40px; top: 0; left: 0; transition: .5s; border-radius: 10%; } .BTN-G-slide2 span.circle2 { background-color: #243750; } .BTN-G-slide span.title, .BTN-G-slide span.title-hover, .BTN-G-slide2 span.title2, .BTN-G-slide2 span.title-hover2 { position: absolute;left: 60px; text-align: center; margin: 0 auto; font-size: 16px; font-weight: normal; color: #536476; transition: .5s; } .BTN-G-slide2 span.title2, .BTN-G-slide2 span.title-hover2 { color: #243750; left: 60px; } .BTN-G-slide span.title-hover, .BTN-G-slide2 span.title-hover2 { left: 80px; opacity: 0; } .BTN-G-slide span.title-hover,.BTN-G-slide2 span.title-hover2 { color: #fff; }#HTML16 .widget-title h2:before{ color: #b31217 ; content: '\f16a' ;margin-left: 12px; font-family: fontawesome; display: initial; background: transparent;}#HTML15 .widget-title h2:before{ color: #3b5c98 ; content: '\f082' ;margin-left: 12px; font-family: fontawesome; display: initial; background: transparent;}#Followers1 .widget-title h2:before{ content: "\f004" ; color: #f13031; margin-left: 12px; font-family: fontawesome; display: initial; background: transparent;}#HTML13 .widget-title h2:before{ content: '\f198' ; color: #4285f4; margin-left: 12px; font-family: fontawesome; display: initial; background: transparent;}#HTML14 .widget-title h2:before{ content: "\f132"; color: #8bc53f; margin-left: 12px; font-family: fontawesome; display: initial; background: transparent;}
و مبروك عليك الاضافة
و عند كتابه اي تدوينة و تريد عمل هذه الازرار تفضل الاكواد
<a class="BTN-G" href="رابط التحميل" rel="nofollow" target="_blank">التحميل</a><a class="BTN-G2" href="رابط التحميل" rel="nofollow" target="_blank">التحميل</a>
add_comment ليست هناك تعليقات:
إرسال تعليق