You probably have heard that donate buttons are losing their popularity. Instead, people are starting to use other alternatives, like “Buy Me a Beer” buttons. However, this time I turned things a little bit different and instead of “beer” button, I made a sweet “Buy Me An Ice-Scream” button.
- Time: 30 minutes
- Difficulty: Easy-Mid
You probably have heard that donate buttons are losing their popularity. Instead, people are starting to use other alternatives, like “Buy Me a Beer” buttons. However, this time I turned things a little bit different and instead of “beer” button, I made a sweet “Buy Me An Ice-Scream” button. Enough talking, take your mug of coffee and let’s dive into the world of css…
First of all, we will make our HTML structure. Our structure will consist of one main container, called div#button. Inside this element we will have 2 other elements. One of them will be called div#wood and another one button. It’s a little bit odd structure, but you will get it, take a look:
<button>Buy me an ice-cream</button>
Now it’s time to move to the styling part. We will start by styling our button element. We are going to remove border, add the background color, box-shadow, border-radius, some padding and other properties. Box-shadow will give that nice white inner border and that pink cusp to our button.
-webkit-gradient(linear, 0% 0%, 0% 56%, from(#EB3373),
-17px 0 1px #BC2E64 inset,
-17px 0 0 #561630 inset,
0 3px 0px #EDEDED inset,
0 5px 0px #F9F9F9 inset,
0 -3px 0px #EDEDED inset,
0 -5px 0px #F9F9F9 inset,
3px 0 0px #FFF inset,
5px 0 0px #F9F9F9 inset,
-3px 0 0px #FFF inset,
-5px 0 0px #F9F9F9 inset;
padding:1em 2.5em 1em 1.5em;
Also, we will style our button text. We will decrease the size, make the text uppercase, change the color to white and in the end we will add text-shadow property.
text-shadow:0 -1px 0 #444;
Now we will style our button when it is in the hover state. We will add a CSS3 transition, cursor and color properties. Transition property will give that blink effect.
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
As you see, we have almost finished our button, however, we still need to style our div#wood container. We will make it about of 1.7em in width and 0.8em in height, we will set the color, border-left, border-radius and box-shadow to get that inner shadow feeling. Also, we will position this container with top and left properties to the right place.
box-shadow:-2px 0 0 #561630,
-2px 0 2px #000 inset;
border-left:1px solid #FFF;
And for the end, we are going to give a margin-left for our div#button container to position our button element in the right place.
I hope you liked this tutorial, however, if you don’t, your critic or suggestions are always welcome. By the way, before heading out, don’t forget to share and comment, this will help me to keep this blog alive. Thank you!