এটি একটি ভিডিও টিউটোরিয়াল। আমরা যারা html জানি তারা অনেকেই চাই CSS3 শিখতে। কিন্তু কেনো জানি হয়ে ওঠে না। তাই আজ আমি আপনাদের কে মাত্র চার মিনিটে CSS3 এর গুরুত্বপূর্ন জিনিস শেখাবো। এটি কে আপনি সাধারণ CSS এর সাথে ব্যবহার করে যে কোনো এলিমেন্ট কে এনেমেশন ইফেক্ট দিতে পারবেন।

ভিডিওটিতে দেখানো হয়েছে মাত্র ৩ মিনিটে কিভাবে HTML ও CSS3 দিয়ে চমৎকার একটি Animated বাটন তৈরি করবেন।

কথা কম কাজ বেশি, তাই আমি বক বক না করি আপনারা টউটোরিয়াল দেখুন,

টিউটোরিয়ালের ইউটিউব লিঙ্কঃ https://www.youtube.com/watch?v=sy_ixp1PDvc

আমি একটি ফাইলের মধ্যই প্রোজেক্ট টি করিয়ে দেখিয়েছি। কোড

index.html

.flat_button {
width: 200px;
background:#80ce87;
line-height: 50px;
text-align: center;
border: 1px solid #6dca75;
padding: 8px;
border-radius: 2px;
color: #fff;
font-size: 24px;
text-decoration: none;
font-family: "Century Gothic";

-o-transition: .5s;
-ms-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}

.flat_button:hover {
background: #9ae1a0;
text-shadow: 5px 3px 3px #005d34;
border-radius: 30px;
}

শুধু style.css ফাইল যদি চান তবে কোডঃ

.box {

width:200px;

line-height:50px;

text-align:center;

border: 1px solid #6dca75;

background: #80ce87;

padding: 8px;

-webkit-border-radius: 2px;

-moz-border-radius: 2px;

border-radius: 2px;

color: #fff;

font-size: 24px;

text-decoration: none;

-o-transition:.5s;

-ms-transition:.5s;

-moz-transition:.5s;

-webkit-transition:.5s;

transition:.5s;

}

.box:hover {

border-top: 1px solid #6dca75;

background: #9ae1a0;

text-shadow: 5px 3px 3px #005d34;

}


এবং index.html কোড

প্রোজেক্ট টির Zip ফাইল ডাউনলোড লিঙ্কঃ https://sites.google.com/site/scriptsn/css3-flat-button.zip