Bitcoin Forum

Bitcoin => Project Development => Topic started by: joepie91 on June 15, 2011, 12:54:34 PM


Title: Pure CSS/HTML (no images) Bitcoin donation logo/button for your website
Post by: joepie91 on June 15, 2011, 12:54:34 PM
A button / logo to show that you accept Bitcoin donations. Using only HTML and CSS, no javascript (obviously) or images are used.
Displays as intended in Chrome and Firefox. Surprise surprise, doesn't work properly in IE9, but doesn't look too bad, although I have no clue why the border is not showing correctly.
Not tested in other browsers, all feedback is welcome :)
(I know the code is a bit messy, but it should work alright)

If you like it, of course donations are always welcome at 13m9CAKrYsdLKhqsNm4UkHHJqDM19F4oKv :P

EDIT: Obviously when placing the code on your site, you should edit the Bitcoin address to have your address :)

EDIT2: Forgot to set a background color for the white part of the "button", that is now fixed. If you have a non-white page background, please update your code :)

Screenshot of how it looks in various browsers:
http://img.owely.com/screens/18392/original_owely20110615-2459-wnbo04-0.?1308142096 (http://owely.com/2ZtIlQ)

Code:
Code:
<span style="overflow: hidden; border: 1px solid black; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding: 4px; padding-left: 0px; font-family: Arial; font-size: 12px; font-weight: bold; background-color: white;">
	<span style="padding: 4px; padding-left: 8px; background-color: #E98A0A; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color: white;">
		<a href="http://www.bitcoin.org/" style="text-decoration: none; color: white;">
			<span style="-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; font-weight: normal; color: white; font-size: 15px; background-color: white; color: #E98A0A; padding: 1px 5px; padding-top: 0px;">&#3647;</span>
			Donate using Bitcoin!
		</a>
	</span>
	<span style="padding: 5px;">
		13m9CAKrYsdLKhqsNm4UkHHJqDM19F4oKv
	</span>
</span>

I may work on some other buttons soon as well :)

Title: Re: Pure CSS/HTML (no images) Bitcoin donation logo/button for your website
Post by: Xiong Zhuang on June 15, 2011, 03:27:59 PM
Great job! I really love your work.

Title: Re: Pure CSS/HTML (no images) Bitcoin donation logo/button for your website
Post by: genjix on June 15, 2011, 03:49:34 PM
Haha, that's awesome. Was going to donate 50 millis before seeing it was you XD

joepie check this out, http://forum.bitcoin.org/index.php?topic=17368.0

Title: Re: Pure CSS/HTML (no images) Bitcoin donation logo/button for your website
Post by: Coineer on June 16, 2011, 12:28:40 AM
Great code!!! :D


Powered by SMF 1.1.19 | SMF © 2006-2009, Simple Machines