دانلود فايل , شرکت در انجمن و گفتگو با ساير اعضا در سايت ثبت نام کنيد
آموزش طراحی سایت - آموزش ساخت دکمه های متحرک
تاريخ: امروز, : یکشنبه 19 اردیبهشت 1400 نويسنده: http://tahlilgardadeh.rozblog.com/user-admin
موضوع: آموزش طراحی سایت ,
آموزش طراحی سایت - آموزش ساخت دکمه های متحرک
دوره طراحي سايت پروژه محور
طراحي دکمه های متحرک در سایت
در این مقاله می آموزیم که چطور با استفاده از کد CSS , Html ، دکمه های متحرک (Animated Buttons) ایجاد کنیم.
ايجاد دکمه با افکت فشرده pressed
کد HTML , CSS را اضافه کنید.
مثال :
نمونه یک
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button:hover {background-color: #3e8e41}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
</style>
</head>
<body>
<h2>Animated Buttons - "Pressed Effect"</h2>
<button class="button">Click Me</button>
</body>
</html>
يک پيکان روي دکمه قرار دهيد تا فقط در زمان اتفاق افتادن Hover نماش داده شود.
کد HTML , CSS را اضافه کنید.
مثال :
نمونه دو
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
</style>
</head>
<body>
<h2>Animated Button</h2>
<button class="button"><span>Hover </span></button>
</body>
</html>
اضافه کردن افکت ایجاد حرکتی موج مانند ripple Effect به دکمه هاي سايت
کد HTML , CSS را اضافه کنید.
مثال :
نمونه سه
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
position: relative;
background-color: #4CAF50;
border: none;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.button:after {
content: "";
background: #90EE90;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
</style>
</head>
<body>
<h2>Animated Button - Ripple Effect</h2>
<button class="button">Click Me</button>
</body>
</html>
| امتياز : | نتيجه : 0 امتياز توسط 0 نفر مجموع امتياز : 0 |
نمايش اين کد فقط در ادامه مطلب براي قرار کد مورد نظر به ويرايش قالب مراجعه کنيد
برچسب ها : آموزش آنلاین و حضوری طراحی سایت , آموزش برنامه نویسی , آموزش طراحی سایت , بهترین آموزشگاه برنامه نویسی ,
مطالب مرتبط
آموزش Image Grid
طراحی شبکه تصاویر واکنش گرا
آموزش ساخت تصاویر لایت باکس
آموزش ساخت Image Modal با استفاده از HTML و CSS3
آموزش ساخت گالری اسلاید شو برای سایت
آموزش ساخت اسلايدشو براي وبسايت
آموزش ساخت دکمه Back to Top برای صفحات وب
گرد کردن گوشه دکمه ها با CSS
آموزش ساخت دکمه با متن
آموزش ساخت دکمه های تمام عرض در سایت
