কোনো 3rd Party URL Redirection ছাড়াই ব্লগার টেম্পলেটের ক্রেডিট রিমুভ করে দিন

কোনো 3rd Party URL Redirection ছাড়াই ব্লগার টেম্পলেটের ক্রেডিট রিমুভ করে দিন
আসসালামু আলাইকুম,
কেমন আছেন?
প্রায়ই নানা ব্লগার টেম্পলেটের ওয়েবসাইটে ঘোরার সময় আমার ইউজারদের ফিডব্যাক বা কমেন্ট সেকশনে চখ পড়ে। সেখানে অনেকের প্রশ্নের একটা বড় অংশ হল, টেম্পলেটের নিচের ফুটার রিমুভ করলে নাকি ডেভেলপার পেইজে রিডাইরেক্ট হয়ে যায়। এটা সত্য যে ডেভেলপারদের ক্রেডিট মোছা উচিত নয়। কিন্তু অনেকেই ব্লগের সৌন্দর্যের(!) কথা চিন্তা করে এটা রিমুভ করার চেস্টা করি। আবার অনেকে লিঙ্ক বা নাম বদলে দেই, এতেও রিডাইরেক্ট হতে থাকে।

আসলে, যারা নতুন ব্লগার, ব্লগিং লাইনে বেশিদিন নেই, তারা ফ্রি টেম্পলেটের স্থলে প্রিমিয়াম টেম্পলেট ইউজ করতে যায়। এবং অনেকে কোনো কারন ছাড়াই ফুটার ক্রেডিট রিমুভ করে দেয়। এটা অনৈতিক। কিন্তু  ব্লগের ভেতরে কমেন্টে ডেভেলপারের নাম রেখে ফুটার রিমুভ করা যেতে পারে।

কিভাবে রিমুভ করবেন?

আসলে, এই লিঙ্কগুলো জাভাস্ক্রিপ্ট দিয়ে প্রোগ্রাম করা থাকে। জাভাস্ক্রিপ্ট চেক করে দেখে তার কাছে দেওয়া ভেরিয়েবল নেইম এবং ইউআরএল এর সাথে ফুটার ক্রেডিটের মিল আছে নাকি। না থাকলে সে রিডাইরেক্ট করে দেয়।
জাভাস্ক্রিপ্টাকে খুজে বের করে রিমুভ করা কষ্টসাধ্য এবং সময় সাপেক্ষ কাজ এবং অনেক ক্ষেত্রে অসম্ভব। কারন হয়তো জাভাস্ক্রিপ্টগুলো এনকোড করা থাকে, এতে খুজেই পাওয়া যায় না।
কিন্তু আমরা একটা সিএসএস এপ্লাই করে ২ মিনিটেই এটা রিমুভ করতে পারি।
  • প্রথমে ব্লগার ডট কমে যান।
  • ব্লগার প্রোফাইলে গিয়ে কাঙ্ক্ষিত ব্লগে যান।
  • এবার Dashboard > Template > Edit HTML.এ যান।
Edit Blogger Template

  • এবার credit/footer link খুজে বের করুন। আপনি Copyright, credit or designed এজাতীয় লেখা খুজে পেতে পারেন। (নিচে নমুনা)
Find footer credit link

  • নিচের কোড ছবির মত করে এন্ট্রি করে দিন

style=”display: none”




  • এবার টেম্পলেট সেইভ করে নিন




আরও পড়ুন

Photoshop দিয়েই Professional CD Cover ডিজাইন করুন (সম্পূর্ণ নতুন ৩০ মিনিট টিউটোরিয়াল)

Photoshop দিয়েই Professional CD Cover ডিজাইন করুন (সম্পূর্ণ নতুন ৩০ মিনিট টিউটোরিয়াল)
আসসালামু আলাইকুম,
কেমন আছেন? আমি ফটোশপে ওস্তাদ নই। তবুও যা পারি, টিউটোরিয়াল আকারে শেয়ার করি। 
এছাড়া ফটোশপে আমি নিজে নিজে বেশ কিছু জিনিশ এবং ইফেক্ট তৈরি করার চেষ্টা করেছি এবং সফল হয়েছি। আমি ধিরে ধিরে সেগুলো আপনাদের সামনে আনব। 

