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

  • the_dav

    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



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



    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

Thông tin tác giả
avatar
MEM LV3
Bài viết :
222
Points :
319
Like :
47
Punbb
Quản trị
Xem lý lịch thành viên
Bài viết liên quan
    Đang tải dữ liệu

Permissions in this forum:
Bạn không có quyền trả lời bài viết