ساخت دکمه لینک دار با استفاده از css و Html
ساخت دکمه لینک دار با استفاده از css و Html در این پست قصد داریم تا ساخت یک دکمه زیبا با استفاده از css و html رو براتون بزاریم.کد لینک دادن به button در html را با ۳ ترفند برای شما به نمایش بگذاریم شما میتوانید با کد زیر خیلی راحت به دکمه های سایت خود لینک اضافه کنید.
ما ۳ روش که بدون کد های css هم کار میکنند برای شما قرار داده ایم تا به دلخواه یک نمونه از کد را انتخاب و در سایت و وبلاگ خود استفاده کنید.
کد های بخش اول مربوط به css و استایل دادن به دکمه میباشد که شما میتوانید انها را در هد قالب وبلاگ و یا در جای مناسب از سایت خود قرار دهید.
و بخش دوم کد که مشخص کردم رو میتونید در هر جا که دلتون میخواد استفاده کنید.
<style type="text/css"> .spotlightmenu{ width:100%;overflow:hidden;direction:rtl}.spotlightmenu ul{ margin: 0; padding: 0; font: bold 11px tahoma;list-style-type: none; } .spotlightmenu li{ display: inline-block; position:relative; padding: 5px; margin: 0; margin-right: 5px;}.spotlightmenu li a{ display:inline-block; padding: 5px; min-width:50px;height:50px;text-decoration: none; color: black; margin: 0 auto; overflow:hidden; -moz-transition: all 0.5s ease-in-out;-webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }</style><div style="position:absolute;top:-200%;"><a href="https://codebazan.ir/"rel="follow">ساخت دکمه لینک دار با استفاده از css و Html</a></div><style> .spotlightmenu li:hover a{ color: white; background: #a71b15;-webkit-border-radius: 50%;-moz-border-radius: 50%; border-radius: 50%; }.spotlightmenu li a span{position:relative;top:35%;}input , button { background: none repeat scroll 0 0 #3abec0; border: 1px solid #3abec0; border-radius: 10px; color: #000; cursor: pointer; font-family: tahoma; margin-right: 5px; margin-top: 10px; padding: 5px; } button:hover { background: none repeat scroll 0 0 #f81a3d; border: 1px solid #3abec0; border-radius: 10px; color: #eee; margin-right: 5px; margin-top: 10px; padding: 5px; } </style> <!----کد بالا را در هد قالبتون قرار بدین-----> <!---کد زیرو در جای دلخواه از قالبت و یا ... ---> <center> <div class="spotlightmenu">ماوس ببر رو لینک زیر?<ul> <li><a href="https://codebazan.ir"><span>کدبازان</span></a></li> </ul> اینم دومی?? <p> <a href="https://codebazan.ir"><input type="button" class="submit" value="نوع دوم لینک"></a></div> <button type="button" onclick="location.href='https://codebazan.ir';">نوع سوم لینک</button>
مشکل سوال نظر و … در زیر همین پست اعلام کنید.موفق باشید.
مرسی از کدتون
مفید بودش
خوهش میکنم
موفق باشید
سلام مجدد
مشکل فونت فارسی روی حل کردم ولی همچنان مشکل لینک به ساب دامینم با لینک حل نشده!!!!
خب ادرس لینک رو به این صورت وارد کن
http://www.home.leyva.ir/
مشکلت حل میشه
من انگیلیسی بلد نیستم لطفا بگین باید چیکار کنم
کد اماده ویرایش کن بزار تو قالب و هر جایی ک فک میکنی مناسبه