আজ আমার নিজের মতো করে কিভাবে ২০ মিনিটেই একটা সফটওয়্যারের এনিমেশন করা সিডি কাভার তৈরি করা যায় তা দেখাব। এজন্যে আমি ডিজিটাল রিজিওনাল ডিকশনারির কাভার তৈরি করবো। এর কভার মুলত এর আগে আমিই ডিজাইন করে দিয়েছিলাম।
এখানে আমি সম্পূর্ণ নিজের পদ্ধতিতে কাজ করবো। পুরোটা দেখার পর কাজের ধারনা এসে গেলে প্রত্যেকের নিজের পদ্ধতি তৈরি হয়ে যাবে আমার বিশ্বাস।





এখানে আমাদের একটা ফাইলেই সব কাজ হবে না। একেক ফাইলে একেক কাজ হবে।
এখানে আমি ৪টি ফাইলে (পিএসডি) তে কাজ করবো,

  1. Mainbody.psd
  2. Sidebody.psd
  3. CD.psd
  4. MainFile.psd

প্রথমে আমাদের কাজই শুরু হবে Mainbody.psd দিয়ে।
এখানে আমরা কভারের সামনের বড় অংশ বানাবো। 
এখন 744x1080 সাইজে ৩০০ রেজুলেশনে ব্যাকগ্রাউন্ড ট্রান্সপারেন্ট করে একটা ইমেজ তৈরি করতে হবে।



বার আমরা ইমেজের মধ্যে ডিজাইন করবো। 
প্রথমে ব্যাকগ্রাউন্ড গ্র্যাডিয়েন্ট করে দেই।


এবার হেডার এবং ফুটার তৈরি করি। এজন্যে আমাদের আরেকটা ইমেজ করা লাগবে। এটা হবে 20x20. এবার এই ছোট স্কয়ার সাইজ ইমেজে ফুটার কালার বা কোনো স্টাইল দিয়ে .png ফরম্যাট দিয়ে সেইভ করি।



এবার ঐ .png ফাইলকে আমাদের Mainbody.psd এর ভেতরে ড্রাগ অ্যান্ড ড্রপ করে নিয়ে আসি এবং ফুটার অথবা হেডারে রেখে রিসাইজ করে বসিয়ে দেই।




এবার মাঝে লোগো, টেক্সট ইত্যাদি ডিজাইন করে বসিয়ে দেই।


এবার এটাকে একটা .png ফাইলে সেইভ করি। যেমন Mainbody.png


এবার সাইডের কাজ করতে sidebody.psd ফাইল তৈরি করি।
 সেখানে 300x1080 সাইজের 300 রেজুলেশনের একটা ইমেজ তৈরি করি। 
সেখানেও ইচ্ছেমত ডিজাইন করি।
mainbody এবং sidebody এর হেডার এবং ফুটারে মিল রাখতে আমাদের এখানেও স্কয়ার ইমেজটা আনতে হবে এবং হেডার - ফুটার এর উচ্চতা 20px এর মাঝে রাখতে হবে ঐ স্কয়ার ইমেজটার মাধ্যমে।



এবার ডিজাইন করি, ডিজাইনের পর পিএনজি ফরম্যাটে সেইভ করি।sidebody.png




এবার cd.psd এর কাজ করবো। মানে সিডি তৈরি করবো।

1000x1000 সাইজে 300 রেজুলেশনে ব্যাকগ্রাউন্ড ট্রান্সপারেন্ট রাখতে হবে।




এবার সিডি ডিজাইন করি,
প্রথমে কাস্টম শেইপ টুল সিলেক্ট করি।
তারপর রাউন্ড থিন ফ্রেইম সিলেক্ট করে নিই।

 


এবার পুরো স্কয়ার ইমেজ ফুল করে একটা রাউন্ড ফিগার আঁকি।



এবার এই লেয়ার সিলেক্ট করে Ctrl + J চাপ দেই, এতে এর ডুপ্লিকেট লেয়ার তৈরি হবে। এই ডুপ্লিকেট লেয়ার আমরা সিডি এর মাঝের স্ট্যাকিং রিং আর প্লাস্টিক হাব তৈরি করবো। মানে সিডির মাঝের ছিদ্রটা। ডুপ্লিকেট করার পর Alt + Left Shift চেপে ধরে লেয়ারের নিচের দিকের কোনের রিসাইজার লেফট ক্লিক দিয়ে চেপে ভেতরের দিকে নিয়ে যাই, এতে লেয়ারের সাইজ সব্দিক থেকে ছোট হবে।




