Diễn Đàn Hỗ Trợ FM
Bạn có muốn phản ứng với tin nhắn này? Vui lòng đăng ký diễn đàn trong một vài cú nhấp chuột hoặc đăng nhập để tiếp tục.


[Code] bbcode nút demo và dowload cực đẹp với font awesome

Tác giả: - vào lúc:
the_dav
Bài viết : 226
Points : 323
Like : 47
Punbb
Quản trị
the_davMEM LV3
9/6/2016, 15:47
#1

buton demo và dowload bằng css cực đẹp


Chia sẻ cho ae thêm bộ buton cho những ai hay chia sẻ phần mềm IT rất ngầy và chuyên nghiệp

[Code] bbcode nút demo và dowload cực đẹp với font awesome CZWXY0r

khi chỉ chuột đến nó di chuyển hehe. click vào sẽ ra link

[Code] bbcode nút demo và dowload cực đẹp với font awesome UAGOKXY

Code:

$(document).on('ready',function(){
$('.btn-slide1 a').each(function(){
var davhotrofmdemo=$(this).attr('href');$(this).prepend('<a target="_blank" src="'+davhotrofmdemo+'" class="btn-slide"><span class="circle"><i class="fa fa-rocket"></i></span><span class="title">Demo</span><span class="title-hover">Click here</span>
</a>')}
)});
$(document).on('ready',function(){
$('.btn-slide3 a').each(function(){
var davhotrofmdow=$(this).attr('href');$(this).prepend('<a target="_blank" src="'+davhotrofmdow+'" class="btn-slide2"><span class="circle2"><i class="fa fa-download"></i></span><span class="title2">Download</span><span class="title-hover2">Click here</span></a>')}
)});
$(function(){
     $(function(){
          $('<a class="sceditor-button sceditor-button-new-button-demo" unselectable="on" title="Additional Info on Hover Here"><div unselectable="on" style="background-image:url(http://icons.iconarchive.com/icons/saki/nuoveXT/16/Apps-demo-icon.png)">Dowload</div></a>').insertAfter('.sceditor-button-fahide').click(function(){
               $('#text_editor_textarea').sceditor("instance").insertText("[table class=btn-slide1][tr][td]","[/td][/tr][/table]");
          });
      });
     $(function(){
          $('<a class="sceditor-button sceditor-button-new-button-dowload" unselectable="on" title="Additional Info on Hover Here"><div unselectable="on" style="background-image:url(http://icons.iconarchive.com/icons/7ur/iConPack/16/dowload-icon.png)">Dowload</div></a>').insertAfter('.sceditor-button-fahide').click(function(){
               $('#text_editor_textarea').sceditor("instance").insertText("[table class=btn-slide3][tr][td]","[/td][/tr][/table]");
          });
      });
});
$(function(){
    $("p").prepend("<style>.btn-slide1, .btn-slide3 { font-size: 0px; } .btn-slide, .btn-slide2 { position: relative; display: inline-block; height: 50px; width: 200px; line-height: 50px; padding: 0; border-radius: 50px; background: #fdfdfd; border: 2px solid #0099cc; margin: 10px; transition: .5s; } .btn-slide2 { border: 2px solid #efa666; } .btn-slide:hover { background-color: #0099cc; } .btn-slide2:hover { background-color: #efa666; } .btn-slide:hover span.circle, .btn-slide2:hover span.circle2 { left: 100%; margin-left: -45px; background-color: #fdfdfd; color: #0099cc; } .btn-slide2:hover span.circle2 { color: #efa666; } .btn-slide:hover span.title, .btn-slide2:hover span.title2 { left: 40px; opacity: 0; } .btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 { opacity: 1; left: 40px; } .btn-slide span.circle, .btn-slide2 span.circle2 { display: block; background-color: #0099cc; color: #fff; position: absolute; float: left; margin: 5px; line-height: 42px; height: 40px; width: 40px; top: 0; left: 0; transition: .5s; border-radius: 50%; } .btn-slide2 span.circle2 { background-color: #efa666; } .btn-slide span.title, .btn-slide span.title-hover, .btn-slide2 span.title2, .btn-slide2 span.title-hover2 { position: absolute; left: 90px; text-align: center; margin: 0 auto; font-size: 16px; font-weight: bold; color: #30abd5; transition: .5s; } .btn-slide2 span.title2, .btn-slide2 span.title-hover2 { color: #efa666; left: 80px; } .btn-slide span.title-hover, .btn-slide2 span.title-hover2 { left: 80px; opacity: 0; } .btn-slide span.title-hover, .btn-slide2 span.title-hover2 { color: #fff; }.btn-slide3 .fa, .btn-slide1 .fa {font-size: 25px;padding: 8px;}</style>");
});


option: ACP >> General >> Security >> Disable external links to guests in messages :NO

Nhớ post demo và dow load phải ở dạng link nhé. ko là ko hiện đâu :)

à nếu ai cho vào mà ko hiện hình thì cho thêm font nhé

Code:

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />


p/s Mấy topic trước mình ko nhắc nhưng lần này mình nhắc ae nào copy thì cho mình lại cái link về đây nhé. :) thank
Tags: #code #codefm