When using PayPal for the Utopia Letterpress Print I want people to set their own price. PayPal offers a “Donate” button, but I wasn’t asking for donations. People are purchasing something, they’re just setting their own price for it. These PayPal buttons would not work for Karl Marx.

“From each according to his ability, to each according to his need” -Karl Marx

So I made my own buttons. And you can too!

The Source Code

You can download the images above and use them, or create your own using CSS.

Originally I made the button using vector software, but with the code below you can change the text to say whatever you like. No, it’s not an exact replica of the PayPal button, but it’s close enough to get by. The compromise means it can be made all in CSS – change the text and the width of the button and you can make it say whatever you want, no vector editor needed!

Copy the below code into a text editor, make changes, save as a .html file, and open in a browser. Make changes, save, and reload as needed.

This code was adapted from a tutorial on net.tutsplus.

 .button {
 width: 170px; //change width of button here
  height: 32px;
 color: #2e3192;
 text-decoration: none;
 display: block;
 text-align: center;
 position: relative;

 /* BACKGROUND GRADIENTS */
 background: #FEE1A5;
 background: -moz-linear-gradient(top, #FFF, #FEE1A5 50%, #FFB829 51%,
#FEE1A5 95%, #FEE1A5);
 background: -webkit-gradient(linear, left top, left bottom,
color-stop(0, #FFF), color-stop(.5, #FEE1A5), color-stop(.51, #FFB829),
color-stop(.95, #FEE1A5), color-stop(.96, #FEE1A5), to(#FEE1A5));

 /* BORDER RADIUS */
 -moz-border-radius: 18px;
 -webkit-border-radius: 18px;
 border-radius: 18px;

 border-bottom: 1px solid #FFF;
 border-top: 1px solid #FFB829;
 border-left: 1px solid #FEE1A5;
 border-right: 1px solid #FEE1A5;

 /* TEXT SHADOW */

 text-shadow: 0px 1px 1px white;

 /* BOX SHADOW */
 -moz-box-shadow: 0 1px 3px #777;
 -webkit-box-shadow: 0 1px 3px #777;
 box-shadow: 0 1px 3px #777;
 font: italic bold 18px/32px helvetica, arial;
}

 /* WHILE HOVERED */
 .button:hover {
 background: #FEE1A5;
 background: -moz-linear-gradient(top, #FFF, #FEE1A5 50%,
#FFB829 51%, #FEE1A5 95%, #FEE1A5);
 background: -webkit-gradient(linear, left top, left bottom,
color-stop(0, #FFF), color-stop(.5, #FEE1A5), color-stop(.51, #FFB829),
color-stop(.95, #FEE1A5), color-stop(.96, #FEE1A5), to(#FEE1A5));
 -moz-box-shadow: 0 1px 2px black;
 -webkit-box-shadow: 0 1px 2px black;
 }

 /* WHILE BEING CLICKED */
 .button:active {
 -moz-box-shadow: 0 2px 6px black;
 -webkit-box-shadow: 0 2px 6px black;
}