এবার লেয়ার দুটি মারজ করে নিই। Ctrl চেপে লেয়ার দুটি সিলেক্ট করে রাইট ক্লিক করে "মারজ লেয়ারস" এ  ক্লিক করে দিতে হবে।




এবার ইমেজে কালার ফিল দিতে হবে বা কোনো স্টাইল এপ্লাই করতে হবে।অথবা কালার এপ্লাই এবং ডিজাইন শেষ করার পর কোন ফিল্টার দিয়ে দেওয়া যেতে পারে। এবার এটাকে cd.png ফাইলে সেইভ করে নিতে হবে।




এবার শুরু হবে ফাইনাল কাজ।

এবার mainFile.psd তৈরি করে নিই। 
সেখানে ইমেজ সাইজ হবে 900x768 
(এই রেশিও ভালো, তার মানে এই নয় এইটিই ব্যাবহার করতে হবে। ইচ্ছেমত ব্যাবহার করা যেতে পারে।)

এখানে প্রথমে mainbody.png ড্র্যাগ অ্যান্ড ড্রপ করে আনতে হবে। এবং Move Tool সিলেক্ট করে Show Transform Control দিয়ে পাশের রিসাইজার গুলো দিয়ে ছবি ঠিক মাপে আনতে হবে।


 একই ভাবে sidebody.png কে এনে রিসাইজ করে ঠিক ঠাক করে বসাতে হবে। বসাতে অসুবিধা হলে নিচে এর জিপ ফাইল ডাউনলোড লিঙ্ক আছে, সেখান থেকে ইমেজ রিপ্লেস করে নিজের ইমেজ বসিয়ে নিলেই কাজ হবে।



এবার সিডিটা বসাই।আগের মত করে রিসাইজ করে নিই।
ব্যাস! কাজ শেষ! আরও স্টাইল যোগ করা যেতে পারে।
তবে আমি আর দেখাব না। কেবল সিডি কাভারের কাজ সেশে অন্য ইমেজে কিভাবে ফ্লোর রিফ্লেকশন দেওয়া যায় সেটা দেখিয়ে আজকের পোস্ট শেষ করবো।


এবার নতুন একটা ইমেজ তৈরি করতে হবে। এইচডি হলে (৭২০পি) হলে ভালো হয়। সেখানে ব্যাকগ্রাউন্ড সাদা করে এই সিডি কাভারের ইমেজ রাখতে হবে। 

এবার CD Cover এর লেয়ার এর উপর সিলেকশন রেখে Ctrl + J চাপো। এতে ডুপ্লিকেট লেয়ার তৈরি হবে। এবার ডুপ্লিকেট লেয়ার সিলেক্ট করে Ctrl + T চাপো। এতে Free Transform করা যাবে। এবার Ctrl + T চাপার পর ইমেজের উপর রাইট ক্লিক করে Flip Vertical ক্লিক করো।

এবার লেয়ারের অপাসিটি কমিয়ে দাও (13%) বা ঝাপসা করে দাও এবং ফ্রি ট্রাস্ফরম ইউজ করে ইমেজের সাথে রিফ্লেকশন বানিয়ে নাও।


ব্যাস! আজ এই পর্যন্ত! সমস্যা হলে বোলো। 
এর এই ধরনের ডিজাইন করিয়ে নিতে চাইলে আমাদের পেইজে কন্টাক্ট করতে পার।*চার্জ প্রযোজ্য






ফাইল পাসওয়ার্ডঃ  cdcoverspsdbytawsiftorabi

আরও পড়ুন

পিএইচপি দিয়ে সহজে বানাও ওয়াটারমার্ক - ৪ [FILES array দিয়ে ফাইল আপলোড করে ওয়াটারমার্ক করা]

পিএইচপি দিয়ে সহজে বানাও ওয়াটারমার্ক - ৪ [FILES array দিয়ে ফাইল আপলোড করে ওয়াটারমার্ক করা]
আসসালামু আলাইকুম,
এরই মধ্যে দুটি পদ্ধতি দেখিয়ে ফেলেছি। সেগুলো এখানে পাবেন।
  1. পিএইচপি দিয়ে সহজে বানাও ওয়াটারমার্ক - ১
  2. পিএইচপি দিয়ে সহজে বানাও ওয়াটারমার্ক - ২
  3. পিএইচপি দিয়ে সহজে বানাও ওয়াটারমার্ক - ৩
এটাই হয়ত আমার পক্ষ থেকে পিএইচপি ইমেজ ওয়াটারমার্কিং এর শেষ পর্ব। তবে জিআর+ থেকে নয়। এরপরেও হয়তো আরও ভালো স্ক্রিপ্ট আসবে এই সম্পর্কে।



এবার আসব আমার চার নাম্বার স্ক্রিপ্টে।
এখানে আমরা ফাইল আপলোড করে ওয়াটার মার্ক বানাতে পারবো। এখানে ওয়াটার মার্ক ইমেজ আগে থেকে ঠিক করা থাকবে। কিন্তু মেইন ইমেজ ফাইল আমরা আপলোড করে নিব।
এখানে ফাইল এরে ব্যাবহার করে ইমেজ আপলোড করবো।


পিএইচপি প্রোগ্রাম রান করাতে হলে অবশ্যই ওয়েব সার্ভার লাগবে। কিন্তু ওয়েব সার্ভার থাকতে হলে লাগবে টাকা। টাকা যদি থাকে বা ওয়েবসারভার কেনা থাকলে এটা রান করা কোনো ব্যাপার না, ফাইল আপলোড করে ব্রাউজার দিয়ে খুললেই হবে।
আমাদের জন্য আমরা একটা অফলাইনে অ্যাপাচি সার্ভার সিমিউলেট করতে হবে। এর নাম xampp. 
ডাউনলোড করে নাও এখান থেকে https://www.apachefriends.org

এখন সেটআপ শেষ হলে সি ড্রাইভে গিয়ে xampp ফোল্ডারে যাও এবং htdocs ফাইল ফোল্ডার ওপেন কর।
সেখানে একটা ফাইল খুলো watermark নামে বা যেকোনো নামে।

এখন ব্রাউজার খুলো।

অ্যাড্রেস বারে লিখো http://localhost/"তোমার দেওয়া ফোল্ডারের নাম"
আমার ক্ষেত্রে water
http://localhost/water
এবার ঐ ফোল্ডারে index.php ফাইল তৈরি কর কোন টেক্সট ফাইল এডিটর দিয়ে।

এবার ঐ ডিরেক্টরিতে index.php তৈরি করে নিচের কোড লিখে সেভ কর,

<?php
if(isset($_FILES['image_file']))
{
$max_size = 800; //max image size in Pixels
$destination_folder = 'watermark';
$watermark_png_file = 'watermark.png'; //watermark png file
$image_name = $_FILES['image_file']['name']; //file name
$image_size = $_FILES['image_file']['size']; //file size
$image_temp = $_FILES['image_file']['tmp_name']; //file temp

$image_type = $_FILES['image_file']['type']; //file type
switch(strtolower($image_type)){ //determine uploaded image type
//Create new image from file
case 'image/png':
$image_resource =  imagecreatefrompng($image_temp);
break;
case 'image/gif':
$image_resource =  imagecreatefromgif($image_temp);
break;        
case 'image/jpeg': case 'image/pjpeg':
$image_resource = imagecreatefromjpeg($image_temp);
break;
default:
$image_resource = false;
}

if($image_resource){
//Copy and resize part of an image with resampling
list($img_width, $img_height) = getimagesize($image_temp);
    //Construct a proportional size of new image
$image_scale        = min($max_size / $img_width, $max_size / $img_height);
$new_image_width    = ceil($image_scale * $img_width);
$new_image_height   = ceil($image_scale * $img_height);
$new_canvas         = imagecreatetruecolor($new_image_width , $new_image_height);
if(imagecopyresampled($new_canvas, $image_resource , 0, 0, 0, 0, $new_image_width, $new_image_height, $img_width, $img_height))
{
if(!is_dir($destination_folder)){
mkdir($destination_folder);//create dir if it doesn't exist
}
//center watermark
$watermark_left = ($new_image_width/2)-(300/2); //watermark left
$watermark_bottom = ($new_image_height/2)-(100/2); //watermark bottom
$watermark = imagecreatefrompng($watermark_png_file); //watermark image
imagecopy($new_canvas, $watermark, $watermark_left, $watermark_bottom, 0, 0, 300, 100); //merge image
//output image direcly on the browser.
header('Content-Type: image/jpeg');
imagejpeg($new_canvas, NULL , 90);
//Or Save image to the folder
//imagejpeg($new_canvas, $destination_folder.'/'.$image_name , 90);
//free up memory
imagedestroy($new_canvas);
imagedestroy($image_resource);
die();
}
}
}
?>
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#upload-form {
padding: 20px;
background: #F7F7F7;
border: 1px solid #CCC;
margin-left: auto;
margin-right: auto;
width: 400px;
}
#upload-form input[type=file] {
border: 1px solid #ddd;
padding: 4px;
}
#upload-form input[type=submit] {
height: 30px;
}
</style>
</head>
<body>
<form action="" id="upload-form" method="post" enctype="multipart/form-data">
<input type="file" name="image_file" />
<input type="submit" value="Send Image" />
</form>
</body>
</html>

হলুদ হাইলাইট করা অংশে ফাইলের সাইজ, ওয়াটার মার্ক ফাইল ঠিক করা হয়েছে।
কমলা হাইলাইট করা অংশে ইমেজের টেম্পরারি ফাইল বানান হয়েছে এবং ইমেজ সাইজ, ইমেজের এক্সটেনশন এবং ইমেজের নাম বের করা হয়েছে।
আকাশি হাইলাট অংশে ফাইলের এক্সটেনশন অনুযায়ী হেডার ফাইল সুইচ করা হয়েছে।
প্রতিটি অংশের পাশে কমেন্ট লেখা আছে, যাতে কোন অংশের কাজ কি বোঝা যায়। সেটা দেখলেই হবে। আমি আর তেমন কিছু লিখব না।

এবার index.php এর  সাথে একই ডিরেক্টরিতে watermark নামের ফোল্ডার বানাই ($destination_folder = 'watermark';  এর জন্য) এবং watermark.png রেখে দিয়ে ব্রাউজার দিয়ে চালু করি এভাবে।
http://localhost/water/index.php
আমি এখন FILES array দিয়ে করতে পারছি। মানে ফাইল আপলোড ইউজ করতে পারছি।
ধন্যবাদ সকলকে।

আমি ফেসবুকে আছি,

আরও পড়ুন

১৩টা অসাধারণ সিএসএস বাটন!

১৩টা অসাধারণ সিএসএস বাটন!
আসসালামু আলাইকুম,
আমি ইন্টারনেট ঘেটে প্রায় ১৩টি সিএসএস বাটন যোগার করেছি। এগুলো সিএসএস দিয়ে বলে ক্রস ব্রাউজার সাপরটেড। আপনাদের ভালো লাগবে আশা করি।


নিচে কোড এবং ডেমো:

Preview:

Code

<a href="#" class="button-0">Buy</a>

<style type="text/css">
.button-0 {
    position: relative;
    padding: 10px 40px;
    margin: 0px 10px 10px 0px;
    float: left;
    border-radius: 10px;
    font-family: 'Helvetica', cursive;
    font-size: 25px;
    color: #FFF;
    text-decoration: none;  
    background-color: #3498DB;
    border-bottom: 5px solid #2980B9;
    text-shadow: 0px -2px #2980B9;
    /* Animation */
    transition: all 0.1s;
    -webkit-transition: all 0.1s;
}

.button-0:hover, 
.button-0:focus {
    text-decoration: none;
    color: #fff;
}

.button-0:active {
    transform: translate(0px,5px);
    -webkit-transform: translate(0px,5px);
    border-bottom: 1px solid;
}
</style>

Preview:

Code:

<input type="submit" class="styled-button-1" value="Download" /> 

<style type="text/css">
.styled-button-1 {
 -webkit-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
 -moz-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
 box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
 color:#333;
 background-color:#FA2;
 border-radius:5px;
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
 border:none;
 font-family:'Helvetica Neue',Arial,sans-serif;
 font-size:16px;
 font-weight:700;
 height:36px;
 padding:4px 16px;
 text-shadow:#FE6 0 1px 0
}
 </style>
            

Preview:

Code:

<input type="submit" class="styled-button-2" value="Download" /> 

<style type="text/css"> 
.styled-button-2 {
 -webkit-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
 -moz-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
 box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
 border-bottom-color:#333;
 border:1px solid #61c4ea;
 background-color:#7cceee;
 border-radius:5px;
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
 color:#333;
 font-family:'Verdana',Arial,sans-serif;
 font-size:14px;
 text-shadow:#b2e2f5 0 1px 0;
 padding:5px
}
</style>
            

Preview:

Code:

<input type="submit" class="styled-button-3" value="Download" /> 

<style type="text/css"> 
.styled-button-3 {
 -webkit-box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0;
 -moz-box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0;
 box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0;
 background-color:#5B74A8;
 border:1px solid #29447E;
 font-family:'Lucida Grande',Tahoma,Verdana,Arial,sans-serif;
 font-size:12px;
 font-weight:700;
 padding:2px 6px;
 color:#fff;
 border-radius:5px;
 -moz-border-radius:5px;
 -webkit-border-radius:5px
}
 </style>
            

Preview:

Code:

<input type="submit" class="styled-button-4" value="Download" /> 

<style type="text/css"> 
.styled-button-4 {
 -webkit-box-shadow:rgba(0,0,0,0.98) 0 1px 0 0;
 -moz-box-shadow:rgba(0,0,0,0.98) 0 1px 0 0;
 box-shadow:rgba(0,0,0,0.98) 0 1px 0 0;
 background-color:#EEE;
 border-radius:0;
 -webkit-border-radius:0;
 -moz-border-radius:0;
 border:1px solid #999;
 color:#666;
 font-family:'Lucida Grande',Tahoma,Verdana,Arial,Sans-serif;
 font-size:11px;
 font-weight:700;
 padding:2px 6px;
}
</style>
            

Preview:

Code:

<input type="submit" class="styled-button-5" value="Download" /> 

<style type="text/css"> 
.styled-button-5 {
 background-color:#ed8223;
 color:#fff;
 font-family:'Helvetica Neue',sans-serif;
 font-size:18px;
 line-height:30px;
 border-radius:20px;
 -webkit-border-radius:20px;
 -moz-border-radius:20px;
 border:0;
 text-shadow:#C17C3A 0 -1px 0;
 width:120px;
 height:32px
}                
</style>
            

Preview:

Code:

<input type="submit" class="styled-button-6" value="Download" /> 

<style type="text/css">
.styled-button-6 {
 background:#f78096;
 background: -moz-linear-gradient(top,#f78096 0%,#f56778 100%);
 background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#f78096),color-stop(100%,#f56778));
 background: -webkit-linear-gradient(top,#f78096 0%,#f56778 100%);
 background: -o-linear-gradient(top,#f78096 0%,#f56778 100%);
 background: -ms-linear-gradient(top,#f78096 0%,#f56778 100%);
        filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f78096',endColorstr='#f78096',GradientType=0);
 padding:5px 4px;
 color:#fff;
 font-family:'Helvetica Neue',sans-serif;
 font-size:12px;
 border-radius:4px;
 -moz-border-radius:4px;
 -webkit-border-radius:4px;
 border:1px solid #ae4553
}                
</style>
            

Preview:

Code:

<input type="submit" class="styled-button-7" value="Download" /> 

<style type="text/css">
.styled-button-7 {
 background: #FF5DB1;
 background: -moz-linear-gradient(top,#FF5DB1 0%,#E94A86 100%);
 background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#FF5DB1),color-stop(100%,#E94A86));
 background: -webkit-linear-gradient(top,#FF5DB1 0%,#E94A86 100%);
 background: -o-linear-gradient(top,#FF5DB1 0%,#E94A86 100%);
 background: -ms-linear-gradient(top,#FF5DB1 0%,#E94A86 100%);
 background: linear-gradient(top,#FF5DB1 0%,#E94A86 100%);
 filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#FF5DB1', endColorstr='#E94A86',GradientType=0);
 padding:5px 7px;
 color:#fff;
 font-family:'Helvetica Neue',sans-serif;
 font-size:12px;
 border-radius:4px;
 -moz-border-radius:4px;
 -webkit-border-radius:4px;
 border:1px solid #E8124F
}
                
</style>
            

Preview:

Code:

<input type="submit" class="styled-button-8" value="Download" /> 

<style type="text/css">
.styled-button-8 {
 background: #25A6E1;
 background: -moz-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
 background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#25A6E1),color-stop(100%,#188BC0));
 background: -webkit-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
 background: -o-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
 background: -ms-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
 background: linear-gradient(top,#25A6E1 0%,#188BC0 100%);
 filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#25A6E1',endColorstr='#188BC0',GradientType=0);
 padding:8px 13px;
 color:#fff;
 font-family:'Helvetica Neue',sans-serif;
 font-size:17px;
 border-radius:4px;
 -moz-border-radius:4px;
 -webkit-border-radius:4px;
 border:1px solid #1A87B9
}                
</style>
            

Preview:

Code:

<input type="submit" class="styled-button-9" value="Download" /> 

<style type="text/css"> 

   .styled-button-9 {
 background: #00A0D1;
 background: -moz-linear-gradient(top,#00A0D1 0%,#008DB8 100%);
 background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#00A0D1),color-stop(100%,#008DB8));
 background: -webkit-linear-gradient(top,#00A0D1 0%,#008DB8 100%);
 background: -o-linear-gradient(top,#00A0D1 0%,#008DB8 100%);
 background: -ms-linear-gradient(top,#00A0D1 0%,#008DB8 100%);
 background: linear-gradient(top,#00A0D1 0%,#008DB8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00A0D1',endColorstr='#008DB8',GradientType=0);
 padding:8px 20px;
 color:#cfebf3;
 font-family:'Helvetica Neue',sans-serif;
 font-size:13px;
 border-radius:40px;
 -moz-border-radius:40px;
 -webkit-border-radius:40px;
 border:1px solid #095B7E
}
             
</style>
            

Preview:

Code:

<input type="submit" class="styled-button-10" value="Download" /> 

<style type="text/css"> 
.styled-button-10 {
 background:#5CCD00;
 background:-moz-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5CCD00),color-stop(100%,#4AA400));
 background:-webkit-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
 background:-o-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
 background:-ms-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
 background:linear-gradient(top,#5CCD00 0%,#4AA400 100%);
 filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#5CCD00', endColorstr='#4AA400',GradientType=0);
 padding:10px 15px;
 color:#fff;
 font-family:'Helvetica Neue',sans-serif;
 font-size:16px;
 border-radius:5px;
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
 border:1px solid #459A00
}
</style>
            

Preview:

Code:

<input type="submit" class="styled-button-11" value="Download" /> 

<style type="text/css">
.styled-button-11 {
 background: #FEDA71;
 background: -moz-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
 background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#FEDA71),color-stop(100%,#FEBB49));
 background: -webkit-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
 background: -o-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
 background: -ms-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
 background: linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
 filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#FEDA71',endColorstr='#FEBB49',GradientType=0);
 padding:8px 18px;
 color:#623F1D;
 font-family:'Helvetica Neue',sans-serif;
 font-size:16px;
 border-radius:48px;
 -moz-border-radius:48px;
 -webkit-border-radius:48px;
 border:1px solid #623F1D
}         
</style>
            

Preview:

Code:

<input type="submit" class="styled-button-12" value="Download" /> 

<style type="text/css"> 
.styled-button-12 {
 background: #5B74A8;
 background: -moz-linear-gradient(top,#5B74A8 0%,#5B74A8 100%);
 background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#5B74A8), color-stop(100%,#5B74A8));
 background: -webkit-linear-gradient(top,#5B74A8 0%,#5B74A8 100%);
 background: -o-linear-gradient(top,#5B74A8 0%,#5B74A8 100%);
 background: -ms-linear-gradient(top,#5B74A8 0%,#5B74A8 100%);
 background: linear-gradient(top,#5B74A8 0%,#5B74A8 100%);
 filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#5B74A8',endColorstr='#5B74A8',GradientType=0);
 padding:2px 6px;
 color:#fff;
 font-family:'Helvetica',sans-serif;
 font-size:11px;
 border-radius:0;
 -moz-border-radius:0;
 -webkit-border-radius:0;
 border:1px solid #1A356E
}
</style>
            

আরও পড়ুন

মোট পাতাদর্শিত