گذاشتن دکمه در سایت

[jozef2070 12]

سلام دوستان عزیز

من می خواستم تو سایتم از دکمه استفاده کنم چطوری باید این کا رو انجام بدم .

مثل تصویر زیر .

ویرایش شده در آذر 91 توسط jozef2070

[mina_rp 10]

عکس رو توی سایتتون آپلود کنید بعد جایی که می خواهید دکمه بگذارید عکس رو فراخونی کنید و لینک بدید بهش!

[jozef2070 12]

خوب دوست عزیز عکس درست می کنم 3تا عکس مجزا ولی عکس ها در یک راستا قرار نمی گیرند .

باید چی کا کنم که عکس ها در یک راستا قرار بگیرند ؟

[blazhel 16]

برای اینکه در یک راستا قرار بگیرین جدول رسم کنید و هر عکس رو در داخل یک جدول بزارین تا کنار همباشن در ضمن می تونید به جای تصویر از css برای طراحی دکمه استفاده کنید

[jozef2070 12]

از css چطوری میشه ؟

میشه بیشت راهنمایی کنید .

[blazhel 16]

یعنی می خواهید با css طراحی کنید؟

خب راحته شما باید شکل مورد نظر رو با دایو واستایل css طراحی کنید ودر قالب کد ها شو قرار بدین و با فراخوانی در قالب سایت ازشون استفاده کنید برای مثال:

کد های زیر رو در template.css قالب قرار بدین

.buttonred
{
   display: inline-block;
   vertical-align: middle;
   cursor: pointer;
   background-color:#fa1414;
   font-family: google;
   font-size: 15px;
   text-align:center;
   color: #ffffff;
   padding: 10px 30px 10px 30px;
   -webkit-border-radius: 2px;
   border-radius: 2px;
   text-shadow:2px 2px 5px #272727;
   margin-top: 20px;
   margin-bottom: 10px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
   -webkit-box-shadow: inset 0px 10px 10px 1px rgba(250, 150, 150, .5);
   box-shadow: inset 0px 10px 10px 1px rgba(250, 150, 150, .5);
}


.buttonred:hover
{
   color: #ffffff;
   -webkit-box-shadow: inset 0px -10px 10px 1px rgba(250, 150, 150, .5) ,
   0px 0px 5px 0px rgba(0, 0, 0, 0.4);
   box-shadow: inset 0px -10px 10px 1px rgba(250, 150, 150, .5) ,
   0px 0px 5px 0px rgba(0, 0, 0, 0.4);
-webkit-transition: all .3s;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
}

وبعد از قرار دادن این کد به داخل مدیریت جوملا برین و یک مطلب جدید بسازین

مثل کلمه

دانلود

وقتی تغییر وضعیت ویرایشگر رو می زنین کلمه شما به این صورت است

<p>دانلود</p>

باید این کد رو به کد زیر تغییر بدین

<div class="buttonred">دانلود</div>

حالا سیو کنید ومی بینید که کلمه دانلودشما داخل یک دکمه قرار گرفت

کاری که ما کردیم این بود که به جای تگ p از تگ divاستفاده کردیم وکلاس مورد نظر که css اون رو نوشته بودیم رو فراخوانی کردیم

[jozef2070 12]

دوست عزیز ممنون اومدند .

یه درخواست چون من زیاد از css3 سر در نمی آرم . یه لطفی در حق ما انجام بدید .

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

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

با تشکر

[blazhel 16]

دوست عزیز شما می تونین اعداد padding ؤو در د های بالا کم کنید تا کوچیک بشه دکمه ها

من برای یک رنگ قرمز این کد هارو قرار داد مشما می تونید برای رنگ های مختلف این کد ها رو بسازین با نام های مختلف از همین کدها استفاده کنید و وفقط background-color رو تغییر بدین