I'm trying to stay away from images as much as possible because the nature of my blog means the content is already pretty image heavy. So as to not increase load times beyond that, I'm trying to minimize image sizes for the blog layout, because afterall those are the images that are loaded every.single.time a page on my blog is loaded. Make sense?
I wanted simple yet unique social media buttons. Not just a circle, not just a square, definetely not a bunting as that is being done wayyyy too much, but something different. After a lot of searching and pondering, this idea came into my head: a square with 2 facing corners that are rounded. And a border. And a radial gradient to up the fanciness :)
I used this article to help make it responsive. In the end, the tutorial was more complicated than it needed to be, and well, didn't even work. But I couldn't have figured it out without it, so it's worth a mention.
Basically all you need to do is set the width in %, set the height to 0, set the TOTAL padding equal to the width in %. Because there's text that I want centered in the shape, I set the padding-top first, then the padding-bottom for it to look like it's even on all sides. Of course you complicate things if you put a border, but again you can just use the border-box trick I mention here.
Then, round 2 opposing corners (I rounded by 40%, so they remain responsive), add radial gradient, and you're done. Each button is a seperate span element. I will need to change the font so the actual icons appear, but you get the idea.
Still need to add a hover effect, which might be a text-shadow, or invert the radial gradient direction.
No comments:
Post a Comment