Making responsive CSS buttons from image and text

[jakebonusmedia]

Hello all.

I’ll start by apologising if my question is stupid. My background is in graphics I’m completely new to web design. I have done my best to work things out for myself, but we all need a bit of help now and then, so any advice would be very much appreciated.

So my problem is that I am trying to create responsive CSS buttons using custom images for this new wordpress site:

http://www.flyinglessons.co.uk

An example of how I want the buttons to look like is the image here:
http://www.flyinglessons.co.uk/wp-content/uploads/2015/02/button-eg.jpg

Which I have been able to achieve using the following code:
http://codepen.io/jakebonusemedia/pen/wBXWgy.html

(the [column] shortcodes are for wordpress columns plugin)

However this is not responsive, obviously. I have used a plugin “Standout-CSS3-Buttons” to create text buttons with preset graphics on other areas of the site, but I’d like to be able to turn any image into a button with editable text rather than adding text in photoshop.

I’m sure there’s a good way of doing this but I have not been able to find it.

Many thanks in advance for any advice!

[Paulie_D]

I don’t know if it’s my browser/connection here or what but I’m getting a security error from those links

This server could not prove that it is flyinglessons.co.uk; its security certificate is from casinomobile.co.uk. This may be caused by a misconfiguration or an attacker intercepting your connection.

[jakebonusmedia]

I have no idea why that is happening, I have checked and links to my site from other sites are all working normally. It only seems to be this forum. Does the link work if you copy&paste to url bar?

[jakebonusmedia]

It seems as though this forum is making the links “https” rather than “http”, am I doing something wrong here?

[Paulie_D]

It seems as though this forum is making the links “https” rather than “http”, am I doing something wrong here?

I noticed that this morning…I’ll take it up with Chris…it may be a site thing.

[jakebonusmedia]

Cheers :)

[jakebonusmedia]

Ok, so after many hours fiddling I have managed to make this work and be responsive. I’ve probably used the most long winded and inelegant way of doing it, so I’d still be interested to know if anyone has a better way I could’ve used.

If anyone’s interested the code I ended up using is here:
http://codepen.io/jakebonusemedia/pen/gbKggx.html

And here’s the finished result working hopefully on my page:
http://flyinglessons.co.uk

Thanks :)

[JessicaTeller]

Hi. Your question got my attention and it’s pretty amazing you solved it by yourself. I actually learned from it as well. The codes you used was perfectly fine and gladly it worked so well. I am working on with my website as well and i will try this one if it would make my website looks better and efficient. Nice work! @jakebonusmedia

[Author]

Posts