ساخت دکمه لینک دار با استفاده از css و Html

ساخت دکمه لینک دار با استفاده از css و Html در این پست قصد داریم تا ساخت یک دکمه زیبا با استفاده از css و html رو براتون بزاریم.کد لینک دادن به button در html را با ۳ ترفند برای شما به نمایش بگذاریم شما میتوانید با کد زیر خیلی راحت به دکمه های سایت خود لینک اضافه کنید.

ما ۳ روش که بدون کد های css هم کار میکنند برای شما قرار داده ایم تا به دلخواه یک نمونه از کد را انتخاب و در سایت و وبلاگ خود استفاده کنید.

کد های بخش اول مربوط به css و استایل دادن به دکمه میباشد که شما میتوانید انها را در هد قالب وبلاگ و یا در جای مناسب از سایت خود قرار دهید.

و بخش دوم کد که مشخص کردم رو میتونید در هر جا که دلتون میخواد استفاده کنید.

 

ساخت دکمه لینک دار با استفاده از css و Html

پیش نمایش کد

<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">&#1587;&#1575;&#1582;&#1578; &#1583;&#1705;&#1605;&#1607; &#1604;&#1740;&#1606;&#1705; &#1583;&#1575;&#1585; &#1576;&#1575; &#1575;&#1587;&#1578;&#1601;&#1575;&#1583;&#1607; &#1575;&#1586; css &#1608; 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>

مشکل سوال نظر و … در زیر همین پست اعلام کنید.موفق باشید.

7 Comments

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code