آکامیت

طراحی انواع دکمه توسط سی اس اس ۳ (CSS3 Buttons )

SS مخفف کلمه Cascading Style Sheet می باشد که معنای فارسی آن برگه سبک آبشاری هست .
CSS زبانی است که می توانید به وسیله آن به تگ های HTMl جلوه بدهید و آنها را زیباتر کنید ، چینش آنها را تنظیم کنید و …
CSS3 آخرین نسخه از این زبان می باشد که حاوی تمام دستوراتی است که در نسخه CSS2.1 وجود داشته است و همچنین در این نسخه امکاناتی اضافه شده است که برخی از مشکلات طراحان را حل می کند .

در این پست قصد داریم طراحی انواع دکمه توسط سی اس اس ۳ (CSS3 Buttons ) رو برای شما عزیزان بزاریم . شما میتوانید با ترکیب چند خاصیت های زیر باهم دکمه های زیبایی رو خلق کنید .

دکمه پیشفرض و استایل دار

همان گونه که میبینید دکمه ی پیشفرض دارای ظاهری بد نسبت به دکمه ای که با سی اس اس استایل دهی شده است .

<html>
<head>
<style>
.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
</style>
</head>
<body>

<h2>CSS Buttons</h2>

<button>Default Button</button>
<a href="#" class="button">Link Button</a>
<button class="button">Button</button>
<input type="button" class="button" value="Input Button">

</body>
</html>

دکمه های رنگی

شما میتوانید با اضافه کردن خاصیت background-color به سی اس اس رنگ دکمه ها را تغییر بدید .

<!DOCTYPE html>
<html>
<head>
<style>
.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */ 
.button4 {background-color: #e7e7e7; color: black;} /* Gray */ 
.button5 {background-color: #555555;} /* Black */
</style>
</head>
<body>

<h2>Button Colors</h2>
<p>Change the background color of a button with the background-color property:</p>

<button class="button">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>

</body>
</html>

دکمه های سایز دار

شما میتوانید با افزدون خاصیت padding عرض و طول دکمه را به راحتی کنترل کنید .

<!DOCTYPE html>
<html>
<head>
<style>
.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}
</style>
</head>
<body>

<h2>Button Sizes</h2>
<p>Change the padding of a button with the padding property:</p>

<button class="button button1">10px 24px</button>
<button class="button button2">12px 28px</button>
<button class="button button3">14px 40px</button>
<button class="button button4">32px 16px</button>
<button class="button button5">16px</button>

</body>
</html>

دکمه های گرد

شما با اضافه کردن خاصیت border-radius به کد های سی اس اس میتونید گوشه دکمه های خودتون رو گرد کنید .

<!DOCTYPE html>
<html>
<head>
<style>
.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
</style>
</head>
<body>

<h2>Rounded Buttons</h2>
<p>Add rounded corners to a button with the border-radius property:</p>

<button class="button button1">2px</button>
<button class="button button2">4px</button>
<button class="button button3">8px</button>
<button class="button button4">12px</button>
<button class="button button5">50%</button>

</body>
</html>

دکمه های حاشیه دار

شما میتوانید با اضافه کردن خاصیت border به کد های سی اس اس خود ، حاشیه های رنگی را به دکمه های خود اضافه کنید .

<!DOCTYPE html>
<html>
<head>
<style>
.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.button1 {
    background-color: white; 
    color: black; 
    border: 2px solid #4CAF50;
}

.button2 {
    background-color: white; 
    color: black; 
    border: 2px solid #008CBA;
}

.button3 {
    background-color: white; 
    color: black; 
    border: 2px solid #f44336;
}

.button4 {
    background-color: white;
    color: black;
    border: 2px solid #e7e7e7;
}

.button5 {
    background-color: white;
    color: black;
    border: 2px solid #555555;
}
</style>
</head>
<body>

<h2>Colored Button Borders</h2>
<p>Use the border property to add a border to the button:</p>

<button class="button button1">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>

</body>
</html>

دکمه های سایه دار

شما با اضافه کردن خاصیت box-shadow به کد های سی اس اس خود میتونید دکمه های خود را سایه دار کنید .

<!DOCTYPE html>
<html>
<head>
<style>
.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.button1 {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
</style>
</head>
<body>

<h2>Shadow Buttons</h2>
<p>Use the box-shadow property to add shadows to the button:</p>

<button class="button button1">Shadow Button</button>
<button class="button button2">Shadow on Hover</button>

</body>
</html>

admin

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

اضافه کردن نظر

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

شما می توانید به راحتی با ما در تماس باشید ، ما نیز از پیدا کردن دوستان جدید بسیار خوشحال میشویم.


instagram aparat Google-plus Telegram_Messenger facebook