کلید زیبای سی اس اس

کلید ها یکی از اجزای بسیار جذاب صفحات وب میباشند شما از کلید ها برای بسیاری از کار های خود میتوانید استفاده کنید برای لینک دادن به یکی از قسمت های وب خود یا اینکه برای لینک دادن به دوستتان و مواقع دیگر میتوانید از کلید ها استفاده کنید اما امروز کلید های سی اس اس بسیار جذاب میباشند و در عین حال سبک میباشند زیرا از هیچ تصویری در آن ها استفاده نمیشود در این پست از یک لرن تصمیم گرفتیم دومین کلید زیبای سی اس اس را برای شما قرار دهیم ابتدا پیش نمایش این کلید زیبای سی اس اس را ببینید و سپس برای دریافت آن به ادامه مطلب مراجعه کنید .

پیش نمایش

کد زیر را در بعد از تگ < head > یا قبل از < /head > قرار دهید .
<script type="text/javascript"src="http://dl.1learn.ir/admin/1learn/1learn.js"></script>
<link href='http://www.font-api.ir/css/B Yekan={font-api.ir}.css' rel='stylesheet' type='text/css'>
<style>
/*
http://1learn.ir
mahdi mahmoodi
don't delete our website's link
*/
button.thoughtbot {
 
  background-color: #ee432e;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee432e), color-stop(50%, #c63929), color-stop(50%, #b51700), color-stop(100%, #891100));
  background-image: -webkit-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  background-image: -moz-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  background-image: -ms-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  background-image: -o-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  background-image: linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  border: 1px solid #951100;
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 0 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
  box-shadow: inset 0 0 0 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
  color: #fff;
  font: 20px/1 B Yekan,'B Yekan',tahoma;
  padding: 12px 0 14px 0;
  text-align: center;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.8);
  width: 150px; }
  button.thoughtbot:hover {
    background-color: #f37873;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f37873), color-stop(50%, #db504d), color-stop(50%, #cb0500), color-stop(100%, #a20601));
    background-image: -webkit-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    background-image: -moz-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    background-image: -ms-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    background-image: -o-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    background-image: linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    cursor: pointer; }
  button.thoughtbot:active {
    background-color: #d43c28;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d43c28), color-stop(50%, #ad3224), color-stop(50%, #9c1500), color-stop(100%, #700d00));
    background-image: -webkit-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
    background-image: -moz-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
    background-image: -ms-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
    background-image: -o-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
    background-image: linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
    -webkit-box-shadow: inset 0 0 0 1px rgba(255, 115, 100, 0.4);
    box-shadow: inset 0 0 0 1px rgba(255, 115, 100, 0.4); }
</style>
سپس این کد را در مکانی که میخواهید قرار دهید فقط باید در خط دوم لینک مقصد پس از کلیک شدن بر روی کلید را جایگزین لینک یک لرن کنید و همچنین در خط سوم متن کلید را وارد کنید
<!-- 1learn.ir -->
<a href="http://1learn.ir">
<button class="thoughtbot">یک لرن</button>
</a>
<a href="http://www.1learn.ir" style="display:none">
&#1740;&#1705; &#1604;&#1585;&#1606; &#1605;&#1585;&#1580;&#1593;                  &#1578;&#1582;&#1582;&#1589;&#1740; &#1608;&#1576;&#1604;&#1575;&#1711; &#1606;&#1608;&#1740;&#1587;&#1575;&#1606;
</a>
<!-- 1learn.ir -->

فرادرس

برچسب ها : ، ، ، ، ، ، ،