Hexagon Shape How to?

Design help General
1

Rather than having a button in the shape of a circle or a square, is there a way to create a Hexagon, or do I need to hardcode the CSS into my template?

Thanks!

https://preview.webflow.com/preview/cannes?preview=a856b3f358f0c0b3874c29203bd84e92

2

It can be done but you’ll either need to use multiple DIV’s to get what you want :

https://jtauber.github.io/articles/css-hexagon.html

or use some code outside of webflow in your site settings to get it as one DIV :

http://csshexagon.com

I believe they’re the best ways of getting what you want here.

Hope that helps a bit. Also hope that someone comes in and tells me there is a way of doing it just inside Webflow without any jiggery pokery :wink:

Best wishes,

Mark

1 Like
3

Absolutely beautiful design you’ve got going on there by the way.

Is that something you designed yourself or started from a template?

Best wishes,

Mark

1 Like
4

Aw! Thank you Mark :slight_smile: - I’ve changed the template up a bit thus far, but it is originally one of the Webflow templates that they offer! I really dig it as well.

5

Thank you! I hope there is an easier way as well, but thanks for this!

6

Yep looking really nice. I really love those effects where when you hover over an image and the image scales up and goes darker and the text fades in over it. Trying to recreate that myself at the moment and have the image part working so far, now for the text which is causing me some headaches at the moment.

Anyway, hopefully someone else can pop in with a better answer.

Wishing you all the best with the site. It’s going to be a brilliant one I can tell!

Best wishes,

Mark

7

Thank you! :smiley: I hope the end result is magical. Also, as for your issue, I’m pretty sure that all you would need to do is add some sort of an overlay with the text inside it, and add a hover interaction? This video may help…

8

Hi Hannah (hope that’s your first name although I may be wrong?),

Thanks for that video link, will take a look at it later on.

I did actually get my animations working in the end in much the way you mentioned. The problem I was having was because I was trying to do it without interactions and instead just with the standard hover transition which wouldn’t have any of it unfortunately.

Thanks again!

Best wishes,

Mark

1 Like
9

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.