fancybuttons

for downloading purposes

by Imri Paloja

HTML

<div class="button file">FILE:<a href="http://www.eurobytes.nl/favicon.ico" title="Favicon">favicon.ico</a></div>


	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>

		<div class="button itunes"><a href="http://www.eurobytes.nl/favicon.ico" title="WhatsApp Messenger">WhatsApp Messenger</a></div>

	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>

		<div class="button playstore"><a href="http://www.eurobytes.nl/favicon.ico" title="WhatsApp Messenger">WhatsApp Messenger</a></div>

	<p> purposes 
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>


	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation...

CSS

.button {
    border: 1px solid rgba(0, 0, 0, 0.25);
    height: 25px;
    margin: 2px 3px;
    text-align: center;
}

.button a {
    border-left: 1px solid #CCCCCC;
    color: #FFFFFF;
    float: right;
    height: 104%;
    margin: 0;
    padding: 0;
    text-decoration: none;
    width: 85%;
}

.button:hover {
	background-color: rgba(0, 0, 0, 0.70);
}


.file {
	background-color: #CC0000;

  }

.itunes {
    background-color: #298CDA;
    background-image: url("http://i.imgur.com/pshFG.png");
    background-position: -2px 50%;
    background-repeat: no-repeat;
    background-size: 35px auto;
  }

.playstore {
    background-color: #B3C833;
    background-image: url("https://ssl.gstatic.com/android/market_images/web/favicon.ico");
    background-position: -2px 50%;
    background-repeat: no-repeat;
    text-align: center;
    background-size: 35px auto;
}