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

هدایت عباسی آموزش CSS

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

در این فیلم و آموزش ویدئویی ساخت دکمه زیبا با css با ذکر مثال خواهید آموخت.

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

مشاهده یا دانلود فیلم بالا

در این بخش ازاموزش css به سراغ ساخت دکمه زیبا با css می رویم.با استفاده از css می توان دکمه های زیبایی را ایجاد کرد.

در تاپ سایت 98 می توانید آموزش های مختلف css را ببینید و استفاده نمایید.

در قسمت پایین چندین مثال در مورد ساخت دکمه زیبا با css مشاهده خواهید کرد.

ساخت دکمه زیبا با css مثال اول :

در قسمت پایین مثال اول ساخت دکمه زیبا با css را مشاهده می کنید.

کافی است این کد را در یک فایل html ذخیره و اجرا نمایید.

این مثال شامل دو قسمت میباشد که قسمت اول کد html و قسمت دوم کد css می باشد.

کدهای css در قسمت styls قابل مشاهده است.

<!DOCTYPE html>
<html>
<head>
<style>
.classname {
box-shadow:inset 0 1px 0 0 #ffffff;
background-color:#ededed;
border-top-left-radius:6px;
border-top-right-radius:6px;
border-bottom-right-radius:6px;
border-bottom-left-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-size:15px;
font-weight:bold;
height:50px;
line-height:50px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ffffff;
padding: 0 10px;
}
.classname:hover {
background-color:#dfdfdf;
}.classname:active {
position: relative;
top: 1px;
}
</style>
</head>
<body>

<a href="https://topsite98.com/" class="classname">TopSite98.com</a>
</body>
</html>

مثال دوم ساخت دکمه با css :

در مثال دوم ساخت دکمه با css یک دکمه زیبا ایجاد کرده ایم . این کد را می توانید در سایت ها و پروژه های خود استفاده نمایید.

کدهای css را در تگ style قرار داده ایم.

تگ a با کلاس btn1 در بخش body می بینید. کلاس btn1 دارای دو حالت میباشد که حالت اول برای تگ a میباشد و کد دوم برای هنگامی است که کاربر هاور می کند یعنی با موس روی لینک قرار می گیرد.

<!DOCTYPE html>
<html>
<head>
<style>
.btn1 {
background: #3D94F6;
background-image: linear-gradient(to bottom, #3D94F6, #1E62D0);
border-radius: 5px;
color: #FFFFFF;
font-size: 20px;
font-weight: 500;
padding: 20px;
box-shadow: 1px 1px 4px 0 #000000;
text-shadow: 1px 1px 20px #000000;
border: solid #337FED 1px;
text-decoration: none;
display: inline-block;
cursor: pointer;
}
.btn1:hover {
background: #1E62D0;
background-image: linear-gradient(to bottom, #1E62D0, #3D94F6);
text-decoration: none;
}
</style>
</head>
<body>

<a href="https://topsite98.com/" class="btn1">TopSite98.com</a>

</body>
</html>

مثال سوم ساخت دکمه :

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

کد را در یک فایل با پسوند html ذخیره و اجرا نمایید. دقت کنید حتما پسوند فایل html باشد وگرنه اجرا نمی شود کدهای پایین تست شده می باشد.

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

<!DOCTYPE html>
<html>
<head>
<style>
.btn1 {
background: #3D94F6;
background-image: linear-gradient(to bottom, #3D94F6, #1E62D0);
border-radius: 5px;
color: #FFFFFF;
font-size: 15px;
font-weight: 100;
padding: 20px;
box-shadow: inset 0 0 16px 0 #000000;
text-shadow: 0 0 5px #000000;
border: solid #337FED 1px;
text-decoration: none;
display: inline-block;
cursor: pointer;
}
.btn1:hover {
background: #1E62D0;
background-image: linear-gradient(to bottom, #1E62D0, #3D94F6);
text-decoration: none;
}
</style>
</head>
<body>

<a href="https://topsite98.com/" class="btn1">TopSite98.com</a>

</body>
</html>

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

در این بخش از آموزش به سراغ ساخت دکمه با html, css می رویم.

بیاییم کدها را کمی توضیح دهیم. برای ساخت یک دکمه ابتدا یک لینک یا تگ a را در بخش body قرار داده ایم . نام کلاس را btn1گذاشته ایم.

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

در تگ style کدهای css را قرار داده ایم. ابتدا برای تگ a یا لینک ویژگی هایی قرار داده ایم مثل سایه زدن باکس ، سایه زدن متن ، کادر ، تغییر سایز متن ، گردی گوشه های دکمه ، تغییر رنگ متن و غیره. با این کد دکمه ساخته میشود .

حال در قسمت btn1:hover برای هاور کدنویسی می کنیم.

<!DOCTYPE html>
<html>
<head>
<style>
.btn1 {
border-radius: 18px;
color: #FFFFFF;
font-size: 20px;
font-weight: 300;
padding: 20px;
background-color: #3D94F6;
box-shadow: 0 0 0 2px #000000;
text-shadow: 0 0 5px #000000;
border: outset #337FED 6px;
text-decoration: none;
display: inline-block;
cursor: pointer;
}

.btn1:hover {
background: #1E62D0;
background-image: linear-gradient(to bottom, #1E62D0, #3D94F6);
text-decoration: none;
}

</style>
</head>
<body>

<a href="https://topsite98.com/" class="btn1">TopSite98.com</a>

</body>
</html>

پیشنهاد می کنیم بقیه آموزش های css را ببینید.

اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید