۲۸
دیدگاه
نظر
آموزش ساخت دکمه با HTML و CSS و جاوا اسکریپت
هرچند ممکن است تصور کنید که کاربرد دکمه‌ها در رابط کاربری بسیار ساده باشد، اما دکمه‌ها از المان‌های اصلی و مهم طراحی رابط کاربری هستند. به همین دلیل تصمیم گرفته‌ایم که در مقاله آموزش ساخت دکمه با HTML ، به سراغ طراحی آنها رفته و مواردی را که موجب ایجاد دکمه‌های زیبا می‌شوند و تجربه‌ی کاربر را بهبود می‌بخشند، پوشش دهیم. این کدها با CSS نوشته می‌شوند؛ اگر آشنایی کافی با CSS ندارید مقاله‌ی CSS چیست را حتما مطالعه کنید و برای آشنایی بیشتر با جاوا اسکریپت مقاله‌ی جاوا اسکریپت چیست را بخوانید.
دکمه‌ی هاوردار
کلاس‌هایی در CSS با نام pseudo-classes وجود دارند که برای تعریف حالت یک المان در شرایط خاص به کار می‌روند. هاور (hover) یکی از کلاسهای pseudo-classes است که برای انتخاب ظاهر یک المان، هنگامی که نشانگر موس یا هر وسیله‌ی دیگری روی آن قرار می‌گیرد، استفاده می‌شود. هاور می‌تواند برای لینک‌ها، تصاویر و ... تعریف شود که یکی از مهم‌ترین این المان‌ها دکمه است. باید توجه داشت که استفاده از هاور برای دستگاه‌های لمسی (که فاقد نشانگر هستند) دارای مشکلاتی است و توصیه نمی‌شود.
تقریبا اغلب طراحی‌های جذاب برای دکمه با کد زدن با استفاده از هاور انجام می‌شود. قبل از طراحی هاورهای جذاب و کاربردی دکمه، ابتدا خود دکمه را تعریف کرده و کدهای مشترک در طراحی هاور را مرور میکنیم. ابتدا در بخش Html یک دکمه در صفحه می‌گذاریم:
<html>
<body>
<div id="container">
<a href="https://7learn.com/" class="btn btn-hover">7learn</a>
</div>
</body>
</html>
همان‌طور که در بالا می‌بینید، دکمه‌ی ما سون‌لرن نام داشته و با کلیک روی آن، به صفحه‌ی اصلی سون‌لرن می‌رویم. همچنین دو کلاس به این دکمه اختصاص داده شده: btn و btn-hover . کلاس اول یا btn استایل عادی دکمه در حالتی که نشانگر روی آن قرار نگرفته را تعریف کرده و کلاس دوم یا btn-hover استایل دکمه را وقتی موس روی آن قرار می‌گیرد مشخص می‌کند و کدهای مربوط به هاور را در این کلاس باید اضافه کنیم. در صورت عدم تعریف کلاس btn-hover دکمه‌ی ما دیگر قابلیت تغییر ظاهر را از دست می‌دهد و همواره به شکل کلاس btn دیده می‌شود. برای تمرین می‌توانید btn-hover را حذف کرده و نتیجه را مشاهده کنید.
در بخش استایل، ابتدا ویژگی‌های مشترک صفحه را تعریف میکنیم:
<style>
* {
box-sizing: inherit;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: .6s;
transition-duration: .6s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
margin: 0;
padding: 0;
}
html,
body {
box-sizing: border-box;
height: 100%;
width: 100%;
}
body {
background: MediumSeaGreen;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
#container {
width: 500px;
margin: 50px auto 0;
text-align: center;
}
</style>گفتیم که استایل دکمه‌ی ما در حالت عادی با کلاس btn تعریف می‌شود:
<style>
.btn {
color: #fff;
cursor: pointer;
display: block;
font-size: 16px;
font-weight: 400;
line-height: 45px;
margin: 0 auto 2em;
max-width: 160px;
position: relative;
text-decoration: none;
text-transform: uppercase;
vertical-align: middle;
width: 100%;
text-align: center;
}
.btn:hover {
text-decoration: none;
}
</style>تنها بخشی که برای هاورهای مختلف تغییر می‌کند، تعریف کلاس btn-hover در استایل است که برای هر افکت متفاوت است. مثلا اگر بخواهیم هنگامی که نشانگر روی دکمه رفت، حاشیه‌ی دکمه روشن شده و مثل موج به بیرون پخش شود، باید کد زیر را برای کلاس تعریف کنیم:
.btn-hover {
border: 0 solid;
box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
outline: 1px solid;
outline-color: rgba(255, 255, 255, 0.5);
outline-offset: 0px;
text-shadow: none;
-webkit-transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}
.btn-hover:hover {
border: 1px solid;
box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);
outline-color: rgba(255, 255, 255, 0);
outline-offset: 15px;
text-shadow: 1px 1px 2px #427388;
} 
معرفی Hover.css
Hover.css یک منبع عالی و مجموعه‌ای از افکت‌های زیبا برای انواع هاورها است و با استفاده از آن می‌توان به راحتی سایت را زیباتر کرد. این مجموعه شامل افکت‌های زیر هست:
2D Transitions
- Background Transitions
- Icons
- Border Transitions
- Shadow and Glow Transitions
- Speech Bubbles
- Curls
روند کار با این مجموعه همانند قبل است. استایل صفحه و دکمه در حالت عادی را تعریف میکنیم و سپس به Hover.css رفته و فایل‌های موردنیاز را مطابق با راهنمای خود سایت، دانلود میکنیم. بعد از مشاهده‌ی مجموعه‌ی افکت‌ها و انتخاب افکت موردنظر، باید آن را به استایل اضافه کنیم. برای این‌کار می‌توان به دو طریق عمل کرد.
راه اول کپی کردن استایل در کلاس btn-hover مشابه مثال‌های قبلی است. در این روش فقط قسمت استایل هاور را در کدهای سورس دانلود شده از این سایت پیدا کرده و به‌جای btn-hover می‌گذاریم. برای مثال برای افکت شناورشدن به بالا داریم:
.btn-hover {
background: #e3403a;
border: 1px solid #da251f;
display: inline-block;
vertical-align: middle;
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
transition-duration: 0.3s;
transition-property: transform;
transition-timing-function: ease-out;
}
.btn-hover:hover,
.btn-hover:focus,
.btn-hover:active {
transform: translateY(-8px);
}توجه داشته باشید که کدهای استایل مربوط به هر هاور در فایل hover-min.css است و هر افکت با hvr- شروع می‌شود. این روش باعث کمترشدن حجم داده و سبک‌ترشدن سایت می‌شود.
روش دوم، پیوست کردن فایل استایل به طور کامل در پروژه است که نسبت به روش قبلی برای سایت سنگین‌تر است:
<head>
<link rel="stylesheet" type="text/css" href="hover-min.css">
</head>با این‌کار می‌توان از کلاسهای استایل تعریف شده برای هاور به‌طور مستقیم استفاده کرد. فقط این بار در بخش Html دکمه به‌جای btn-hover دقیقا باید نام کلاس تعریف شده در این مجموعه را بنویسیم. مانند:hvr-grow
دکمه‌ی درخشان
در این بخش از مقاله به آموزش ساخت دکمه درخشان با CSS می‌پردازیم.
یکی از ساده‌ترین و پرکاربردترین دکمه‌ها، دکمه‌ی درخشان است. در بخش Html ابتدا دکمه را تعریف میکنیم:
<div class="wrapper">
<a href="#" class="button">Shiney!</a>
</div>
سپس در CSS و با کمک هاور و تعریف حالت قبلی، کلاسهای افکت را کامل میکنیم:
body{
background: LightGray;
}
@-webkit-keyframes sheen {
0% {
-webkit-transform: skewY(-45deg) translateX(0);
transform: skewY(-45deg) translateX(0);
}
100% {
-webkit-transform: skewY(-45deg) translateX(12.5em);
transform: skewY(-45deg) translateX(12.5em);
}
}
@keyframes sheen {
0% {
-webkit-transform: skewY(-45deg) translateX(0);
transform: skewY(-45deg) translateX(0);
}
100% {
-webkit-transform: skewY(-45deg) translateX(12.5em);
transform: skewY(-45deg) translateX(12.5em);
}
}
.wrapper {
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.button {
padding: 0.75em 2em;
text-align: center;
text-decoration: none;
color: #2194E0;
border: 2px solid #2194E0;
font-size: 24px;
display: inline-block;
border-radius: 0.3em;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
position: relative;
overflow: hidden;
}
.button:before {
content: "";
background-color: rgba(255, 255, 255, 0.5);
height: 100%;
width: 3em;
display: block;
position: absolute;
top: 0;
left: -4.5em;
-webkit-transform: skewX(-45deg) translateX(0);
transform: skewX(-45deg) translateX(0);
-webkit-transition: none;
transition: none;
}
.button:hover {
background-color: #2194E0;
color: #fff;
border-bottom: 4px solid #1977b5;
}
.button:hover:before {
-webkit-transform: skewX(-45deg) translateX(13.5em);
transform: skewX(-45deg) translateX(13.5em);
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
دکمه‌ی کششی
در این بخش از مقاله به آموزش ساخت دکمه کششی با CSS می‌پردازیم.
حتما دکمه‌ای را دیده‌اید که هنگامی که نشانگر موس را روی آن می‌برید، کش می‌آید و scale می‌شود. برای نمونه یک دکمه‌ی ذخیره را مثال زدیم. ابتدا دکمه را در Html تعریف میکنیم:
<div class="container">
<div class="button">
<div class="icon">
<i class="fa fa-floppy-o"></i>
</div>
</div>
</div>سپس در بخش CSS با تعریف کلاسهای مرتبط با استایل و هاور، افکت کش آمدن را تعریف میکنیم. برای مشاهده‌ی افکت‌های بیشتر می‌توان به سایت Hover.css مراجعه کنید که در بخش قبلی درموردش توضیح دادیم.
$blue : #91CCC2;
body{
background-color:$blue;
}
.container{
width:250px;
height:100px;
margin: 20% auto;
color:white;
font-size:1rem;
font-family:Arial,Helvetica Neue,Helvetica,sans-serif;
}
p{
text-align:center;
}
.button{
font-size:1.5rem;
border:2px solid white;
border-radius:100px;
width:40px;
height:40px;
padding:5px;
margin: 10% auto;
transition: .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.icon{
position: relative;
top: 50%;
transform: translateY(-50%);
text-align:center;
}
//Hover
//-----------------------
.button:hover{
width:125px;
background-color: white;
box-shadow: 0px 5px 5px rgba(0,0,0,0.2);
color: $blue;
transition:.3s;
}
.button:active{
box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
transition: .05s
}
دکمه‌ی توضیحی
یکی دیگر از کاربردهای هاور، نمایش اطلاعات مخفی است. این کاربرد به‌طور معمول در طراحی سایت‌های فروشگاهی استفاده می‌شود و با استفاده از آن می‌توان کاربر را از سردرگمی نجات داد و پیام‌ها و راهنمایی‌های لازم، مانند توضیح مختصر یک محصول را خلاصه و ساده به‌صورت تصویری روی خود المان نمایش داد. با این‌کار می‌توان از کلاسهای استایل تعریف شده برای هاور به‌طور مستقیم استفاده کرد. در این بخش از مقاله به آموزش نحوه‌ی ساخت دکمه توضیحی در CSS می‌پردازیم. برای این‌کار ابتدا در Html راهنمایی‌ها را به‌صورت متنی در div دکمه قرار می‌دهیم:
<div class="center">
<div class="button">
<a class="first"> Keep hovering me </a>
<a class="slidein"> how are you today? </a>
<a class="slidein two"> I'm doing well </a>
<a class="slidein three"> thanks for asking </a>
<a class="slidein four"> its a good life... </a>
<a class="slidein five"> ...being a button </a>
<a class="slidein six"> the work is hard </a>
<a class="slidein seven"> but enjoyable </a>
<a class="slidein eight"> yep, its great </a>
<a class="slidein nine"> ... </a>
<a class="slidein ten"> save me </a>
</div>
</div>سپس در بخش CSS، کلاسهای مربوط به هر متن را تعریف کرده و آنها را در هاور می‌گذاریم:
@import "compass/css3";
body {
font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, 'Open Sans', sans-serif;
background: #efefef;
}
.center {
width: 350px;
position: absolute;
left: 50%;
margin-left: -175px;
top: 50%;
margin-top: -100px;
}
.slidein:nth-child( even ) {
background: lighten( #007eff, 10% ) !important;
}
.slidein:nth-child( odd ) {
background: #007eff !important;
}
.button {
cursor: pointer;
position: relative;
text-align: center;
margin: 46px 10px 0 0;
display: block;
width: 195px;
height: 50px;
text-decoration: none;
font-size: 0.7em;
font-weight: 600;
overflow: hidden;
margin: auto;
.ten {
font-size: 7px;
line-height: 52px;
}
&:hover {
.slidein {
left: 0%;
}
.two {
left: 0%;
transition-delay: 1.5s;
}
.three {
left: 0%;
transition-delay: 3s;
}
.four {
left: 0%;
transition-delay: 4.5s;
}
.five {
left: 0%;
transition-delay: 6s;
}
.six {
left: 0%;
transition-delay: 7.5s;
}
.seven {
left: 0%;
transition-delay: 9s;
}
.eight {
left: 0%;
transition-delay: 10.5s;
}
.nine {
left: 0%;
transition-delay: 13s;
}
.ten {
left: 0%;
transition-delay: 16s;
}
}
.slidein {
background: lighten( #007eff, 10% );
left: -100%;
z-index: 2;
}
a {
text-transform: uppercase;
transition: left 300ms;
letter-spacing: 1px;
background: #007eff;
position: absolute;
font-weight: bold;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #ffffff;
line-height: 50px;
}
}
.text {
width: 100%;
text-align: center;
text-transform: uppercase;
font-size: 11px;
font-weight: bold;
color: #a0a0a0;
display: block;
margin-top: 20px;
letter-spacing: 1px;
a {
text-decoration: none;
color: #007eff;
}
}
دکمه‌ی آیکون‌دار
یکی از جذاب‌ترین و ساده‌ترین دکمه‌های CSS، دکمه‌ی آیکون‌دار است.در این بخش از مقاله برای مثال چند دکمه تعریف کرده‌ایم. ابتدا دکمه‌ها را در بخش Html می‌گذاریم:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700' rel='stylesheet' type='text/css'><button class="button search">Search</button>
<br/><br/>
<button class="button arrow">Read more</button>
<br/><br/>
<button class="button email">me@email.com</button>
<br/><br/>
<button class="button phone">tel: 1234 567 890</button>
سپس در بخش CSS کلاسهای لازم را تعریف میکنیم:
@button-colour: #009ED8;
@button-text: #ffffff;
@regular-text: #333;
@button-tint: fadeout(#000, 90%);
@background: #303036;
body {
background: @background;
text-align: center;
text-rendering: auto;
font-size: 17px;
line-height: 1.6em;
height: 100vh;
overflow: hidden;
padding: 18%;
padding-top: 25vh;
}
* {
box-sizing: border-box;
}
.button {
display: inline-block;
font-family: "Montserrat", "Trebuchet MS", Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
position: relative;
padding: .8em 1.4em;
padding-right: 4.7em;
background: @button-colour;
border: none;
color: white;
transition: .2s;
&:before,
&:after {
position: absolute;
top: 0;
bottom: 0;
right: 0;
padding-top: inherit;
padding-bottom: inherit;
width: 2.8em;
content: "\00a0";
font-family: 'FontAwesome', sans-serif;
font-size: 1.2em;
text-align: center;
transition: .2s;
transform-origin: 50% 60%;
}
&:before {
background: @button-tint;
}
&:hover {
background: darken(@button-colour, 10%);
}
&:active,
&:focus {
background: darken(@button-colour, 30%);
outline: none;
}
}
.button {
min-width: 15em;
}
.arrow {
background: #FE5F55;
&:hover {
background: darken(#FE5F55, 10%);
}
&:active,
&:focus {
background: darken(#FE5F55, 30%);
}
&:after {
content: "\F054";
}
&:hover:after {
-webkit-animation: bounceright .3s alternate ease infinite;
animation: bounceright .3s alternate ease infinite;
}
}
.phone {
background: #139675;
&:hover {
background: darken(#139675, 10%);
}
&:active,
&:focus {
background: darken(#139675, 20%);
}
&:after {
content: "\F095";
}
&:hover:after {
-webkit-animation: wiggle .05s alternate ease infinite;
animation: wiggle .05s alternate ease infinite;
}
}
.email {
background: #C673B3;
&:hover {
background: darken(#C673B3, 10%);
}
&:active,
&:focus {
background: darken(#C673B3, 20%);
}
&:after {
content: "\F0E0";
}
&:hover:after {
-webkit-animation: none;
-webkit-transform: skew(-20deg);
animation: none;
transform: skew(-20deg);
text-indent: .1em;
}
}
.search {
&:after {
content:"\f002";
}
&:hover:after {
-webkit-animation: none;
-webkit-transform: scale(1.4);
animation: none;
transform: scale(1.4);
}
}
@-webkit-keyframes bounceright {
from { -webkit-transform: translateX(0); }
to { -webkit-transform: translateX(3px); }
}
@-webkit-keyframes wiggle {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(30deg); }
}
@keyframes bounceright {
from { transform: translateX(0); }
to { transform: translateX(3px); }
}
@keyframes wiggle {
from { transform: rotate(0deg); }
to { transform: rotate(30deg); }
}
دکمه‌ی شبکه‌های اجتماعی
در این بخش از مقاله‌ی آموزش ساخت دکمه با HTML به آموزش ساخت دکمه‌های زیبا شبکه‌های اجتماعی با CSS می‌پردازیم.
با استفاده از هاور می‌توان افکت‌های زیبایی برای دکمه‌ی شبکه‌های اجتماعی طراحی کرد. برای شروع آیکون شبکه‌های اجتماعی را اضافه کرده و چهار دکمه برای فیس‌بوک، توییتر، اینستاگرام و پینترست در صفحه قرار می‌دهیم:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="social-btns">
<a class="btn facebook" href="#"><i class="fa fa-facebook"></i></a>
<a class="btn twitter" href="#"><i class="fa fa-twitter"></i></a>
<a class="btn instagram" href="#"><i class="fa fa-instagram"></i></a>
<a class="btn pinterest" href="#"><i class="fa fa-pinterest"></i></a>
</div>در استایل سعی میکنیم ویژگی مشترک این دکمه‌ها را در یک کلاس برای قبل و بعد از ورود نشانگر به دکمه تعریف کنیم و تنها برای تعیین رنگ از کلاسهای جدا استفاده میکنیم:
.social-btns .btn,
.social-btns .btn:before,
.social-btns .btn .fa {
transition: all 0.35s;
transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-btns .btn:before {
top: 90%;
left: -110%;
}
.social-btns .btn .fa {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
.social-btns .btn.facebook:before {
background-color: #3B5998;
}
.social-btns .btn.facebook .fa {
color: #3B5998;
}
.social-btns .btn.twitter:before {
background-color: #33CCFF;
}
.social-btns .btn.twitter .fa {
color: #33CCFF;
}
.social-btns .btn.instagram:before {
background-color: #FE0883;
}
.social-btns .btn.instagram .fa {
color: #FE0883;
}
.social-btns .btn.pinterest:before {
background-color: #910101;
}
.social-btns .btn.pinterest .fa {
color: #910101;
}
.social-btns .btn:focus:before,
.social-btns .btn:hover:before {
top: -10%;
left: -10%;
}
.social-btns .btn:focus .fa,
.social-btns .btn:hover .fa {
color: #fff;
-webkit-transform: scale(1);
transform: scale(1);
}
.social-btns {
height: 90px;
margin: auto;
font-size: 0;
text-align: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.social-btns .btn {
display: inline-block;
background-color: #fff;
width: 90px;
height: 90px;
line-height: 90px;
margin: 0 10px;
text-align: center;
position: relative;
overflow: hidden;
border-radius: 28%;
box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.1);
opacity: 0.99;
}
.social-btns .btn:before {
content: "";
width: 120%;
height: 120%;
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.social-btns .btn .fa {
font-size: 38px;
vertical-align: middle;
}
دکمه‌ی تبلیغاتی
یکی از سوالات مهمی که هر طراح رابط کاربری باید هنگام طراحی به آن توجه کند، این است که کاربران چگونه می‌توانند یک دکمه را تشخیص دهند؟ پاسخ ساده است. نشانه‌های بصری به افراد کمک می‌کنند تا بفهمند باید روی یک المان کلیک کنند یا خیر. یکی از مهم‌ترین راه‌ها، طراحی ظاهری مناسب و استفاده از افکت‌های تصویری مناسب عنصر است. دکمه‌های تبلیغاتی عناصری هستند که معمولا دارای افکت‌های انیمیشنی فراوان برای جلب توجه بیننده هستند. در ادامه مقاله‌ی آموزش ساخت دکمه با HTML به آموزش ساخت دکمه‌های زیبا تبلیغاتی با CSS می‌پردازیم. در بخش Html داریم:
.main-content
.item.button-jittery(style="--bg-color: #f1c40f;")
button Click Me!
.name Subtlety
.item.button-pulse(style="--bg-color: #e67e22")
.button__wrapper
.pulsing
button Click Me!
.name Dubstep
.item.button-typewriter(style="--bg-color: #e74c3c")
.button__wrapper
button
p Click Me!
.name Typewriter
.item.button-pressure(style="--bg-color: #9b59b6")
button Click Me!
marquee(scrollamount="12")
span Your friends would do it.
span Your mum would be proud.
span Your partner would be so happy.
span Your cat would love you for it.
.name Social Pressure
.item.button-hand(style="--bg-color: #3498db")
button Click Me!
.hands
.name Handsy
.item.button-100(style="--bg-color:#2ecc71")
button Click Me!
- for (var i=1; i<4; i++)
.emoji
.name You're ?
.item.button-parrot(style="--bg-color: #2c3e50")
button Click Me!
- for (var i=1; i<7; i++)
.parrot
.name Encouragement
.item.button-rainbow(style="--bg-color: #ecf0f1")
button Click Me!
.rainbow
.name Rainbow
.item.footer(style="--bg-color: #7f8c8d")
.explanation
| Part of the
a(href="https://codepen.io/collection/XJNKLz/" target="_blank") CSS Animations collection here
| .
footer
a(href="https://twitter.com/meowlivia_" target="_blank")
i.icon-social-twitter.icons
a(href="https://github.com/oliviale" target="_blank")
i.icon-social-github.icons
a(href="https://dribbble.com/oliviale" target="_blank")
i.icon-social-dribbble.icons
و در بخش CSS می‌نویسیم:
body {
color: #fff;
font-family: "Rubik", sans-serif;
}
.item.footer {
flex-wrap: wrap;
padding: 5rem;
text-align: center;
font-size: 18px;
line-height: 1.7;
grid-column: span 1;
@media screen and (min-width:823px) and (max-width:1223px) {
grid-column: span 2;
}
a {
text-decoration: none;
color: #fff;
padding: 3px 0;
border-bottom: 1px dashed;
&:hover {
border-bottom: 1px solid;
}
}
}
footer {
margin-top: 1.5rem;
a {
text-decoration: none;
display: inline-block;
width: 45px;
height: 45px;
border-radius: 50%;
background: transparent;
border: 1px dashed #fff;
color: #fff;
margin: 5px;
&:hover {
background: rgba(255, 255, 255, 0.1);
}
.icons {
margin-top: 8px;
display: inline-block;
font-size: 20px;
&:before {
position: relative;
}
}
}
}
* {
box-sizing: border-box;
&:before,
&:after {
content: "";
position: absolute;
}
}
.main-content {
display: grid;
width: 100%;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
.item {
display: grid;
grid-template-rows: 1fr min-content;
align-items: center;
justify-content: center;
height: 50vh;
flex-wrap: wrap;
background: var(--bg-color);
&:not(.footer) {
padding-top: 1rem;
}
}
}
button {
background: transparent;
color: #fff;
border: 3px solid #fff;
border-radius: 50px;
padding: 0.8rem 2rem;
font: 24px "Margarine", sans-serif;
outline: none;
cursor: pointer;
position: relative;
transition: 0.2s ease-in-out;
letter-spacing: 2px;
}
.name {
width: 100%;
text-align: center;
padding: 0 0 3rem;
font: 500 14px 'Rubik', sans-serif;
letter-spacing: .5px;
text-transform: uppercase;
text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}
.button__wrapper {
display: inline-block;
position: relative;
width: 200px;
height: 65px;
display: flex;
justify-content: center;
align-items: center;
}
.button-pulse {
button {
background: var(--bg-color);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.button__wrapper:hover .pulsing {
&:before {
animation: pulsing 0.2s linear infinite;
}
&:after {
animation: pulsing1 0.2s linear infinite;
}
}
}
.pulsing {
width: 99%;
height: 99%;
border-radius: 50px;
z-index: 1;
position: relative;
&:before,
&:after {
width: 100%;
height: 100%;
border: inherit;
top: 0;
left: 0;
z-index: 0;
background: #fff;
border-radius: inherit;
animation: pulsing 2.5s linear infinite;
}
&:after {
animation: pulsing1 2.5s linear infinite;
}
}
@keyframes pulsing {
0% {
opacity: 1;
transform: scaleY(1) scaleX(1);
}
20% {
opacity: 0.5;
}
70% {
opacity: 0.2;
transform: scaleY(1.8) scaleX(1.4);
}
80% {
opacity: 0;
transform: scaleY(1.8) scaleX(1.4);
}
90% {
opacity: 0;
transform: scaleY(1) scaleX(1);
}
}
@keyframes pulsing1 {
0% {
opacity: 1;
transform: scaleY(1) scaleX(1);
}
20% {
opacity: 0.5;
}
70% {
opacity: 0.2;
transform: scaleY(1.3) scaleX(1.15);
}
80% {
opacity: 0;
transform: scaleY(1.3) scaleX(1.15);
}
90% {
opacity: 0;
transform: scaleY(1) scaleX(1);
}
}
.button-typewriter {
button {
width: 100%;
height: 100%;
}
p {
animation: typing 4s steps(12) infinite;
display: inline-block;
overflow: hidden;
white-space: nowrap;
}
.button__wrapper:hover p {
animation: blink 0.3s infinite;
}
}
@keyframes typing {
0% {
width: 0;
}
50% {
width: 100%;
}
55%,
65%,
75% {
opacity: 1;
}
60%,
70% {
opacity: 0;
}
80% {
width: 100%;
}
100% {
width: 0;
}
}
.button-parrot {
.parrot {
position: absolute;
width: 60px;
text-align: center;
animation: blink 0.8s infinite;
color: transparent;
&:before {
content: "Click Me!";
}
&:nth-child(1) {
top: -30px;
left: -40px;
font: 12px/1 "Margarine", sans-serif;
transform: rotate(-20deg);
animation-duration: 0.5s;
}
&:nth-child(2) {
font: 12px/1 "Margarine", sans-serif;
right: -40px;
top: -20px;
transform: rotate(15deg);
animation-duration: 0.3s;
}
&:nth-child(3) {
font: 16px/1 "Margarine", sans-serif;
top: -60px;
left: 15px;
transform: rotate(10deg);
animation-duration: 1s;
}
&:nth-child(4) {
font: 18px/1 "Margarine", sans-serif;
top: -70px;
left: 95px;
transform: rotate(2deg);
animation-duration: 0.7s;
}
&:nth-child(5) {
font: 14px/1 "Margarine", sans-serif;
top: 80px;
left: 105px;
transform: rotate(-20deg);
animation-duration: 0.8s;
}
&:nth-child(6) {
font: 12px/1 "Margarine", sans-serif;
top: 80px;
left: 5px;
transform: rotate(10deg);
animation-duration: 1.2s;
}
}
button:hover .parrot:before {
content: "Do it!";
width: 70px;
}
}
@keyframes blink {
25%,
75% {
color: transparent;
}
40%,
60% {
color: #fff;
}
}
.button-hand button {
&:before {
content: "?";
font-size: 60px;
transform: scaleX(-1);
right: 0px;
top: -68px;
animation: up-down 1s infinite;
}
.hands {
&:before,
&:after {
content: "?";
font-size: 40px;
opacity: 0;
transition: 0.4s ease-in-out;
}
&:before {
transform: rotate(-60deg);
left: -45px;
top: -10px;
}
&:after {
transform: rotate(170deg);
right: 30px;
top: 50px;
}
}
&:hover .hands {
&:before {
opacity: 1;
left: -35px;
}
&:after {
opacity: 1;
top: 40px;
}
}
}
@keyframes up-down {
50% {
margin-top: -20px;
}
}
.button-100 {
.emoji {
position: absolute;
top: -45px;
left: 0;
width: 35px;
height: 35px;
overflow: hidden;
&:before {
content: "?";
display: inline-block;
animation: give-score 2.5s infinite;
position: relative;
top: 0;
}
&:nth-child(2) {
left: 0;
right: 0;
margin: auto;
&:before {
animation: give-score 2.5s infinite 0.2s;
}
}
&:nth-child(3) {
left: auto;
right: 0;
&:before {
animation: give-score 2.5s infinite 0.4s;
}
}
}
button:hover .emoji:before {
content: "?";
transition: 0.5s ease;
}
}
@keyframes give-score {
30%,
80% {
top: 0;
}
40%,
70% {
top: 50px;
}
}
.button-pressure {
marquee {
position: absolute;
width: 90%;
top: 125%;
left: 5%;
font: 18px/1 "Margarine", sans-serif;
span {
display: inline-block;
height: 20px;
&:not(:last-child) {
margin-right: 130px;
}
}
}
button:before {
content: "OMG YAS";
transition: 0.5s ease;
left: 0;
right: 0;
margin: auto;
top: -15px;
font-size: 12px;
opacity: 0;
}
button:hover:before {
animation: omg-yes 1s;
}
}
.button-rainbow button {
animation: rainbow 3s infinite, heartbeat 0.6s infinite;
background: #c0392b;
.rainbow {
width: 120px;
height: 120px;
border-radius: 50%;
position: absolute;
left: 0;
right: 0;
margin: auto;
top: -40px;
transition: 0.5s ease;
opacity: 0;
transform: rotate(0);
&:before {
content: "?";
left: 0;
}
}
&:hover .rainbow {
opacity: 1;
animation: rotate-nonstop 0.2s infinite;
}
+ .name {
color: #444;
}
}
@keyframes rotate-nonstop {
50% {
transform: rotate(92deg);
}
}
@keyframes omg-yes {
50% {
opacity: 1;
}
100% {
top: -50px;
}
}
@keyframes rainbow {
0% {
background: #1abc9c;
}
10% {
background: #2ecc71;
}
20% {
background: #3498db;
}
30% {
background: #9b59b6;
}
40% {
background: #e74c3c;
}
50% {
background: #e67e22;
}
60% {
background: #f1c40f;
}
70% {
background: #2c3e50;
}
80% {
background: #9b59b6;
}
}
.button-jittery button {
animation: jittery 4s infinite;
&:hover {
animation: heartbeat 0.2s infinite;
}
}
@keyframes jittery {
5%,
50% {
transform: scale(1);
}
10% {
transform: scale(0.9);
}
15% {
transform: scale(1.15);
}
20% {
transform: scale(1.15) rotate(-5deg);
}
25% {
transform: scale(1.15) rotate(5deg);
}
30% {
transform: scale(1.15) rotate(-3deg);
}
35% {
transform: scale(1.15) rotate(2deg);
}
40% {
transform: scale(1.15) rotate(0);
}
}
@keyframes heartbeat {
50% {
transform: scale(1.1);
}
}
دکمه‌ی سه‌بعدی
بسیاری از طراحان مایلند تا دکمه‌های سه‌بعدی طراحی کنند. طراحی این دکمه‌ها از لحاظ ظاهری با استفاده از ویژگی‌های تعریف شده برای حاشیه (border) انجام شده و فقط برای قسمت فرورفتن از هاور استفاده می‌شود. در این بخش از مقاله‌ی آموزش ساخت دکمه با HTML به آموزش ساخت دکمه‌های زیبا سه بعدی با CSS می‌پردازیم. برای شروع در بخش Html دکمه را تعریف میکنیم:
<button class="learn-more">Learn More</button>سپس در بخش CSS داریم:
@import url('https://fonts.googleapis.com/css?family=Rubik:700&display=swap');
$bg: #fff;
$text: #382b22;
$light-pink: #fff0f0;
$pink: #ffe9e9;
$dark-pink: #f9c4d2;
$pink-border: #b18597;
$pink-shadow: #ffe3e2;
* {
box-sizing: border-box;
&::before, &::after {
box-sizing: border-box;
}
}
body {
font-family: 'Rubik', sans-serif;
font-size: 1rem;
line-height: 1.5;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
min-height: 100vh;
background: $bg;
}
button {
position: relative;
display: inline-block;
cursor: pointer;
outline: none;
border: 0;
vertical-align: middle;
text-decoration: none;
font-size: inherit;
font-family: inherit;
&.learn-more {
font-weight: 600;
color: $text;
text-transform: uppercase;
padding: 1.25em 2em;
background: $light-pink;
border: 2px solid $pink-border;
border-radius: 0.75em;
transform-style: preserve-3d;
transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1);
&::before {
position: absolute;
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: $dark-pink;
border-radius: inherit;
box-shadow: 0 0 0 2px $pink-border, 0 0.625em 0 0 $pink-shadow;
transform: translate3d(0, 0.75em, -1em);
transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
}
&:hover {
background: $pink;
transform: translate(0, 0.25em);
&::before {
box-shadow: 0 0 0 2px $pink-border, 0 0.5em 0 0 $pink-shadow;
transform: translate3d(0, 0.5em, -1em);
}
}
&:active {
background: $pink;
transform: translate(0em, 0.75em);
&::before {
box-shadow: 0 0 0 2px $pink-border, 0 0 $pink-shadow;
transform: translate3d(0, 0, -1em);
}
}
}
}
دکمه‌ی گرادیانت‌دار
از وقتی که گرادیانت‌ها در طراحی به‌کار می‌رود، روز به روز شاهد ایجاد راه‌های جدید و خلاقانه برای کار با آنها هستیم. از طیف‌های رنگی می‌توان در حاشیه، زمینه‌ی دکمه و یا ایجاد افکت استفاده کرد. در این بخش از مقاله‌ی آموزش ساخت دکمه با HTML به آموزش ساخت دکمه‌های زیبا گرادیانت‌دار با CSS می‌پردازیم. کد زیر شامل چند نمونه از دکمه‌های طراحی شده با گرادیانت است. کد Html:
<div class="container text-center">
<div class="row mt-5">
<div class="col-sm-12">
<h5 class="mb-4 font-weight-light">No Animation</h5>
<button class="gb gb-bordered" id="gb1">Button 1</button>
<button class="gb gb-bordered gb-rounded" id="gb2">Button 2</button>
<button class="gb" id="gb3">Button 3</button>
</div>
</div>
<div class="row mt-5">
<div class="col-sm-12">
<h5 class="mb-4 font-weight-light">Background Fill Animation</h5>
<button class="gb gb-bordered hover-fill" id="gb4">Button 4</button>
<button class="gb gb-bordered hover-fill gb-rounded" id="gb5">Button 5</button>
<button class="gb gb-bordered hover-fill reverse" id="gb6">Button 6</button>
</div>
</div>
<div class="row mt-5">
<div class="col-sm-12">
<h5 class="mb-4 font-weight-light">Background Slide Animation</h5>
<button class="gb gb-bordered hover-slide" id="gb7">Button 7</button>
<button class="gb gb-bordered hover-slide gb-rounded" id="gb8">Button 8</button>
<button class="gb gb-bordered hover-slide" id="gb9">Button 9</button>
</div>
</div>
<div class="row mt-5">
<div class="col-sm-12">
<h5 class="mb-4 font-weight-light">Background Slide and Fill</h5>
<button class="gb gb-bordered hover-slide hover-fill" id="gb10">Button 10</button>
<button class="gb gb-bordered hover-slide hover-fill gb-rounded" id="gb11">Button 11</button>
<button class="gb gb-bordered hover-slide hover-fill reverse" id="gb12">Button 12</button>
</div>
</div>
<div class="row mt-5 text-center">
<div class="col-sm-12">
<div class="font-weight-light">Made by <a href="https://www.thecssking.com/" target="_blank">Jordan</a> with <a href="https://www.gradientmagic.com/" target="_blank">Gradient Magic</a></div>
</div>
</div>
<div>کد CSS:
body {
background: linear-gradient(90deg, rgba(165, 165, 165, 0.03) 0%, rgba(165, 165, 165, 0.03) 8%,rgba(235, 235, 235, 0.03) 8%, rgba(235, 235, 235, 0.03) 9%,rgba(7, 7, 7, 0.03) 9%, rgba(7, 7, 7, 0.03) 14%,rgba(212, 212, 212, 0.03) 14%, rgba(212, 212, 212, 0.03) 17%,rgba(219, 219, 219, 0.03) 17%, rgba(219, 219, 219, 0.03) 95%,rgba(86, 86, 86, 0.03) 95%, rgba(86, 86, 86, 0.03) 100%),linear-gradient(67.5deg, rgba(80, 80, 80, 0.03) 0%, rgba(80, 80, 80, 0.03) 11%,rgba(138, 138, 138, 0.03) 11%, rgba(138, 138, 138, 0.03) 17%,rgba(122, 122, 122, 0.03) 17%, rgba(122, 122, 122, 0.03) 24%,rgba(166, 166, 166, 0.03) 24%, rgba(166, 166, 166, 0.03) 27%,rgba(245, 245, 245, 0.03) 27%, rgba(245, 245, 245, 0.03) 89%,rgba(88, 88, 88, 0.03) 89%, rgba(88, 88, 88, 0.03) 100%),linear-gradient(67.5deg, rgba(244, 244, 244, 0.03) 0%, rgba(244, 244, 244, 0.03) 4%,rgba(16, 16, 16, 0.03) 4%, rgba(16, 16, 16, 0.03) 10%,rgba(157, 157, 157, 0.03) 10%, rgba(157, 157, 157, 0.03) 20%,rgba(212, 212, 212, 0.03) 20%, rgba(212, 212, 212, 0.03) 83%,rgba(5, 5, 5, 0.03) 83%, rgba(5, 5, 5, 0.03) 84%,rgba(237, 237, 237, 0.03) 84%, rgba(237, 237, 237, 0.03) 100%),linear-gradient(90deg, #FFF,#FFF);
height: 94vh;
}
.fancy{
font-family: 'Marcellus SC', serif;
}
.gb {
padding: 8px 20px;
margin-right: 25px;
cursor: pointer;
font-size: 18px;
border-radius: 4px;
}
$border-width: 4px;
// Help from 2nd answer in https://stackoverflow.com/questions/5706963/possible-to-use-border-radius-together-with-a-border-image-which-has-a-gradient
.gb-bordered {
padding: 6px 20px;
position: relative;
border: $border-width solid transparent;
background-clip: padding-box;
transition: .5s all;
&:after {
transition: .5s all;
position: absolute;
top: -$border-width;
left: -$border-width;
right: -$border-width;
bottom: -$border-width;
content: '';
z-index: -1;
border-radius: 4px;
}
}
.gb-rounded {
border-radius: 50px;
&.gb-bordered:after {
border-radius: 50px;
}
}
.hover-fill {
transition: .6s all;
&:hover {
background-color: transparent;
color: white;
}
&.reverse {
background-color: transparent;
color: white;
&:hover {
background-color: white;
color: #333;
}
}
}
.hover-slide {
transition: .6s all;
&:after {
background-size: 200% 100%;
background-position: 0% 0;
}
&:hover {
&:after {
background-position: 100% 0;
}
}
}
#gb1 {
&:after {
background-image: linear-gradient(45deg, rgb(107, 41, 176) 0%, rgb(107, 41, 176) 26%,rgb(201, 24, 187) 26%, rgb(201, 24, 187) 45%,rgb(224, 20, 189) 45%, rgb(224, 20, 189) 53%,rgb(83, 45, 173) 53%, rgb(83, 45, 173) 59%,rgb(154, 33, 181) 59%, rgb(154, 33, 181) 62%,rgb(130, 37, 178) 62%, rgb(130, 37, 178) 66%,rgb(177, 28, 184) 66%, rgb(177, 28, 184) 77%,rgb(248, 16, 192) 77%, rgb(248, 16, 192) 100%);
}
}
#gb2 {
&:after {
background-image: linear-gradient(45deg, rgb(11, 45, 126) 0%, rgb(11, 45, 126) 44%,rgb(21, 87, 153) 44%, rgb(21, 87, 153) 45%,rgb(30, 129, 181) 45%, rgb(30, 129, 181) 61%,rgb(40, 170, 208) 61%, rgb(40, 170, 208) 67%,rgb(49, 212, 235) 67%, rgb(49, 212, 235) 100%);
}
}
#gb3 {
color: white;
border: none;
background: linear-gradient(45deg, rgba(8, 211, 172, 0.45) 0%, rgba(8, 211, 172, 0.45) 12.5%,rgba(62, 29, 50, 0.45) 12.5%, rgba(62, 29, 50, 0.45) 25%,rgba(54, 55, 67, 0.45) 25%, rgba(54, 55, 67, 0.45) 37.5%,rgba(47, 81, 85, 0.45) 37.5%, rgba(47, 81, 85, 0.45) 50%,rgba(23, 159, 137, 0.45) 50%, rgba(23, 159, 137, 0.45) 62.5%,rgba(16, 185, 155, 0.45) 62.5%, rgba(16, 185, 155, 0.45) 75%,rgba(31, 133, 120, 0.45) 75%, rgba(31, 133, 120, 0.45) 87.5%,rgba(39, 107, 102, 0.45) 87.5%, rgba(39, 107, 102, 0.45) 100%),linear-gradient(135deg, rgb(87, 116, 221),rgb(35, 4, 229));
}
#gb4 {
&:after {
background: linear-gradient(45deg, rgb(239, 7, 129) 0%, rgb(239, 7, 129) 6%,rgb(208, 10, 112) 6%, rgb(208, 10, 112) 25%,rgb(177, 13, 96) 25%, rgb(177, 13, 96) 40%,rgb(147, 16, 79) 40%, rgb(147, 16, 79) 45%,rgb(116, 19, 62) 45%, rgb(116, 19, 62) 53%,rgb(85, 22, 46) 53%, rgb(85, 22, 46) 66%,rgb(54, 25, 29) 66%, rgb(54, 25, 29) 100%);
}
}
#gb5 {
&:after {
background: linear-gradient(0, rgba(151, 49, 241, 0.46) 0%, rgba(151, 49, 241, 0.46) 6%,rgba(163, 71, 217, 0.46) 6%, rgba(163, 71, 217, 0.46) 33%,rgba(175, 94, 193, 0.46) 33%, rgba(175, 94, 193, 0.46) 47%,rgba(187, 116, 169, 0.46) 47%, rgba(187, 116, 169, 0.46) 65%,rgba(200, 139, 146, 0.46) 65%, rgba(200, 139, 146, 0.46) 77%,rgba(212, 161, 122, 0.46) 77%, rgba(212, 161, 122, 0.46) 87%,rgba(224, 184, 98, 0.46) 87%, rgba(224, 184, 98, 0.46) 97%,rgba(236, 206, 74, 0.46) 97%, rgba(236, 206, 74, 0.46) 100%),linear-gradient(90deg, rgb(233, 14, 27) 0%, rgb(233, 14, 27) 15%,rgb(235, 41, 27) 15%, rgb(235, 41, 27) 39%,rgb(238, 67, 26) 39%, rgb(238, 67, 26) 42%,rgb(240, 94, 26) 42%, rgb(240, 94, 26) 52%,rgb(243, 120, 25) 52%, rgb(243, 120, 25) 61%,rgb(245, 147, 25) 61%, rgb(245, 147, 25) 76%,rgb(248, 173, 24) 76%, rgb(248, 173, 24) 88%,rgb(250, 200, 24) 88%, rgb(250, 200, 24) 100%);
}
}
#gb6 {
&:after {
background: linear-gradient(164deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.08) 50%,rgba(222, 222, 222, 0.08) 50%, rgba(222, 222, 222, 0.08) 100%),linear-gradient(73deg, rgba(182, 182, 182, 0.02) 0%, rgba(182, 182, 182, 0.02) 50%,rgba(216, 216, 216, 0.02) 50%, rgba(216, 216, 216, 0.02) 100%),linear-gradient(215deg, rgba(27, 27, 27, 0.09) 0%, rgba(27, 27, 27, 0.09) 50%,rgba(243, 243, 243, 0.09) 50%, rgba(243, 243, 243, 0.09) 100%),linear-gradient(236deg, rgba(242, 242, 242, 0.05) 0%, rgba(242, 242, 242, 0.05) 50%,rgba(16, 16, 16, 0.05) 50%, rgba(16, 16, 16, 0.05) 100%),linear-gradient(256deg, rgba(170, 170, 170, 0.07) 0%, rgba(170, 170, 170, 0.07) 50%,rgba(209, 209, 209, 0.07) 50%, rgba(209, 209, 209, 0.07) 100%),linear-gradient(126deg, rgba(204, 204, 204, 0.1) 0%, rgba(204, 204, 204, 0.1) 50%,rgba(26, 26, 26, 0.1) 50%, rgba(26, 26, 26, 0.1) 100%),linear-gradient(61deg, rgba(250, 250, 250, 0.01) 0%, rgba(250, 250, 250, 0.01) 50%,rgba(13, 13, 13, 0.01) 50%, rgba(13, 13, 13, 0.01) 100%),linear-gradient(56deg, rgba(210, 210, 210, 0.05) 0%, rgba(210, 210, 210, 0.05) 50%,rgba(79, 79, 79, 0.05) 50%, rgba(79, 79, 79, 0.05) 100%),linear-gradient(226deg, rgba(62, 62, 62, 0.08) 0%, rgba(62, 62, 62, 0.08) 50%,rgba(73, 73, 73, 0.08) 50%, rgba(73, 73, 73, 0.08) 100%),linear-gradient(90deg, rgb(236, 2, 158),rgb(161, 2, 79));
}
}
#gb7, #gb10 {
&:after {
background-image: linear-gradient(135deg, rgb(246, 137, 24) 0%, rgb(246, 137, 24) 31%,rgb(174, 62, 159) 31%, rgb(174, 62, 159) 42%,rgb(210, 100, 92) 42%, rgb(210, 100, 92) 49%,rgb(138, 25, 227) 49%, rgb(138, 25, 227) 100%);
}
}
#gb8 {
&:after {
background-image: linear-gradient(90deg, hsla(357,85%,70%, 1) 0%, hsla(357,85%,70%, 1) 14.3%,hsla(48.42,85%,70%, 1) 14.3%, hsla(48.42,85%,70%, 1) 28.6%,hsla(99.85,85%,70%, 1) 28.6%, hsla(99.85,85%,70%, 1) 42.9%,hsla(151.28,85%,70%, 1) 42.9%, hsla(151.28,85%,70%, 1) 57.2%,hsla(202.71,85%,70%, 1) 57.2%, hsla(202.71,85%,70%, 1) 71.5%,hsla(254.14,85%,70%, 1) 71.5%, hsla(254.14,85%,70%, 1) 85.8%,hsla(305.57,85%,70%, 1) 85.8%, hsla(305.57,85%,70%, 1) 100.1%);
}
}
#gb9 {
background-color: transparent;
color: white;
&:after {
background-image: linear-gradient(135deg, rgb(13, 4, 178) 0%, rgb(13, 4, 178) 12.5%,rgb(17, 25, 182) 12.5%, rgb(17, 25, 182) 25%,rgb(20, 46, 185) 25%, rgb(20, 46, 185) 37.5%,rgb(24, 67, 189) 37.5%, rgb(24, 67, 189) 50%,rgb(28, 87, 192) 50%, rgb(28, 87, 192) 62.5%,rgb(32, 108, 196) 62.5%, rgb(32, 108, 196) 75%,rgb(35, 129, 199) 75%, rgb(35, 129, 199) 87.5%,rgb(39, 150, 203) 87.5%, rgb(39, 150, 203) 100%);
}
&:hover {
color: white;
}
}
#gb11 {
&:after {
background-image: linear-gradient(135deg, rgb(138, 229, 83) 0%, rgb(138, 229, 83) 22%,rgb(110, 203, 71) 22%, rgb(110, 203, 71) 28%,rgb(83, 176, 59) 28%, rgb(83, 176, 59) 72%,rgb(55, 150, 47) 72%, rgb(55, 150, 47) 100%);
}
}
#gb12 {
&:after {
background-image: linear-gradient(45deg, rgba(49, 74, 89, 0.45) 0%, rgba(49, 74, 89, 0.45) 12.5%,rgba(122, 86, 72, 0.45) 12.5%, rgba(122, 86, 72, 0.45) 25%,rgba(170, 94, 60, 0.45) 25%, rgba(170, 94, 60, 0.45) 37.5%,rgba(219, 102, 49, 0.45) 37.5%, rgba(219, 102, 49, 0.45) 50%,rgba(146, 90, 66, 0.45) 50%, rgba(146, 90, 66, 0.45) 62.5%,rgba(98, 82, 78, 0.45) 62.5%, rgba(98, 82, 78, 0.45) 75%,rgba(195, 98, 55, 0.45) 75%, rgba(195, 98, 55, 0.45) 87.5%,rgba(73, 78, 83, 0.45) 87.5%, rgba(73, 78, 83, 0.45) 100%),linear-gradient(135deg, rgb(117, 6, 152),rgb(110, 34, 251));
}
}
دکمه‌ی حذف
تا اینجا تمامی دکمه‌هایی که معرفی کردیم، با تعریف استایل مناسب قابل طراحی بودند؛ اما برای دکمه‌های حذف، ارسال، تایید، دانلود و آپلود، نیاز به کد جاوا اسکریپت داریم تا بعد از انجام این عملیات‌ها در سمت سرور، افکت مربوط به دکمه اجرا شود.در این بخش از مقاله‌ی آموزش ساخت دکمه با HTML به آموزش ساخت دکمه حذف با CSS می‌پردازیم. برای طراحی دکمه‌ی حذف ابتدا در Html آیکون‌های قبل و بعد را در دکمه قرار می‌دهیم:
<a class="button" href="#" role="button">
<span>remove</span>
<div class="icon">
<i class="fa fa-remove"></i>
<i class="fa fa-check"></i>
</div>
</a>سپس در کد CSS می‌نویسیم:
/* Reset */
@import url(//codepen.io/chrisdothtml/pen/ojLzJK.css);
// Variables
$color: #c0392b;
$color-dark: #a53125;
$speed: "0.25s";
$transition: all #{$speed} cubic-bezier(0.310, -0.105, 0.430, 1.400);
/* Main Styles */
.button {
display: block;
background-color: $color;
width: 300px;
height: 100px;
line-height: 100px;
margin: auto;
color: #fff;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
cursor: pointer;
overflow: hidden;
border-radius: 5px;
box-shadow: 0 0 20px 0 rgba(0,0,0,.3);
transition: $transition;
span,
.icon {
display: block;
height: 100%;
text-align: center;
position: absolute;
top: 0;
}
span {
width: 72%;
line-height: inherit;
font-size: 22px;
text-transform: uppercase;
left: 0;
transition: $transition;
&:after {
content: '';
background-color: $color-dark;
width: 2px;
height: 70%;
position: absolute;
top: 15%;
right: -1px;
}
}
.icon {
width: 28%;
right: 0;
transition: $transition;
.fa {
font-size: 30px;
vertical-align: middle;
transition: $transition, height #{$speed} ease;
}
.fa-remove {
height: 36px;
}
.fa-check {
display: none;
}
}
&.success,
&:hover {
span {
left: -72%;
opacity: 0;
}
.icon {
width: 100%;
.fa {
font-size: 45px;
}
}
}
&.success {
background-color: #27ae60;
.icon {
.fa-remove {
display: none;
}
.fa-check {
display: inline-block;
}
}
}
&:hover {
opacity: .9;
.icon .fa-remove {
height: 46px;
}
}
&:active {
opacity: 1;
}
}کد جاوا اسکریپت را اضافه میکنیم تا بعد از انجام عملیات حذف المان، دکمه را از لحاظ ظاهری تغییر داده و آن را سبز کند:
removeSuccess = ->
$('.button').removeClass 'success'
$(document).ready ->
$('.button').click ->
$(@).addClass 'success'
setTimeout removeSuccess, 3000
دکمه‌ی ارسال
در این بخش از مقاله‌ی آموزش ساخت دکمه با HTML به آموزش ساخت دکمه‌های زیبا ارسال با CSS می‌پردازیم.
می‌خواهیم دکمه‌ی ارسالی طراحی کنیم تا بعد از کلیک روی آن، دایره‌ای به‌عنوان لودینگ دورش بچرخد و بعد از اتمام ارسال، دکمه تیک بخورد. (البته توجه داشته باشید که یک المان ریست هم برای اجرای دوباره طراحی کرده‌ایم.)
کد Html:
<button class="button">
<span>Submit</span>
<svg viewBox="0 0 15 13">
<polyline points="2 6.5 6 10.5 13 2.5"></polyline>
</svg>
</button>
<a href="" class="restart">
<svg viewBox="0 0 16 16" fill="currentColor">
<path d="M4.5,4.5c1.9-1.9,5.1-1.9,7,0c0.7,0.7,1.2,1.7,1.4,2.7l2-0.3C14.7,5.4,14,4.1,13,3.1c-2.7-2.7-7.1-2.7-9.9,0 L0.9,0.9L0.2,7.3l6.4-0.7L4.5,4.5z"></path>
<path d="M15.8,8.7L9.4,9.4l2.1,2.1c-1.9,1.9-5.1,1.9-7,0c-0.7-0.7-1.2-1.7-1.4-2.7l-2,0.3 C1.3,10.6,2,11.9,3,12.9c1.4,1.4,3.1,2,4.9,2c1.8,0,3.6-0.7,4.9-2l2.2,2.2L15.8,8.7z"></path>
</svg>
Restart
</a>
کد CSS:
.button-hold {
--color: #F6F8FF;
--background: #2B3044;
--icon: var(--color);
--progress-border: #646B8C;
--progress-active: #fff;
--progress-success: #5C86FF;
--tick-stroke: var(--progress-active);
--shadow: #{rgba(#00093D, .2)};
font-size: 16px;
font-weight: 500;
line-height: 19px;
min-width: 112px;
padding: 12px 20px 12px 12px;
border: 0;
border-radius: 24px;
outline: none;
user-select: none;
cursor: pointer;
-webkit-backface-visibility: hidden;
-webkit-appearance: none;
transition: transform .3s, box-shadow .3s;
box-shadow: 0 var(--shadow-y, 4px) var(--shadow-blur, 12px) var(--shadow);
transform: scale(var(--scale, 1)) translateZ(0);
color: var(--color);
background: var(--background);
& > div {
margin-right: 4px;
border-radius: 50%;
display: inline-block;
vertical-align: top;
position: relative;
background: var(--progress-border);
&:before {
content: '';
width: 16px;
height: 16px;
left: 2px;
top: 2px;
z-index: 1;
position: absolute;
background: var(--background);
border-radius: inherit;
transform: scale(var(--background-scale, 1));
transition: transform .32s ease;
}
svg {
display: block;
&.icon,
&.tick {
position: absolute;
}
&.icon {
width: 8px;
height: 8px;
left: 6px;
top: 6px;
fill: var(--icon);
z-index: 1;
transition: opacity .2s, transform .2s;
opacity: var(--icon-opacity, 1);
transform: translateY(var(--icon-y, 0)) scale(var(--icon-scale, 1));
}
&.progress,
&.tick {
fill: none;
}
&.progress {
width: 20px;
height: 20px;
transform: rotate(-90deg) scale(var(--progress-scale, 1));
transition: transform .5s ease;
circle {
stroke-dashoffset: 1;
stroke-dasharray: var(--progress-array, 0) 52;
stroke-width: 16;
stroke: var(--progress-active);
transition: stroke-dasharray var(--duration) linear;
}
}
&.tick {
width: 20px;
height: 20px;
left: 0;
top: 0;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke: var(--tick-stroke);
transition: stroke .3s ease .7s;
polyline {
stroke-dasharray: 18 18 18;
stroke-dashoffset: var(--tick-offset, 18);
transition: stroke-dashoffset .4s ease .7s;
}
}
}
}
&:focus,
&:hover {
&:not(.process) {
--shadow-y: 8px;
--shadow-blur: 16px;
}
}
&:active {
&:not(.success) {
--scale: .96;
--shadow-y: 4px;
--shadow-blur: 8px;
}
}
&.process,
&.success {
--progress-array: 52;
--icon-y: -4px;
--icon-scale: .6;
--icon-opacity: 0;
}
&.success {
--progress-border: none;
--progress-scale: .11;
--tick-stroke: var(--progress-success);
--background-scale: 0;
--tick-offset: 36;
& > div {
svg {
&.progress {
animation: tick .3s linear forwards .4s;
}
}
}
}
}
@keyframes tick {
100% {
transform: rotate(-90deg) translate(0, -5px) scale(var(--progress-scale));
}
}
html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: inherit;
&:before,
&:after {
box-sizing: inherit;
}
}
// Center & dribbble
body {
min-height: 100vh;
display: flex;
font-family: 'Roboto', Arial;
justify-content: center;
align-items: center;
background: #ECEFFC;
.dribbble {
position: fixed;
display: block;
right: 20px;
bottom: 20px;
img {
display: block;
height: 28px;
}
}
.twitter {
position: fixed;
display: block;
right: 64px;
bottom: 14px;
svg {
width: 32px;
height: 32px;
fill: #1da1f2;
}
}
}کد جاوا اسکریپت:
// Hold button with mouse / select with tab and hold spacebar
let duration = 1600,
success = button => {
//Success function
button.classList.add('success');
};
document.querySelectorAll('.button-hold').forEach(button => {
button.style.setProperty('--duration', duration + 'ms');
['mousedown', 'touchstart', 'keypress'].forEach(e => {
button.addEventListener(e, ev => {
if(e != 'keypress' || (e == 'keypress' && ev.which == 32 && !button.classList.contains('process'))) {
button.classList.add('process');
button.timeout = setTimeout(success, duration, button);
}
});
});
['mouseup', 'mouseout', 'touchend', 'keyup'].forEach(e => {
button.addEventListener(e, ev => {
if(e != 'keyup' || (e == 'keyup' && ev.which == 32)) {
button.classList.remove('process');
clearTimeout(button.timeout);
}
}, false);
});
});
دکمه‌ی دانلود
در این بخش از مقاله‌ی آموزش ساخت دکمه با HTML به آموزش ساخت دکمه‌های زیبا دانلود با CSS می‌پردازیم.
می‌خواهیم یک دکمه‌ی دانلود را به‌گونه‌ای طراحی کنیم تا بعد از کلیک روی آن، نواری در پایین دکمه به‌عنوان لودینگ پر شود و بعد از اتمام دانلود، دکمه بالا و پایین بپرد.
کد Html:
a.btn(href='#')
span.circle
svg(width='20' height='26' viewbox='0 0 20 26')
path(d='M1.5 16.5L10 24.5L18.5 16.5')
path(d='M10 1.5V24')
span.progressکد CSS:
$primary: #ff9b8b
$secondary: #fdd7d2
body
min-height: 100vh
display: flex
justify-content: center
align-items: center
background: #4e295b
*
box-sizing: border-box
.btn
position: relative
display: inline-block
width: 48px
height: 48px
border-radius: 24px
svg
fill: none
width: 20px
height: 26px
margin: 11px 0 0 14px
transform: translate3d(0,0,0)
path
stroke: $secondary
stroke-width: 3
stroke-linecap: round
stroke-linejoin: round
transition: stroke .3s ease
.circle
position: absolute
display: block
top: 0
left: 0
height: 48px
width: 48px
border-radius: 24px
border: 3px solid $secondary
transition: border .3s ease
.progress
position: absolute
display: block
bottom: -10px
left: 0
height: 3px
width: 48px
border-radius: 3px
background: rgba($secondary,.2)
opacity: 0
pointer-events: none
overflow: hidden
&:after
content: ''
display: block
width: 100%
height: 3px
border-radius: 2px
background: $primary
transform-origin: left
transform: scaleX(0)
transition: transform 2s linear
&.active
opacity: 1
&::after
transform: scaleX(1)
&:hover
.circle
border-color: $primary
svg
path
stroke: $primary
&:active
svg
transform: translateY(2px)
&.pending
.circle
border-color: $primary
animation: animC .6s ease-out
animation-delay: 2.35s
svg
animation: animS .6s ease-in
animation-delay: 2.15s
path
stroke: $primary
@keyframes animS
5%
transform: scale(.9)
50%
transform: translateY(12px)
80%
transform: translateY(-4px)
@keyframes animC
50%
transform: translateY(6px)
80%
transform: translateY(-4px)کد جاوا اسکریپت:
$('.btn').click ->
$('.btn').addClass 'pending'
$('.progress').addClass 'active'
setTimeout (->
$('.progress').removeClass 'active'
), 2300
setTimeout (->
$('.btn').removeClass 'pending'
), 3600
دکمه‌ی آپلود
در این بخش از مقاله‌ی آموزش ساخت دکمه با HTML به آموزش ساخت دکمه‌های زیبا آپلود با CSS می‌پردازیم. کد Html:
<div class="container">
<a href="" class="button">
<ul>
<li>Upload</li>
<li>Uploading</li>
<li>Uploaded</li>
</ul>
<div>
<svg viewBox="0 0 24 24"></svg>
</div>
</a>
<a href="" class="button dark-single">
<div>
<svg viewBox="0 0 24 24"></svg>
</div>
</a>
<div></div>
<a href="" class="button white-single">
<div>
<svg viewBox="0 0 24 24"></svg>
</div>
</a>
<a href="" class="button dark">
<ul>
<li>Upload</li>
<li>Uploading</li>
<li>Uploaded</li>
</ul>
<div>
<svg viewBox="0 0 24 24"></svg>
</div>
</a>
</div>
کد CSS:
.button {
&.dark-single {
--background: none;
--rectangle: #242836;
--success: #4BC793;
}
&.white-single {
--background: none;
--rectangle: #F5F9FF;
--arrow: #275efe;
--success: #275efe;
--shadow: rgba(10, 22, 50, .1);
}
&.dark {
--background: #242836;
--rectangle: #1C212E;
--arrow: #F5F9FF;
--text: #F5F9FF;
--success: #2F3545;
}
}
.button {
--background: #275efe;
--rectangle: #184fee;
--success: #{mix(white, #184fee, 20%)};
--text: #fff;
--arrow: #fff;
--checkmark: #fff;
--shadow: rgba(10, 22, 50, .24);
display: flex;
overflow: hidden;
text-decoration: none;
-webkit-mask-image: -webkit-radial-gradient(white, black);
background: var(--background);
border-radius: 30px;
box-shadow: 0 2px 8px -1px var(--shadow);
transition: transform .2s ease, box-shadow .2s ease;
&:active {
transform: scale(.95);
box-shadow: 0 1px 4px -1px var(--shadow);
}
ul {
margin: 0;
padding: 16px 32px 16px 44px;
list-style: none;
text-align: center;
position: relative;
backface-visibility: hidden;
font-size: 16px;
font-weight: 500;
line-height: 28px;
color: var(--text);
li {
&:not(:first-child) {
top: 16px;
left: 4px;
right: 0;
position: absolute;
}
&:nth-child(2) {
top: 76px;
}
&:nth-child(3) {
top: 136px;
}
}
}
& > div {
overflow: hidden;
-webkit-mask-image: -webkit-radial-gradient(white, black);
position: relative;
width: 60px;
height: 60px;
border-radius: 30px;
background: var(--rectangle);
&:before,
&:after {
content: '';
display: block;
position: absolute;
}
&:before {
border-radius: 1px;
width: 2px;
top: 50%;
left: 50%;
height: 17px;
margin: -8px 0 0 -1px;
background: var(--arrow);
}
&:after {
width: 60px;
height: 60px;
transform-origin: 50% 100%;
border-radius: 80% 80% 0 0;
background: var(--success);
top: 0;
left: 0;
transform: scaleY(0);
}
svg {
display: block;
position: absolute;
width: 20px;
height: 20px;
left: 50%;
top: 50%;
margin: -12px 0 0 -10px;
fill: none;
z-index: 1;
stroke-width: 2px;
stroke: var(--arrow);
stroke-linecap: round;
stroke-linejoin: round;
}
}
&.loading {
ul {
animation: text calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
}
& > div {
&:before {
animation: line calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
}
&:after {
animation: background calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
}
svg {
animation: svg calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
}
}
}
}
@keyframes text {
10%,
85% {
transform: translateY(-100%);
}
95%,
100% {
transform: translateY(-200%);
}
}
@keyframes line {
5%,
10% {
transform: translateY(30px);
}
40% {
transform: translateY(20px);
}
65% {
transform: translateY(0);
}
75%,
100% {
transform: translateY(-30px);
}
}
@keyframes svg {
0%,
20% {
stroke-dasharray: 0;
stroke-dashoffset: 0;
margin: -12px 0 0 -10px;
}
21%,
89% {
stroke-dasharray: 26px;
stroke-dashoffset: 26px;
stroke-width: 3px;
margin: -10px 0 0 -10px;
stroke: var(--checkmark);
}
100% {
stroke-dasharray: 26px;
stroke-dashoffset: 0;
margin: -10px 0 0 -10px;
stroke: var(--checkmark);
}
12% {
opacity: 1;
}
20%,
89% {
opacity: 0;
}
90%,
100% {
opacity: 1;
}
}
@keyframes background {
10% {
transform: scaleY(0);
}
40% {
transform: scaleY(.15);
}
65% {
transform: scaleY(.5);
border-radius: 50% 50% 0 0;
}
75% {
border-radius: 50% 50% 0 0;
}
90%,
100% {
border-radius: 0;
}
75%,
100% {
transform: scaleY(1);
}
}
html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: inherit;
&:before,
&:after {
box-sizing: inherit;
}
}
// Center & dribbble
body {
min-height: 100vh;
display: flex;
font-family: 'Roboto', Arial;
justify-content: center;
align-items: center;
flex-direction: column;
background: #E4ECFA;
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
& > div {
flex-basis: 100%;
width: 0;
}
.button {
margin: 16px;
}
}
.dribbble {
position: fixed;
display: block;
right: 20px;
bottom: 20px;
img {
display: block;
height: 28px;
}
}
.twitter {
position: fixed;
display: block;
right: 64px;
bottom: 14px;
svg {
width: 32px;
height: 32px;
fill: #1da1f2;
}
}
}کد جاوا اسکریپت:
const $ = (s, o = document) => o.querySelector(s);
const $$ = (s, o = document) => o.querySelectorAll(s);
let duration = 3000;
$$('.button').forEach(button => {
let svg = $('svg', button),
svgPath = new Proxy({
y: null,
smoothing: null
}, {
set(target, key, value) {
target[key] = value;
if(target.y !== null && target.smoothing !== null) {
svg.innerHTML = getPath(target.y, target.smoothing, null);
}
return true;
},
get(target, key) {
return target[key];
}
});
button.style.setProperty('--duration', duration);
svgPath.y = 4;
svgPath.smoothing = 0;
button.addEventListener('click', e => {
if(!button.classList.contains('loading')) {
button.classList.add('loading');
gsap.to(svgPath, {
smoothing: .3,
duration: duration * .065 / 1000
});
gsap.to(svgPath, {
y: 12,
ease: Elastic.easeOut.config(1.12, .4),
duration: duration * .265 / 1000,
delay: duration * .065 / 1000
});
setTimeout(() => {
svg.innerHTML = getPath(0, 0, [
[3, 14],
[8, 19],
[21, 6]
]);
}, (duration / 2));
}
e.preventDefault();
});
});
function getPoint(point, i, a, smoothing) {
let cp = (current, previous, next, reverse) => {
let p = previous || current,
n = next || current,
o = {
length: Math.sqrt(Math.pow(n[0] - p[0], 2) + Math.pow(n[1] - p[1], 2)),
angle: Math.atan2(n[1] - p[1], n[0] - p[0])
},
angle = o.angle + (reverse ? Math.PI : 0),
length = o.length * smoothing;
return [current[0] + Math.cos(angle) * length, current[1] + Math.sin(angle) * length];
},
cps = cp(a[i - 1], a[i - 2], point, false),
cpe = cp(point, a[i - 1], a[i + 1], true);
return `C ${cps[0]},${cps[1]} ${cpe[0]},${cpe[1]} ${point[0]},${point[1]}`;
}
function getPath(update, smoothing, pointsNew) {
let points = pointsNew ? pointsNew : [
[5, 12],
[12, update],
[19, 12]
],
d = points.reduce((acc, point, i, a) => i === 0 ? `M ${point[0]},${point[1]}` : `${acc} ${getPoint(point, i, a, smoothing)}`, '');
return `<path d="${d}" />`;
}
دکمه‌ی تایید
در بخش پایانی مقاله‌ی آموزش ساخت دکمه با HTML به آموزش ساخت دکمه‌های زیبا تایید با CSS می‌پردازیم. در بسیاری از عملیات‌ها نیاز هست تا کاربر به میزان مشخصی دکمه را نگه دارد یا به اصطلاح hold کند تا عملیات انجام شود. در اینجا می‌توان دکمه را به‌گونه‌ای طراحی کرد تا میزان زمان باقی‌مانده برای نگه داشتن دکمه، با یک نوار لودینگ در خود دکمه مشخص شود و بعد از انجام عملیات، تیک بخورد.
کد Html:
<button class="button-hold">
<div>
<svg class="icon" viewBox="0 0 16 16">
<polygon points="1.3,6.7 2.7,8.1 7,3.8 7,16 9,16 9,3.8 13.3,8.1 14.7,6.7 8,0"></polygon>
</svg>
<svg class="progress" viewBox="0 0 32 32">
<circle r="8" cx="16" cy="16" />
</svg>
<svg class="tick" viewBox="0 0 24 24">
<polyline points="18,7 11,16 6,12" />
</svg>
</div>
Publish
</button>
کد CSS:
.button-hold {
--color: #F6F8FF;
--background: #2B3044;
--icon: var(--color);
--progress-border: #646B8C;
--progress-active: #fff;
--progress-success: #5C86FF;
--tick-stroke: var(--progress-active);
--shadow: #{rgba(#00093D, .2)};
font-size: 16px;
font-weight: 500;
line-height: 19px;
min-width: 112px;
padding: 12px 20px 12px 12px;
border: 0;
border-radius: 24px;
outline: none;
user-select: none;
cursor: pointer;
-webkit-backface-visibility: hidden;
-webkit-appearance: none;
transition: transform .3s, box-shadow .3s;
box-shadow: 0 var(--shadow-y, 4px) var(--shadow-blur, 12px) var(--shadow);
transform: scale(var(--scale, 1)) translateZ(0);
color: var(--color);
background: var(--background);
& > div {
margin-right: 4px;
border-radius: 50%;
display: inline-block;
vertical-align: top;
position: relative;
background: var(--progress-border);
&:before {
content: '';
width: 16px;
height: 16px;
left: 2px;
top: 2px;
z-index: 1;
position: absolute;
background: var(--background);
border-radius: inherit;
transform: scale(var(--background-scale, 1));
transition: transform .32s ease;
}
svg {
display: block;
&.icon,
&.tick {
position: absolute;
}
&.icon {
width: 8px;
height: 8px;
left: 6px;
top: 6px;
fill: var(--icon);
z-index: 1;
transition: opacity .2s, transform .2s;
opacity: var(--icon-opacity, 1);
transform: translateY(var(--icon-y, 0)) scale(var(--icon-scale, 1));
}
&.progress,
&.tick {
fill: none;
}
&.progress {
width: 20px;
height: 20px;
transform: rotate(-90deg) scale(var(--progress-scale, 1));
transition: transform .5s ease;
circle {
stroke-dashoffset: 1;
stroke-dasharray: var(--progress-array, 0) 52;
stroke-width: 16;
stroke: var(--progress-active);
transition: stroke-dasharray var(--duration) linear;
}
}
&.tick {
width: 20px;
height: 20px;
left: 0;
top: 0;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke: var(--tick-stroke);
transition: stroke .3s ease .7s;
polyline {
stroke-dasharray: 18 18 18;
stroke-dashoffset: var(--tick-offset, 18);
transition: stroke-dashoffset .4s ease .7s;
}
}
}
}
&:focus,
&:hover {
&:not(.process) {
--shadow-y: 8px;
--shadow-blur: 16px;
}
}
&:active {
&:not(.success) {
--scale: .96;
--shadow-y: 4px;
--shadow-blur: 8px;
}
}
&.process,
&.success {
--progress-array: 52;
--icon-y: -4px;
--icon-scale: .6;
--icon-opacity: 0;
}
&.success {
--progress-border: none;
--progress-scale: .11;
--tick-stroke: var(--progress-success);
--background-scale: 0;
--tick-offset: 36;
& > div {
svg {
&.progress {
animation: tick .3s linear forwards .4s;
}
}
}
}
}
@keyframes tick {
100% {
transform: rotate(-90deg) translate(0, -5px) scale(var(--progress-scale));
}
}
html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: inherit;
&:before,
&:after {
box-sizing: inherit;
}
}
// Center & dribbble
body {
min-height: 100vh;
display: flex;
font-family: 'Roboto', Arial;
justify-content: center;
align-items: center;
background: #ECEFFC;
.dribbble {
position: fixed;
display: block;
right: 20px;
bottom: 20px;
img {
display: block;
height: 28px;
}
}
.twitter {
position: fixed;
display: block;
right: 64px;
bottom: 14px;
svg {
width: 32px;
height: 32px;
fill: #1da1f2;
}
}
}کد جاوا اسکریپت:
// Hold button with mouse / select with tab and hold spacebar
let duration = 1600,
success = button => {
//Success function
button.classList.add('success');
};
document.querySelectorAll('.button-hold').forEach(button => {
button.style.setProperty('--duration', duration + 'ms');
['mousedown', 'touchstart', 'keypress'].forEach(e => {
button.addEventListener(e, ev => {
if(e != 'keypress' || (e == 'keypress' && ev.which == 32 && !button.classList.contains('process'))) {
button.classList.add('process');
button.timeout = setTimeout(success, duration, button);
}
});
});
['mouseup', 'mouseout', 'touchend', 'keyup'].forEach(e => {
button.addEventListener(e, ev => {
if(e != 'keyup' || (e == 'keyup' && ev.which == 32)) {
button.classList.remove('process');
clearTimeout(button.timeout);
}
}, false);
});
});
جمع بندی:
دکمه‌ها یکی از مهم‌ترین اجزای طراحی وب و از عناصر حیاتی در وب و برنامه‌های کاربردی هستند. آنها به کاربران کمک می‌کنند تا بهتر با رابط کاربری ارتباط برقرار کنند. بنابراین مهم است که دکمه‌ها را با توجه به جزییاتی مانند ظاهر، اندازه، افکت‌های مناسب و قابلیت دسترسی در نظر گرفت. بسته به سبک و هدف سایت، طراحی‌های زیادی از این که یک دکمه چگونه به نظر می‌رسد وجود دارد. در این مقاله سعی کردیم تا چند نوع طراحی متداول برای دکمه‌ها را بررسی کنیم تا در نهایت قادر شوید با الهام‌گیری از این طراحی‌ها، دید مناسبی برای زیبایی و جذابیت سایت یا برنامه‌ی خود پیدا کنید.
اگر به یادگیری بیشتر در زمینه HTML , CSS و طراحی وب علاقه مند هستی با شرکت در دوره آموزش طراحی وب ، در کمتر از یکسال به یک طراح وب همه فن حریف تبدیل می‌شوی که آماده‌ی استخدام ، دریافت پروژه و کسب درآمد هستی.
۲۸ دیدگاه
mehdi-group
۲۹ آبان ۱۴۰۲، ۱۵:۱۵
۲۲ شهریور ۱۴۰۲، ۰۸:۲۴
نازنین کریمی مقدم
۲۲ شهریور ۱۴۰۲، ۰۹:۴۸
۲۱ مرداد ۱۴۰۲، ۲۰:۲۱
۱۸ آذر ۱۴۰۱، ۱۱:۵۲
Mahnaz Nouri
۲۸ تیر ۱۴۰۱، ۰۹:۵۶
نازنین کریمی مقدم
۲۸ تیر ۱۴۰۱، ۱۱:۲۱
رضا
۰۴ آبان ۱۴۰۰، ۰۸:۲۳
نازنین کریمی مقدم
۰۴ آبان ۱۴۰۰، ۰۹:۳۹
جعفری
۰۵ تیر ۱۴۰۰، ۱۶:۵۲
محمد امیر
۲۶ فروردین ۱۴۰۰، ۲۱:۴۷
اریا
۱۳ اسفند ۱۳۹۹، ۱۷:۱۲
نازنین کریمی مقدم
۱۷ اسفند ۱۳۹۹، ۰۶:۵۸
محمد مهدی
۰۱ اسفند ۱۳۹۹، ۱۸:۲۳
نازنین کریمی مقدم
۰۲ اسفند ۱۳۹۹، ۱۴:۳۰
آیین
۲۷ بهمن ۱۳۹۹، ۰۶:۵۴
آیین
۱۶ دی ۱۳۹۹، ۰۹:۳۳
نازنین کریمی مقدم
۱۶ دی ۱۳۹۹، ۰۹:۵۵
محمد
۲۲ مهر ۱۳۹۹، ۱۳:۱۷
نازنین کریمی مقدم
۲۲ مهر ۱۳۹۹، ۱۴:۳۵
رامین فهیمی
۳۰ شهریور ۱۳۹۹، ۰۵:۴۷
نازنین کریمی مقدم
۳۰ شهریور ۱۳۹۹، ۰۹:۰۸
aryannasiri
۲۱ شهریور ۱۳۹۹، ۲۲:۰۶
نازنین کریمی مقدم
۲۲ شهریور ۱۳۹۹، ۰۸:۰۳
Fateme
۰۷ خرداد ۱۳۹۹، ۱۳:۳۹
نازنین کریمی مقدم
۰۸ خرداد ۱۳۹۹، ۱۳:۴۳
رحمیی
۰۷ خرداد ۱۳۹۹، ۱۲:۴۲
نازنین کریمی مقدم
۰۸ خرداد ۱۳۹۹، ۱۳:۴۴