ان كنت استفدت من محتوى المنتدى فاضغط على الاعلانات..

كود ازرار بشكل جميل وله تأثير عند الضغط عليها

  افضل مساهمة1
كود ازرار بشكل جميل وله تأثير عند الضغط عليها

صورة له



كود css

الكود:
body{background:#ffffff;color:#000000;font:10px arial,verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;margin:0px;padding:0px;}a:link,body_alink{color:#A35308;text-decoration:none;}a:visited,body_avisited{color:#A35308;text-decoration:none;}a:hover,a:active,body_ahover{color:#65CC45;text-decoration:underline;}.page{background:#FFFFFF;color:#666666;#border: 1px solid #E3E0C7;#border-right: 2px solid #E3E0C7;#border-left: 2px solid #E3E0C7;}td,th,p,li{font:bold 11pt arial,verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;}.tborder{background:#F9F6E0;color:#000000;}.tcat{background:#666666 linear-gradient(to top,#ED7A0A 0%,#F39A4A 100%);color:#FFFFFF;font:bold 11pt arial,verdana,geneva,lucida,'lucida grande',helvetica,sans-serif;text-align:center;}.tcat a:link,.tcat_alink{color:#F3FFFF;text-decoration:none;}.tcat a:visited,.tcat_avisited{color:#F5FFFF;text-decoration:none;}.tcat a:hover,.tcat a:active,.tcat_ahover{color:#FFFFFF;text-decoration:underline;}.thead{background:#EBDEA9 linear-gradient(to top,#ECDAA3 0%,#F9F2C6 100%);color:#71610B;font:11px tahoma,verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;}.thead a:link,.thead_alink{color:#767569;}.thead a:visited,.thead_avisited{color:#767569;}.thead a:hover,.thead a:active,.thead_ahover{color:#4A912F;}.tfoot{background:#444334 linear-gradient(to top,#444334 0%,#5c5c3d 100%) repeat-x;color:#FFFFFF;#border: 1px solid #F3F3E9;}.tfoot a:link,.tfoot_alink{color:#E8E8E8;}.tfoot a:visited,.tfoot_avisited{color:#E8E8E8;}.tfoot a:hover,.tfoot a:active,.tfoot_ahover{color:#A3B71C;}.alt1,.alt1Active{background:#FFFFFF;color:#484006;font-size:11pt;font-weight:bold;border-bottom:1px solid #EAE3D1;border-right:1px solid #EAE3D1;border-left:1px solid #FFFFFF;border-top:1px solid #FFFFFF;}.alt2,.alt2Active{background:#F9F6E0;color:#484006;border-bottom:1px solid #EAE3D1;border-right:1px solid #EAE3D1;border-left:1px solid #FFFFFF;border-top:1px solid #FFFFFF;#FCF9F0}.inlinemod{background:#FFFFCC;color:#000000;}.wysiwyg{background:#FFFFFF;color:#000000;font:10pt verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;margin:5px 10px 10px 10px;padding:0px;}.wysiwyg a:link,.wysiwyg_alink{color:#8F0000;}.wysiwyg a:visited,.wysiwyg_avisited{color:#A35308;}.wysiwyg a:hover,.wysiwyg a:active,.wysiwyg_ahover{color:#767569;}textarea,.bginput{font:11px tahoma,verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;}.bginput option,.bginput optgroup{font-size:11px;font-family:tahoma,verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;}.button{font:11px Tahoma;}select{font:11px Tahoma;}option,optgroup{font-size:11px;font-family:Tahoma;}.smallfont{font:11px Tahoma;}.time{color:#FF6633;}.navbar{font:12px Tahoma,verdana;}.highlight{color:#FF0000;font-weight:bold;}.fjsel{background:#3E5C92;color:#E0E0F6;}.fjdpth0{background:#F7F7F7;color:#000000;}.panel{background:#F8F8F8;color:#000000;padding:10px;border:2px outset;}.panelsurround{background:#666666 linear-gradient(to top,#EC943F 0%,#F39A4A 100%);color:#677312;}legend{color:#22229C;font:11px tahoma,verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;}.vbmenu_control{background:#666666 linear-gradient(to top,#FF7F00 0%,#DC7009 100%) repeat-x top left;color:#FFFFFF;font:bold 11px tahoma,verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;padding:3px 6px 3px 6px;white-space:nowrap;}.vbmenu_control a:link,.vbmenu_control_alink{color:#FFFFFF;text-decoration:none;}.vbmenu_control a:visited,.vbmenu_control_avisited{color:#FFFFFF;text-decoration:none;}.vbmenu_control a:hover,.vbmenu_control a:active,.vbmenu_control_ahover{color:#FFFFFF;text-decoration:underline;}.vbmenu_popup{background:#FFFFFF;color:#000000;border:1px solid #EBDEA9;}.vbmenu_option{background:#F9F6E0;color:#594F07;font:11px tahoma,verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;white-space:nowrap;cursor:pointer;}.vbmenu_option a:link,.vbmenu_option_alink{color:#AD5707;text-decoration:none;}.vbmenu_option a:visited,.vbmenu_option_avisited{color:#AD5707;text-decoration:none;}.vbmenu_option a:hover,.vbmenu_option a:active,.vbmenu_option_ahover{color:#DB6E08;text-decoration:none;}.vbmenu_hilite{background:#F9F6E0;color:#594F07;font:11px tahoma,verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;white-space:nowrap;cursor:pointer;}.vbmenu_hilite a:link,.vbmenu_hilite_alink{color:#AD5707;text-decoration:none;}.vbmenu_hilite a:visited,.vbmenu_hilite_avisited{color:#AD5707;text-decoration:none;}.vbmenu_hilite a:hover,.vbmenu_hilite a:active,.vbmenu_hilite_ahover{color:#DB6E08;text-decoration:none;}.bigusername{font-size:14pt;}td.thead,th.thead,div.thead{padding:4px;}.pagenav a{text-decoration:none;}.pagenav td{padding:2px 4px 2px 4px;}.shade,a.shade:link,a.shade:visited{color:#777777;text-decoration:none;}a.shade:active,a.shade:hover{color:#FF4400;text-decoration:underline;}.tcat .shade,.thead .shade,.tfoot .shade{color:#DDDDDD;}.fieldset{margin:10px;}.fieldset,.fieldset td,.fieldset p,.fieldset li{font:11px tahoma,verdana;}.info{padding:3px;background-color:#f7f7e6;border-top:1px solid #dedec1;border-right:2px solid #dedec1;border-left:1px solid #dedec1;border-bottom:2px solid #dedec1;margin-bottom:3px;}.header{color:#FFFFFF;}a.header:link,a.header:visited{color:#FFFFFF;text-decoration:none;}a.header:active,a.header:hover{color:#FF4400;text-decoration:underline;}.noti{color:#FFFFFF;font:bold 10pt tahoma,arial;}a.noti:link,a.noti:visited{color:#FFFFFF;font:bold 10pt tahoma,arial;text-decoration:none;}a.noti:active,a.noti:hover{color:#FEFFC9;font:bold 10pt tahoma,arial;}.sidenav{height:100%;width:0;position:fixed;z-index:1;top:0;right:0;background-color:#ffe0b3;overflow-x:hidden;transition:.2s;padding-top:0px}.sidenav ul{padding:0px}.sidenav li{font-family:serif;border-top-width:1px;border-top-style:solid;border-top-color:#FFFFFF;}.sidenav a:hover,.offcanvas a:focus{color:#9acd32;background-color:#e6e6e6}.sidenav .closebtn{text-align:center;font-size:30px;}.sidenav{padding-top:1px;z-index:5}.sidenav a{font-size:20px;text-decoration:none;padding:10px;font-size:18px;display:block;transition:0.3s}.n-overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2}.n-animate-opacity{-webkit-animation:opac 0.8s;animation:opac 0.8s}@media only screen and (min-width : 780px) {.pbm{display:none}}.Message img{width:auto;height:auto;max-width:90%}.Sig img{max-width:80%;width:auto;height:auto}.mpd{width:97%;margin:auto}.topbutton{background-color:#4CAF50;border:none;color:#fff;padding:4px;text-align:center;text-decoration:none;display:inline-block;font-size:16px;margin:2px;cursor:pointer;font-weight:700;font-family:Arial,Helvetica,sans-seriff;-webkit-transition-duration:.4s;transition-duration:.4s;border-radius:8px}.button1{background-color:#fff;color:#000;border:2px solid #4CAF50}.button1:hover{background-color:#4CAF50;color:#fff}.button2{background-color:#fff;color:#000;border:2px solid #008CBA}.button2:hover{background-color:#008CBA;color:#fff}.button3{background-color:#fff;color:#000;border:2px solid #f44336}.button3:hover{background-color:#f44336;color:#fff}@media only screen and (max-width: 555px) {.lostpass{display:none}}.corepbm a{border-bottom:2px solid #e7ff00;}.corepbm a:hover{border-bottom:2px solid #cb1c1c;text-decoration:none;}@media only screen and (max-width: 780px) {.m{display:none}.mhome{max-width:80px}.pbm{display:block}.corepbm{font-size:17px;line-height:1.6em}.corepbm font{font-size:17px;word-break:normal;overflow-wrap:break-word}.corepbm a{font-size:16px;word-break:break-all}.corepbm img{width:auto;height:auto;max-width:94%}#header_right_cell img{max-width:100%;width:auto;height:auto}.pnr{float:right}.pnl{float:left}.pagenav td{display:inline-table}.signbutton{margin-right:5px}}.meminfo{width:167px;color:#208d29;background-color:white;text-align:right;margin:0 auto;border:solid 1px;border-radius:4px;padding-right:4px;}.visitortophead{width:100%;margin:auto;padding-top:1px;height:41px;display:flex;margin-bottom:2px;background:rgb(34,34,17) linear-gradient(to top,rgb(34,34,17) 0%,rgb(68,68,34) 100%);border-bottom:2px solid rgb(223,146,44);}.membtophead{display:block;}.visitorrightnavmenu{font-size:30px;right:0px;top:0px;cursor:pointer;color:greenyellow;padding-right:5px;padding-left:5px;position:fixed;background-color:#0000ff;font-weight:bolder;}.biglogopc{margin:auto;text-align:center;max-width:178px;padding-right:40px;}.logo2cells{margin:auto;width:100%;height:auto;display:inline-block;background-color:#F3EFE3}.logo40{margin:auto;text-align:center;max-width:178px;padding-right:50px;}.logocellleft{text-align:center;margin:2px;}.upforumarrow{font-size:29px;right:0px;bottom:0px;cursor:pointer;color:greenyellow;padding-right:8px;padding-left:8px;position:fixed;background-color:#0000ff;border-top-left-radius:10px;z-index:6;}.neswangynotepic{margin:auto;text-align:center;}.forumtextnote{margin:0 auto;text-align:center;font-size:16px;background:#124162 linear-gradient(to top,#1879d4 0%,#78aeff 100%);color:white;padding:5px;font-weight:bold;}.sprite{background-image:url('../../images/spritesheet.png');background-repeat:no-repeat;display:inline-block;}.sprite-bookmarksite_google{width:16px;height:16px;background-position:-4px -4px;}.sprite-bookmarksite_twitter{width:16px;height:16px;background-position:-28px -4px;}.sprite-collapse_tcat{width:14px;height:14px;background-position:-52px -4px;}.sprite-collapse_tcat_collapsed{width:14px;height:14px;background-position:-74px -4px;}.sprite-collapse_thead{width:15px;height:15px;background-position:-96px -4px;}.sprite-collapse_thead_collapsed{width:15px;height:15px;background-position:-119px -4px;}.sprite-fb{width:16px;height:16px;background-position:-142px -4px;}.sprite-forum_new{width:55px;height:58px;background-position:-4px -28px;}.sprite-forum_old{width:55px;height:58px;background-position:-67px -28px;}.sprite-home-icon{width:16px;height:16px;background-position:-166px -4px;}.sprite-key{width:32px;height:32px;background-position:-130px -28px;float:right;margin-right:44px;margin-top:3px;}.sprite-lastpost{width:12px;height:12px;background-position:-190px -4px;}.sprite-menu_open{width:11px;height:7px;background-position:-190px -24px;}.sprite-navbits_finallink_rtl{width:35px;height:15px;background-position:-170px -39px;}.sprite-navbits_start{width:16px;height:16px;background-position:-170px -62px;}.sprite-newthread{width:140px;height:35px;background-position:-4px -94px;}.sprite-post_new{width:10px;height:11px;background-position:-194px -62px;}.sprite-post_old{width:10px;height:11px;background-position:-152px -81px;}.sprite-printer{width:21px;height:17px;background-position:-170px -86px;}.sprite-quote{width:70px;height:20px;background-position:-4px -137px;}.sprite-reply{width:107px;height:40px;background-position:-82px -137px;}.sprite-reputation_pos{width:8px;height:10px;background-position:-199px -81px;}.sprite-search_box_icon{width:13px;height:13px;background-position:-152px -111px;}.sprite-sendtofriend{width:21px;height:17px;background-position:-173px -111px;}.sprite-stats{width:45px;height:45px;background-position:-213px -4px;}.sprite-sticky{width:12px;height:12px;background-position:-213px -57px;}.sprite-subforum_new{width:11px;height:11px;background-position:-233px -57px;}.sprite-subforum_old{width:11px;height:11px;background-position:-233px -76px;}.sprite-tag{width:13px;height:13px;background-position:-215px -95px;}.sprite-twitter-icon{width:18px;height:16px;background-position:-236px -95px;}.sprite-user_offline{width:30px;height:30px;background-position:-202px -119px;}.sprite-user_online{width:30px;height:30px;background-position:-197px -157px;}.sprite-whos_online{width:45px;height:45px;background-position:-4px -195px;}
        .fade {
            display:inline-block;
            background: -moz-linear-gradient(left, rgb(235,234,221) 0%, rgba(235,234,221,0) 100%);
            background-image: -webkit-gradient(linear, left top, right top, color-stop(0.00, rgb(235,234,221)), color-stop(1.00, rgba(235,234,221,0)));
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ebeadd, endColorstr=#00ebeadd, GradientType=1);
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ebeadd, endColorstr=#00ebeadd, GradientType=1)";
        }
        .blur {
            display:inline-block;
            color:#ddd;
            text-shadow: 0 0 2px #aaaaaa;
            text-shadow: 0 0 4px #aaaaaa;
            text-shadow: 0 0 6px #aaaaaa;
            -ms-filter: "progid:DXImageTransform.Microsoft.Blur(pixelradius=2)";
            filter:
                progid:DXImageTransform.Microsoft.MotionBlur(strength=1,direction=310)
                progid:DXImageTransform.Microsoft.Blur(pixelradius=2);
        }
        .flipH {
            display:inline-block;
            -moz-transform:scale(-1,1);
            -o-transform:scale(-1,1);
            -webkit-transform:scale(-1,1);
            transform:scale(-1,1);
            -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";
            filter: progid:DXImageTransform.Microsoft.Matrix(
                M11=-1,
                M12=0,
                M21=0,
                M22=1,
                SizingMethod="auto expand");
        }
        .flipV {
            display:inline-block;
            -moz-transform:scale(1,-1);
            -o-transform:scale(1,-1);
            -webkit-transform:scale(1,-1);
            transform:scale(1,-1);
            -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=-1, SizingMethod='auto expand')";
            filter: progid:DXImageTransform.Microsoft.Matrix(
                M11=1,
                M12=0,
                M21=0,
                M22=-1,
                SizingMethod="auto expand");
        }

