میزبانی وب هاست

میزبانی هاست لینوکس و ویندوز در سرور های قدرتمند سه کشور ایران کانادا و آمریکا با پشتیبانی 24 ساعته

میزبانی وب

ثبت دامنه

ثبت دامنه های ملی کشور ایران و دامنه های بین المللی جهانی با پیشوند های ir , com , net , org , info , ws و ....

ثبت دامنه

طراحی وب سایت

طراحی و برنامه نویسی حرفه ای وب سایت و سیستم های اتوماسیون اداری با قابلیت واکنش گرا (Responsive)

طراحی وب

آموزش طراحی وب

برگزاری کلاس های آموزش برنامه نویسی و طراحی سایت در مازندران بصورت کاملا خصوصی

آموزش طراحی وب

دکمه های سایت فیس بوک facebook button با css3

همشیه طراحی وب سایت فیس بوک رو خیلی دوت داشتم با رنگ بندی آبی و شیک اگر شما هم میخواهید وب سایتی شبیه به فیس بوک facebook داشته باشید میتوانید با کد css3 زیر دکمه های سایت خود را website button را فیس بوکی کنید :

ابتدا کد زیر را در بخش style سایت خود کپی کنید این کد مربوط به css3 دکمه های فیس بوک می باشد :

<span style="color: #339966;">.facebookButton</span>{
	display: inline-block;
	text-decoration: none;
	outline: none;
	padding: 5px 6px;
	font: bold 11px/1em 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
	color: #333;
	background: #ececec;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f6f6', endColorstr='#e0e0df');
	background: -webkit-gradient(linear, left top, left bottom, from(#f5f6f6), to(#e0e0df));
	background: -moz-linear-gradient(top, #f5f6f6, #e0e0df);
	border-width: 1px;
	border-style: solid;
	border-color: #999 #999 #888;
	-webkit-box-shadow: 0 1px 0 #d9d9d9, inset 0 1px 0 #fff;
	-moz-box-shadow: 0 1px 0 #d9d9d9, inset 0 1px 0 #fff;
	box-shadow: 0 1px 0 #d9d9d9, inset 0 1px 0 #fff;
}
<span style="color: #339966;">.facebookButton:hover</span>{
	color: #333;
}
<span style="color: #339966;">.facebookButton:active</span>{
	color: #333;
	background: #dddddd;
	filter: progid:DXImageTransform.Microsoft.gradient(enabled='false');
	border-color: #999;
	-webkit-box-shadow: 0 1px 0 #eaeaea;
	-moz-box-shadow: 0 1px 0 #eaeaea;
	box-shadow: 0 1px 0 #eaeaea;
}

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

.facebookButton{

display: inline-block;

text-decoration: none;

outline: none;

padding: ۵px ۶px;

font: bold ۱۱px/۱em 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;

color: #۳۳۳;

background: #ececec;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f6f6', endColorstr='#e0e0df');

background: -webkit-gradient(linear, left top, left bottom, from(#f5f6f6), to(#e0e0df));

background: -moz-linear-gradient(top, #f5f6f6, #e0e0df);

border-width: ۱px;

border-style: solid;

border-color: #۹۹۹ #۹۹۹ #۸۸۸;

-webkit-box-shadow: ۰ ۱px ۰ #d9d9d9, inset 0 1px 0 #fff;

-moz-box-shadow: ۰ ۱px ۰ #d9d9d9, inset 0 1px 0 #fff;

box-shadow: ۰ ۱px ۰ #d9d9d9, inset 0 1px 0 #fff;

}

.facebookButton:hover{

color: #۳۳۳;

}

.facebookButton:active{

color: #۳۳۳;

background: #dddddd;

filter: progid:DXImageTransform.Microsoft.gradient(enabled='false');

border-color: #۹۹۹;

-webkit-box-shadow: ۰ ۱px ۰ #eaeaea;

-moz-box-shadow: ۰ ۱px ۰ #eaeaea;

box-shadow: ۰ ۱px ۰ #eaeaea;

}

حال برای نمایش دکمه ها کد html زیر را در صفحه ی خود قرار دهید : (همانطور که میدانید فیس از دو رنک button در صفحات خود استفاده می کند)

برای دکمه های سفید رنگ کد

<a href="#" class="facebookButton">Cancel</a>

برای دکمه های آبی رنگ کد

<a href="#" class="facebookConfirmButton">Confirm</a>

کار تمام است….

در آموزش های بعدی سعی میکنم کد دکمه های سایت توییتر ، وردپرس ، و گوگل هم قرار بدم.

تاریخ و زمان انتشار : ۲۲ تیر, ۱۳۹۲

مرتبط با موضوع :

آدرس : مازندران - فریدونکنار - میدان درنا - خیابان جمکران (خط سوته)

تلفن تماس : ۹۲۳۸ ۳۵۶۶ ۰۱۱[ ساعات اداری : شنبه تا چهارشنبه | 9 صبح تا 4 بعد از ظهر ]

پست الکترونیک :info [at] Mazandaranweb.ir

بانک ملی ایران

شماره حساب : 0216867544008
شماره 16 رقمی کارت : 3479 - 0689 - 9918 - 6037
به نام مهرشاد درزی سوته

دوره ی های آموزشی طراحی وب سایت در مازندران

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

طراحی وب سایت ریسپانسیو واکنش گرا responsive با فریم ورک بوت استرپ