3 سال پیش
1970

آموزش ساخت دکمه سه بعدی با html و css

با سلام خدمت کاربران عزیز سایت زرین هور در این جلسه می خواهیم آموزش ساخت دکمه سه بعدی با html و css را به شما بدهیم.

استفاده از دکمه ها و حتی باکس های زیبا و فلت می تواند به سایت زیبایی چشم گیر بدهد و هرچه بیشتر مشتری را جذب خود کند تا زمان بیشتری را در سایت بماند و بتواند بیشتر با نحوه فعالیت سایت ما آشنا شود؛ همین امر از نظر سئو هم یک نمره مثبت است که نرخ خروج سایت پایین می آید یعنی حداقل یک لینک در سایت شما توسط مشتری باز می شود!

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

برای شروع از کد css زیر شروع می کنیم و بعد می رویم سراغ کد html که کم است:

۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳
۵۴
۵۵
۵۶
۵۷
۵۸
۵۹
۶۰
۶۱
۶۲
۶۳
۶۴
۶۵
۶۶
۶۷
۶۸
۶۹
۷۰
۷۱
۷۲
۷۳
۷۴
۷۵
۷۶
۷۷
۷۸
۷۹
۸۰
۸۱
۸۲
۸۳
۸۴
۸۵
۸۶
۸۷
۸۸
۸۹
۹۰
۹۱
۹۲
۹۳
۹۴
۹۵
۹۶
۹۷
.button{
    position: relative;
    color: rgba(255,255,255,1);
    text-decoration: none;
    font-family: ‘Yanone Kaffeesatz’;
    font-weight: 700;
    font-size: 3em;
    display: block;
    padding: 4px;
    margin: 25px auto;
    min-width: 250px;
    max-width: 35%;
    text-align: center;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -ms-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}
.button:active {
    position: relative;
    top: 6px;
}
.button-blue{
    background-color: rgba(118,167,250,1);
    -webkit-box-shadow: 0px 9px 0px rgba(66,133,244,1);
    -moz-box-shadow: 0px 9px 0px rgba(66,133,244,1);
    box-shadow: 0px 9px 0px rgba(66,133,244,1);
}
.button-blue:active {
    -webkit-box-shadow: 0px 3px 0px rgba(66,133,244,1);
    -moz-box-shadow: 0px 3px 0px rgba(66,133,244,1);
    box-shadow: 0px 3px 0px rgba(66,133,244,1);
}
.button-blue:hover{
    background: rgba(160,195,255,1);
}
.button-red{
    background-color: rgba(229,115,104,1);
    -webkit-box-shadow: 0px 9px 0px rgba(219,115,104,1);
    -moz-box-shadow: 0px 9px 0px rgba(219,115,104,1);
    box-shadow: 0px 9px 0px rgba(219,115,104,1);
}
.button-red:active {
    -webkit-box-shadow: 0px 3px 0px rgba(219,115,104,1);
    -moz-box-shadow: 0px 3px 0px rgba(219,115,104,1);
    box-shadow: 0px 3px 0px rgba(219,115,104,1);
}
.button-red:hover{
    background: rgba(237,157,151,1);
}
.button-yellow{
    background-color: rgba(251,203,67,1);
    -webkit-box-shadow: 0px 9px 0px rgba(244,180,0,1);
    -moz-box-shadow: 0px 9px 0px rgba(244,180,0,1);
    box-shadow: 0px 9px 0px rgba(244,180,0,1);
}
.button-yellow:active {
    -webkit-box-shadow: 0px 3px 0px rgba(244,180,0,1);
    -moz-box-shadow: 0px 3px 0px rgba(244,180,0,1);
    box-shadow: 0px 3px 0px rgba(244,180,0,1);
}
.button-yellow:hover{
    background: rgba(255,225,104,1);
}
.button-green{
    background-color: rgba(51,182,121,1);
    -webkit-box-shadow: 0px 9px 0px rgba(15,157,88,1);
    -moz-box-shadow: 0px 9px 0px rgba(15,157,88,1);
    box-shadow: 0px 9px 0px rgba(15,157,88,1);
}
.button-green:active {
    -webkit-box-shadow: 0px 3px 0px rgba(15,157,88,1);
    -moz-box-shadow: 0px 3px 0px rgba(15,157,88,1);
    box-shadow: 0px 3px 0px rgba(15,157,88,1);
}
.button-green:hover{
    background: rgba(123,207,169,1);
}
.column{
    width:50%;
    float:left;
}

 

نکته:

اگر از سیستم مدیریت محتوایی آماده مانند وردپرس استفاده می کنید، این کد ها را در فایل style.css جایگذاری کنید و اگر از cms اختصاصی استفاده می کنید، این کد ها را در فایل مد نظر خود جایگذاری کنید.

حال چگونه می خواهید از این دکمه ها استفاده کنید؟

استفاده از دکمه قرمز:

۱
<a href=”https://zarrinhoor.com/” class=”button button-red”>zarrinhoor</a>

 

استفاده از دکمه آبی:

۱
<a href=”https://zarrinhoor.com/” class=”button button-blue”>7learn</a>

 

استفاده از دکمه سبز:

۱
<a href=”https://zarrinhoor.com/” class=”button button-green”>7learn</a>

 

استفاده از دکمه زرد:

بعد از اتمام کار می توانید به جای واژه zarrinhoor از هر واژه دیگری استفاده کنید 🙂

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

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

مطالب پر بازدید

درایو های (:A) و (:B) در This PC کجا هستند؟!؟!؟

همۀ ما بارها و بارها وارد my computer شدیم و از درایو هایمان استفاده کردیم، آیا تا به حال برایتان این سوال پیش نیامده که درایو های (:A) و (:B) در کجای ویندوز قرار دارند؟و چگونه می توان اسم دیگر...

ده ابزار شناسایی فعالیت های منفی در سئو،سئو منفی،ابزارآنالیز سایت،آنالیز سایت،

ده ابزار شناسایی فعالیت های منفی در سئو

هش کردن مقدار استرینگ در زبان PHP،امنیت در پی اپ پی،امنیت در پی اپ پی

هش کردن مقدار استرینگ در زبان PHP

رمزگذاری درایو و فلش دیسک،رمزگذاری درایو و فلش ،رمزگذاری درایو ،رمزگذاری فلش دیسک،رمزگذاری ترفند،ترفند ویندوز

رمزگذاری درایو و فلش دیسک

ویرایش عکس،پایین آوردن حجم عکس،پایین آوردن حجم عکس بدون نویز،پایین آوردن حجم عکس بدون افت تصویر،ترفند ویرایش عکس،راه های مصرف کم اینترنت

راحت و رایگان بدون اُفت کیفیت حجم عکس هارو پایین بیار