كود HTML

الكود:
<div style="margin:auto;text-align:center;">
<a href="/" target="_blank" rel="noopener"><span class="topbutton button2">مرحباً بك</span>
</a><a href="/" target="_blank" rel="noopener"><span class="topbutton button1">مرحباً بك</span>
</a><a href="/" target="_blank" rel="noopener"><span class="topbutton button3">مرحباً بك</span>
</a><a href="/" target="_blank" rel="noopener"><span class="topbutton button2">مرحباً بك</span>
</a>
</div>


<div class="neswangynotepic">
<div>
<a href="/" target="_blank" rel="noopener"><span class="topbutton button3">جميع ما يطرح بالمنتدى لا يعبر عن رأي الاداره وانما يعبر عن رأي صاحبه فقط</span>
</a></div>
<div>
<a href="/" target="_blank" rel="noopener"><span class="topbutton button1">اذكر الله و صل على الحبيب</span>
</a>
<a href="/" target="_blank" rel="noopener"><span class="topbutton button2">اذكر الله و صل على الحبيب</span>
</a>
<a href="/" target="_blank" rel="noopener"><span class="topbutton button3">اذكر الله و صل على الحبيب</span>
</a>
<a href="/" target="_blank" rel="noopener"><span class="topbutton button1">اذكر الله و صل على الحبيب</span>
</a>
</div>
</div>

  افضل مساهمة2
ممكن صورة كيف يظهر
  افضل مساهمة3
المشكله هنا فى المنتدى الصوره ما تظهر للاعضاء
لاتستطيع الرد على المواضيع في هذا المنتدى