Clickable area Shapes/Drawing tool

Mary Abigail · Post by **Mary Abigail** » Sat Jan 20, 2024 3:38 am

Hi

i want to create some buttons with WWB drawing tool (design my own buttons) and also use shapes as buttons, but i just want the click area to be limited to the shape/drawing itself. That being said, i have a vague idea that using the CSS overflow: hidden property and also the clip-path property (depending on the complexity of the shape, etc) can be used to create this effect. My question is:
is there an easy way to do this in WWB, i mean for each shape/drawing i create? the only thought that occurs to me is using the HTML object to achieve this goal but then again that is not very pratical...

thank you

Post by **Pablo** » Sat Jan 20, 2024 7:42 am

WWB will generate shapes as clip-path if you select CSS as output.
However, the links of shape will always be a rectangle, even if you use clip-path or overflow hidden.

Mary Abigail · Post by **Mary Abigail** » Sat Jan 20, 2024 7:26 pm

Hi Pablo

i can show you an example with the help of AI so you can see by yourself what i intend to do, here it goes

HTML

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Your Awesome Website</title>
</head>
<body>

  <a href="#" class="star-button">
    <img src="button.jpg" alt="Clickable Star Button">
  </a>

</body>
</html>

CSS

Code: Select all

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.star-button {
  display: inline-block;
  position: relative;
  width: 300px; /* Adjust the size as needed */
  height: 226px; /* Adjust the size as needed */
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.star-button img {
  display: block;
  width: 100%; /* Ensures the image takes up the full space within the star button */
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
}

is this possible within WWB?

thank you once again

Mary Abigail · Post by **Mary Abigail** » Sat Jan 20, 2024 7:28 pm

Image link to use with the code:

https://ibb.co/7CdV9jf

Post by **Pablo** » Sun Jan 21, 2024 7:56 am

You can use a Shape with output set to 'css' to generate clip-path shapes.
A shape can also have a background image.
You can make it 'clickable' via events.

Mary Abigail · Post by **Mary Abigail** » Sun Jan 21, 2024 2:56 pm

Pablo wrote: ↑Sun Jan 21, 2024 7:56 am You can use a Shape with output set to 'css' to generate clip-path shapes.
A shape can also have a background image.
You can make it 'clickable' via events.

Hi Pablo

i've tried it out, but then again it's not clickable only inside the shape itself, it is clickable outside as well, outside it's vertices and edges, that is not what i want it to do

Post by **Pablo** » Sun Jan 21, 2024 3:10 pm

Sorry, this is how it works.

crispy68 · Post by **crispy68** » Sun Jan 21, 2024 3:29 pm

I quickly looked at the code you provided versus what I see WB generates and it looks to me that the clip-path in your example is being applied to the actual <a> tag where WB applies it to the image div.

Mary Abigail · Post by **Mary Abigail** » Sun Jan 21, 2024 3:57 pm

crispy68 wrote: ↑Sun Jan 21, 2024 3:29 pm I quickly looked at the code you provided versus what I see WB generates and it looks to me that the clip-path in your example is being applied to the actual <a> tag where WB applies it to the image div.

Hi Crispy

Yes, correct. I've tried out other irregular shapes and it does not work, i mean, there's a set of "official" shapes that will work as excpected, but not all. I'm not a pro at code, but i love to learn and i always wanted to do this for a long time. Thank you

Post by **Pablo** » Sun Jan 21, 2024 4:54 pm

Unfortunately, WWB's shape is not as simple as the one in your example.
For example, WWB's shape is responsive in fixed layouts and flexible in layout grids and much more.
When applying the clip-path to the link, this will no longer work.

But, I will investigate if events can be moved to the inner div, then it's no longer necessary to add the anchor wrapper for events. And it would be possible can make it clickable without using a link.
Although, I am not sure if this will break existing functionality...

Mary Abigail · Post by **Mary Abigail** » Sun Jan 21, 2024 5:19 pm

Pablo wrote: ↑Sun Jan 21, 2024 4:54 pm Unfortunately, WWB's shape is not as simple as the one in your example.
For example, WWB's shape is responsive in fixed layouts and flexible in layout grids and much more.
When applying the clip-path to the link, this will no longer work.

But, I will investigate if events can be moved to the inner div, then it's no longer necessary to add the anchor wrapper for events. And it would be possible can make it clickable without using a link.
Although, I am not sure if this will break existing functionality...

I see. That would be awesome specially in all sorts of shapes, but i suppose it's not possible in all of them, just in some. Here's a website i visited some time ago that shows you the shapes where clip-path will work. I know it will be possible to apply something similar to clip-path in every shape you create in a near future with some kind of web technology, but maybe that evokes some existent (or new) JavaScript library, etc.. !? this is just a thought of mine

Here's the website:
https://bennettfeely.com/clippy/

www.wysiwygwebbuilder.com

Clickable area Shapes/Drawing tool

Clickable area Shapes/Drawing tool

Re: Clickable area Shapes/Drawing tool

Re: Clickable area Shapes/Drawing tool

Re: Clickable area Shapes/Drawing tool

Re: Clickable area Shapes/Drawing tool

Re: Clickable area Shapes/Drawing tool

Re: Clickable area Shapes/Drawing tool

Re: Clickable area Shapes/Drawing tool

Re: Clickable area Shapes/Drawing tool

Re: Clickable area Shapes/Drawing tool

Re: Clickable area Shapes/Drawing tool