2 سال پیش
949

آموزش ساخت دکمه سه بعدی با 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 از هر واژه دیگری استفاده کنید 🙂

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

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

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

چ
چند برنامه کاربردی ایفون،ایفون،اپلیکیشن ایفون،اپلیکیشن،برنامه های کاربردی،ایفوندار ها،IOS،برنامه ی ایفون،فتوشاپ،اب و هوا،ادیت،رمز عبور،پسورد

چند برنامه کاربردی ایفون

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

XML

قابلیت ساخت نقشه سایت XML به نسخه‌ی جدید وردپرس افزوده خواهد شد!

قابلیت های جدید فتوشاپ 2020 و نحوه کار کردن با آن ها،قابلیت های جدید،

قابلیت های جدید فتوشاپ ۲۰۲۰ و نحوه کار کردن با آن ها

جست‌وجو با کاراکترهای جایگزین در WORD،جست جو در word،کارکترهای جایگزینی در ورد،

جست‌وجو با کاراکترهای جایگزین در WORD

آموزش غیرفعال کردن تصحیح خودکار در کیبورد اندروید و آیفون،غیر فعال سازی اندروید و ایفون،

آموزش غیرفعال کردن تصحیح خودکار در کیبورد اندروید و آیفون