دکمه css

سلام،

امروزه یکی از پر رواج ترین زبان های برنامه نویسی تحت وب زبان ساده و زیبا و در عین حال حرفه ای cssمیباشد که تقریبا تمامی متحرک سازی ها و تمامی کد های که نمیتوان به هیچ عنوان آن ها را باHTMLساخت،

برای همین حال بیشتر سایت های گرافیکی تحت وب از کد هایی به عنوان کد های تبلیغات متنی،منو های سی اس اس بسیار زیبا ودکمه های حرفه ای جور به جور و گوناگون استفاده میشود.برای همین مانیز بیکار نمانده و سری جدید و مخصوصی از این کد های cssرا برای کاربرامون ساختیم و آن را در سایت یک لرن قرار دادیم به همین جهت کدی پدید آمد که به صورت دکمه css بوده و میتوان از آن در بیشتر جا ها و مکان ها استفاده کرد که یک نمونه از آنها تبلیغات متنی به صورت دکمه ای میباشد و کاربرد های فراروانی را امروزه در سایت های گوناگون را داردو باعث زیبایی و هم کسب درآمد سایت های پر بازدید وگوناگون شده است…

مشخصات این کد وسایر توضیجات درمورد آن:

این کد دارای رنگ زیبا و دلنشین آبی به رنگ آسمانی و کم رنگ و درعین حال متحرک و در عین و زمان کلیک روی آن عکس العمل خاصی مانند حیات حقیقی انجام میدهد و این باعث واقعی تر شدن و زیبا تر شدن این کد شده است،(منظورم زمانی است که روی دکمه کلیک میکنید دکمه نیز به سمت پایین منحنی و خمیده میشود یا همان فشرده یا به سمت پایین حرکت میکند)

ومانند یک دکمه جلوده میدهد……..

این دکمه cssرا میتوانید به عنوان تبلیغات متنی جالب و جذاب،منو یا همان اگر چند منو دارید منوهای سایت ها ووبلاگ های شما،صفحات جداگانه،پیشنمایش ها،قالب هاو حتی به عنوان دکمه ی پیشفرض استفاده کنید وهمچنین بستگی به خلاقیت شما دارد که از دکمه cssدر کجا ها استفاده کنیدوآن را در کدام محل هایی جلوه دهید…

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

وهمچنین توصیه میشود که در وبلاگ ها وهمچنین(رزبلاگ)از این کد ها در ستونه های سمت چپ و راست که مناسب این نوع کدها هستند قرار داده شود زیرا در این مکان ها و هم خوب و هم زیبا و حرفه ای جلوه میدهند و باعث جلب توجه بازدید کنندگان محترم وبلاگ مورد نظرتان میشود.

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

کد زیر را در قسمت head قالب خود قرار دهید
<style>
.button
{
  width: 250px;
    height: 50px;
  float: left;
    color: white;
  font-size: 25px;
  line-height: 50px;
  text-align: center;
  margin-right: 60px;
  margin-bottom: 60px;
  -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
 
.button:hover
{
  /*
    Add margin-top to create press effect  
  */
    margin-top: 3px;
}
 
.button#blue
{
    background-color: #00D2FF;
    -webkit-box-shadow: 0px 7px 0px rgba(0, 151, 183, 1);
    -moz-box-shadow: 0px 7px 0px rgba(0, 151, 183, 1);
    box-shadow: 0px 7px 0px rgba(0, 151, 183, 1);
}
 
.button#blue:hover
{
  /* 
    Decrease the shadow effect by the size
    of the margin-top effect. 
    (3 px in this case, from 7px to 4px)
  */
    background-color: #1ed7ff;;
    -webkit-box-shadow: 0px 4px 0px rgba(0, 151, 183, 1);
    -moz-box-shadow: 0px 4px 0px rgba(0, 151, 183, 1);
    box-shadow:  0px 4px 0px rgba(0, 151, 183, 1);
}
 
/* The Hover code by 1learn.ir */
 
</style>
کد زیر رو در هر قسمت که دوست میدارید قرار بدهید فقط در خط دوم به جای لینک سایت یک لرن لینکی را که میخواهید با زدن دکمه به آن صفحه هدایت شوید وارد کنید و در خط چهارم نیز میتوانید متن پیشفرض کلید را عوض کنید
<!--The Hover Code By:www.1learn.ir-->
<a href="http://1learn.ir">
<div class = "button" id = "blue">
      کلید</div>
</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>
<!--The Hover Code By:www.1learn.ir-->

فرادرس

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