Phatosapa and CSS with hobhara (hover) to add the button to create animations

[bbasujon]

ফটোশপ এবং CSS দিয়ে হোভার(hover) এনিমেশন যুক্ত বাটন তৈরি

PSD অর্থাৎ ফটোশপে বাটন তৈরি:

আমাদের প্রথম স্টেপ হবে ফটোশপে বাটনটা তৈরি করা। তাই প্রথমেই মাপ যোগ এর কাজ শেষ করি।

১. নিচের মত সেটিং নিয়ে একটা নতুন ডকুমেন্ট্রি নিন!



২. এবার View>New Guide যান এবং নিচের মত করে মোট পাঁচ বার Guide যোগ করুণ










ব্যাস আমাদের মাপ যোগ শেষ।



এবার আমদের বাটন তৈরিতে নেমে পড়ি।

৩. Rounded Rectangle Tool এর সাহায্য নিচের মত করে একটা চতুর ভুজ আঁকুন যেটার Radius হবে 5px।।



৪. নিচের স্কিনসট অনুযায়ী এটার লেয়ার স্টাইল তৈরি করুন।







সবকিছু যদি ঠিক ভাবে করতে পারেন তাহলে আপনার বাটন নিচের মত অবস্থায় যাবে।



৫. এবার এটার নিচের অংশ একটা একই মাপের চতুর্ভুজ আঁকুন এবং লেয়ার স্টাইল একই রকম করে করুণ। শুধু Layer>Layer Style>Gradient Overlay গিয়ে নিচের মত করে সেটিং দিন।



ব্যাস আপনার বাটন তৈরি শেষ এবার নিচের ইচ্ছা মত টেক্সট যোগ করুন।[/size



CSS কোডে পরিণত:

এখন আমরা এটাকে CSS পরিণত করবো।
১. নিচে মূল বাটন এর CSS কোড দেয়া হল।
.button {
width:350px;
height:80px;
display:block;
background-image:url(images/button.png);
background-position: top;
}
এখনে width একই থাকবে। তবে height মূল height এর অর্ধেক দিতে হবে কোডে লক্ষ্য করুন height: 80px দেয়া হয়েছে কারণ এখনে height আছে 160। এটা ওপর থেকে শুরু করার জন্য background position: top দিন যদি নিচ থেকে শুরু করাতে চান হলে top এর জায়গায় bottom দিতে হবে। আর images/button.png এখনে আপনার বাটন এর লিংক।

২. লিংক হবার বাটন এর CSS কোড।
.button:hover{
width:350px;
height:80px;
background-image:url(images/button.png) no repeat;
background-position: bottom;

}

এটার কোড আর ব্যাখ্যা করলাম না। দুটোর কোড এক সাথে নিচের মত হবে।

/* tutorialbd.com button by Noor Elahi Shibly*/
.button {
width:350px;
height:80px;
display:block;
background-image:url(images/button.png);
background-position: top;
}
.button:hover{
width:350px;
background-position: bottom;
height:80px;
background-image:url(images/button.png) no repeat;
}
/* End button effects */