ساخت دکمه های زیبا با css

در این بخش از آموزش CSS می خواهیم به ساخت دکمه های زیبا با css برویم و با ذکر 5 مینی پروژه ، شما را با ساخت دکمه آشنا کنیم. پس با ما باشید.

ابتدا دستورات html,css را یاد بگیرید سپس به سراغ ساخت دکمه های زیبا با css بیایید.

کد html ساخت دکمه زیبا با CSS :

در قسمت پایین ، کد html ساخت دکمه را مشاهده می کنید. این کد را در یک فایل html کپی کرده و سپس آن را اجرا کنید.

حتما پسوند فایل ها را در ویندوز فعال کنید در غیر این صورت احتمال دارد که فایل html با پسوند txt ذخیره شود و اجرا نشود.

بعضی از دوستان پسوند فایل ها را در ویندوز فعال نمی کنند و فایل با پسوند TXTذخیره میشود و فایل باز نمی شود.

ابتدا این کد HTML را قرار دهید و سپس در قسمت STYLE کدهای CSS هر دکمه را قرار دهید.

ما 5 دکمه را خواهیم ساخت که کدهای HTML آن یکی است فقط کافی است که کدهای CSS آن را تغییر دهید و ذخیره کنید و سپس اجرا کنید.

کد کامل 5 مینی پروژه را می توانید در قسمت پایین دانلود کنید.

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>
<div style="margin: 10%">
<a href="https://sh711.com/" class="myButton">sh711.com</a>
</div>
</body>
</html>

کدهای CSS ساخت دکمه :

مثال اول : در قسمت STYLE کد CSS زیر را قرار دهید. ذخیره کنید و سپس اجرا کنید. برای اجرای فایل های HTML کافی است روی ان دابل کلیک کنید.

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

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

.myButton {
box-shadow: 3px 4px 0px 0px #899599;
background:linear-gradient(to bottom, #ededed 5%, #bab1ba 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#bab1ba',GradientType=0);
background-color:#ededed;
border-radius:15px;
border:1px solid #d6bcd6;
display:inline-block;
cursor:pointer;
color:mediumvioletred;
font-family:Arial;
font-size:17px;
padding:7px 25px;
text-decoration:none;
text-shadow:0px 1px 0px #e1e2ed;
font-weight: 600;
}
.myButton:hover {
background:linear-gradient(to bottom, #bab1ba 5%, #ededed 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bab1ba', endColorstr='#ededed',GradientType=0);
background-color:#bab1ba;
}
.myButton:active {
position:relative;
top:1px;
}

مثال دوم : در قسمت STYLE کد CSS زیر را قرار دهید. ذخیره کنید و سپس اجرا کنید. می بینید که دکمه مثال دوم با مثال اول متفاوت است.

مهم کد HTML نیست در کد HTML فقط یک نام کلاس myButton به تگ a دادیم.

مهم کد css است که دکمه را زیبا می کند.

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

.myButton {
box-shadow:inset 0px -3px 7px 0px #29bbff;
background:linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2dabf9', endColorstr='#0688fa',GradientType=0);
background-color:#2dabf9;
border-radius:3px;
border:1px solid #0b0e07;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:15px;
padding:9px 23px;
text-decoration:none;
text-shadow:0px 1px 0px #263666;
}
.myButton:hover {
background:linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0688fa', endColorstr='#2dabf9',GradientType=0);
background-color:#0688fa;
}
.myButton:active {
position:relative;
top:1px;
}

مثال سوم : در قسمت STYLE کد CSS زیر را قرار دهید. ذخیره کنید و سپس اجرا کنید. می بینید که دکمه مثال سوم با مثال های قبلی متفاوت است.

.myButton {
-moz-box-shadow: 3px 4px 0px 0px #8a2a21;
-webkit-box-shadow: 3px 4px 0px 0px #8a2a21;
box-shadow: 3px 4px 0px 0px #8a2a21;
background:linear-gradient(to bottom, #c62d1f 5%, #f24437 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f', endColorstr='#f24437',GradientType=0);
background-color:#c62d1f;
border-radius:18px;
border:1px solid #d02718;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:7px 25px;
text-decoration:none;
text-shadow:0px 1px 0px #810e05;
}
.myButton:hover {
background:linear-gradient(to bottom, #f24437 5%, #c62d1f 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24437', endColorstr='#c62d1f',GradientType=0);
background-color:#f24437;
}
.myButton:active {
position:relative;
top:1px;
}

مثال چهارم : در قسمت STYLE کد CSS زیر را قرار دهید. ذخیره کنید و سپس اجرا کنید. می بینید که دکمه مثال چهارم با مثال های قبلی متفاوت است.

.myButton {
box-shadow:inset 0px 1px 0px 0px #ffffff;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
border-radius:6px;
text-indent:0;
border:1px solid #555;
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:50px;
line-height:50px;
width:100px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ffffff;
}
.myButton:hover {
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}.myButton:active {
position:relative;
top:1px;
}

مثال پنجم : در قسمت STYLE کد CSS زیر را قرار دهید. ذخیره کنید و سپس اجرا کنید. می بینید که

.myButton {
background: #3D94F6;
background-image: linear-gradient(to bottom, #3D94F6, #1E62D0);
border-radius: 20px;
color: #FFFFFF;
font-family: Open Sans;
font-size: 40px;
font-weight: 100;
padding: 40px;
box-shadow: 1px 1px 20px 0px #000000;
text-shadow: 1px 1px 20px #000000;
border: solid #337FED 1px;
text-decoration: none;
display: inline-block;
cursor: pointer;
}
.myButton:hover {
background: #1E62D0;
background-image: linear-gradient(to bottom, #1E62D0, #3D94F6);
text-decoration: none;
}
دکمه زیبایی ساخته می شود.



نویسنده : هدایت عباسی

عضویت طلایی
ثبت نظر