how to make something into a button

[Alecar983]

http://codepen.io/Alecar983/pen/ZQMXzL

Hey can someone help me make this hexagon have the black bit transparent so you can see the back ground and also make it so it opens a link?

The website is pipanel.co.uk/test.html and I want to make the button link to pipanel.co.uk

[Paulie_D]

Frankly….you’re putting a lot of work (and divs) into something that could be done with an SVG much more efficiently.

[Alecar983]

Well I’m pretty new to this, I really don’t know what I’m doing. What’s an svg??

[Paulie_D]

Try seaching this site for SVG…they’re awesome.

[bearhead]

To make the black background transparent you can replace the background:#000000 on .hex-inner with background: rgba(0,0,0,.75);
The “.75” controls the level of opacity, so 1 is totally opaque, and 0 is totally transparent.

To get the whole thing to be a link, you can simply wrap it in an anchor element, same way you’d make anything else a link ;)

[koenigsegg1]

SVG stands for Scalable Vector Graphics (Wikipedia). W3Schools has some good info on how to start using SVG.

Anyway, to answer your original question you need to wrap .frame in an anchor tag a with a href value of the page your wanting to go to.

<a href="http://pipanel.co.uk/test.html">
  <div class="frame">
      <div class="hex-outer h1"></div>
      <div class="hex-outer h2"></div>
      <div class="hex-outer h3"></div>
      <div class="hex-inner h1"></div>
      <div class="hex-inner h2"></div>
      <div class="hex-inner h3"></div>
      <div class="label">+</div>
    </div>
</a>

[Paulie_D]

To make the black background transparent you can replace the background:#000000 on .hex-inner with background: rgba(0,0,0,.75);

This, of course, will only show the background of the hex-outer divs underneath..which I suspect is not what the OP wants.

[koenigsegg1]

If you want to make it look transparent, you could just make it a slightly darker color like #3C013C. If you actually make it transparent, it will make a weird pattern like @Paulie_D said.

[Alecar983]

I just want it to be the same as the background of the whole webpage so it matches with it, I realise making it transparent probably won’t work.the webpage background is like a starry space picture so if it didn’t match up it would look really weird.

[Alecar983]

like when i use this http://codepen.io/Alecar983/pen/dGqgbK?editors=0100 it doesn’t match up with the background but it has the background, is there anyway to make it mimic the background behind it?

[koenigsegg1]

It may be easier for you to just use an image like this SVG I made. I used Inkscape, a free WYSIWYG vector graphics editor. Just save the image, upload it to your server, and reference it in your website.

[Paulie_D]

It may be easier for you to just use an image like this SVG I made.

Did you notice the effect when you hover the original Codepen (which now is broken it seems)….this is not just a simple shape…it’s quite complex.

Definitely, something for SVG though…just harder than you might think.

[koenigsegg1]

Yes, @Paulie_D. I did see that but I’m not so good with inline SVG, so I thought I’d give him a quick fix.

[Alecar983]

I just want a website that has these hexagon buttons that when hovered have a effect and when pressed become translated so it looks like it has been pressed. And obviously has to link somewhere.

I want it to look like this, I made this in photoshop btw, http://imgur.com/nn0ufrA

[bearhead]

I think you’re probably going to need to use svg for the outlined hexagons. There is probably a way to finagle it with just css, but it’s going to be messy and very prone to breaking.

To get the morphing animation you might try greensock’s morphsvg: http://greensock.com/morphSVG

I’ve never animated with that plugin before, so I can’t really give you much more help than that.

Here is a demo of it at it’s most basic (no morphing animation):
http://codepen.io/kvana/pen/NxLewJ

[Author]

Posts