هلدینگ وهام



با استفاده از CSS3 دکمه های متحرک فانتزی ایجاد کنید


Rate this sourcecode

ساهت و کدنویسی دکمه های متحرک فانتزی با استفاده از زبان css ، ایجاد دکمه های انیمیشنی برای دکمه فراخوان عمل ، باتن های متحرک … در این آموزش نحوه ایجاد دکمه های متحرک فانتزی با استفاده از CSS3 را به شما نشان خواهیم داد.

ما دکمه‌های گرد، دکمه‌های کوچک‌کننده، دکمه‌های فنری، دکمه‌های در حال گسترش، دکمه‌های زوم، دکمه‌های تکان دادن و غیره را ایجاد می‌کنیم که می‌توانید از هر دکمه‌ای در وب‌سایت خود به راحتی و بدون وابستگی خارجی استفاده کنید.

همچنین ممکن است سرفصل های متحرک CSS3 را دوست داشته باشید.

برای ایجاد دکمه های متحرک فانتزی فقط دو مرحله طول می کشد:

  1. یک فایل HTML بسازید و نشانه گذاری را تعریف کنید
  2. یک فایل CSS بسازید و یک استایل تعریف کنید

مرحله 1. یک فایل HTML بسازید و نشانه گذاری را تعریف کنید

یک فایل HTML می سازیم و با نام buttons.html ذخیره می کنیم

				
					<html>
<head>
<link href="buttons_style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="wrapper">

<div id="button_div">
 <input type="button" class="simple" value="Simple">
 <input type="button" class="zoom" value="Zoom">
 <input type="button" class="round" value="Round">
 <input type="button" class="border" value="Border">
 <input type="button" class="box" value="Box">
 <br>
 <input type="button" class="shadow" value="Shadow">
 <input type="button" class="vertical" value="Vertical">
 <input type="button" class="horizontal" value="Horizontal">
 <input type="button" class="shake" value="Shake">
 <br>
 <input type="button" class="shrink" value="Shrink">
 <input type="button" class="bounce" value="Bounce">
</div>

</div>
</body>
</html>
				
			

در این مرحله 11 دکمه برای نمایش 11 نوع مختلف از دکمه های متحرک ایجاد می کنیم و فایل ‘buttons_style.css’ خود را اضافه می کنیم که در مرحله بعد می خواهیم ایجاد کنیم.

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

مرحله 2. یک فایل CSS بسازید و یک استایل تعریف کنید

یک فایل CSS می سازیم و با نام buttons_style.css ذخیره می کنیم

				
					body
{
 margin:0 auto;
 padding:0px;
 text-align:center;
 width:100%;
 font-family: "Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
}
#wrapper
{
 margin:0 auto;
 padding:0px;
 text-align:center;
width:995px;	
}
#wrapper h1
{
 margin-top:50px;
 font-size:45px;
 color:#34495E;
}
#wrapper h1 p
{
font-size:18px;
}
#button_div input[type="button"]
{
 background-color:none;
 width:120px;
 height:50px;
 margin:20px;
 font-size:17px;
 color:white;
 border:none;
}
#button_div .simple
{
 background-color:green;
 border: 1px solid green;
 transition: all 0.35s ease;
 border-radius:5px;
}
#button_div .simple:hover
{
 border: 1px solid green;
 background-color:white;
 color:green;
}
#button_div .zoom
{
 background-color:#5DADE2;
 transition: all 0.35s ease;
 border-radius:5px;
}
#button_div .zoom:hover
{
 border: 1px solid #5DADE2;
 background-color:white;
 color:#5DADE2;
 transform: scale(1.2);
}
#button_div .round
{
 background-color:#922B21;
 transition: all 0.35s ease;
}
#button_div .round:hover
{
 border: 1px solid #922B21;
 background-color:white;
 color:#922B21;
 border-radius:15px;
}
#button_div .border
{
 background-color:#6C3483;
 transition: all 0.35s ease;
 border-radius:10px 0px 10px 0px;
}
#button_div .border:hover
{
 border: 1px solid #6C3483;
 background-color:white;
 color:#6C3483;
 border-radius:0px 10px 0px 10px;
}
#button_div .box
{
 background-color:#117A65;
 transition: all 0.35s ease;
 border-radius:15px;
}
#button_div .box:hover
{
 border: 1px solid #117A65;
 background-color:white;
 color:#117A65;
 border-radius:0px;
}
#button_div .shadow
{
 background-color:#B7950B;
 transition: all 0.35s ease;
 border-radius:5px;
}
#button_div .shadow:hover
{
 border: 1px solid #B7950B;
 background-color:white;
 color:#B7950B;
 box-shadow:0px 0px 25px 0px #B7950B;
}
#button_div .vertical
{
 background-color:#873600;
 transition: all 0.35s ease;
 border-radius:5px;
}
#button_div .vertical:hover
{
 border: 1px solid #873600;
 background-color:white;
 color:#873600;
 animation: vertical .50s linear alternate;
}
@keyframes vertical 
{
 20%{transform: translateY(0);}
 40% {transform: translateY(-10px);}
 60%{transform: translateY(0px);}
 80%{transform: translateY(15px);}
 100% {transform: translateY(0);} 
}
#button_div .horizontal
{
 background-color:#979A9A;
 transition: all 0.35s ease;
 border-radius:5px;
}
#button_div .horizontal:hover
{
 border: 1px solid #979A9A;
 background-color:white;
 color:#979A9A;
 animation: horizontal .50s linear alternate;
}
@keyframes horizontal 
{
 20%{transform: translateX(0);}
 40% {transform: translateX(-10px);}
 60%{transform: translateX(0px);}
 80%{transform: translateX(15px);}
 100% {transform: translateX(0);} 
}
#button_div .shake
{
 background-color:#212F3C;
 transition: all 0.35s ease;
 border-radius:5px;
}
#button_div .shake:hover
{
 border: 1px solid #212F3C;
 background-color:white;
 color:#212F3C;
 animation: shake 0.005s 100 linear alternate;
}
@keyframes shake 
{
 from{transform: rotate(2deg);}
 to{transform: rotate(-2deg);}
}
#button_div .shrink
{
 background-color:#58D68D;
 transition: all 0.35s ease;
 border-radius:5px;
}
#button_div .shrink:hover
{
 border: 1px solid #58D68D;
 background-color:white;
 color:#58D68D;
 transform: scale(0.9);
}
#button_div .bounce
{
 background-color:#9E0EC8;
 transition: all 0.35s ease;
 border-radius:5px;
}
#button_div .bounce:hover
{
 border: 1px solid #9E0EC8;
 background-color:white;
 color:#9E0EC8;
 animation: bounce 0.25s 2 linear alternate;
}
@keyframes bounce 
{
 0%{transform: rotate(0deg);}
 50%{transform: rotate(3deg);}
 100%{transform: rotate(-3deg);}
}
				
			

در این مرحله یک استایل برای 11 دکمه مختلف تعریف می کنیم. ما از برخی از ویژگی های CSS3 مانند تبدیل، انتقال، ترجمه، انیمیشن و فریم های کلیدی برای استایل دادن به این دکمه ها استفاده می کنیم.

همچنین ممکن است منوی ناوبری متحرک CSS را دوست داشته باشید.

این همه چیز است، این نحوه ایجاد دکمه های متحرک فانتزی با استفاده از CSS3 است. شما می توانید این کد را بر اساس نیاز خود بیشتر سفارشی کنید. و لطفاً نظرات خود را در مورد این آموزش بیان کنید.

دسته بندی پروژه :



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

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