I want to create buttons as seen in the following picture. But I don't have any idea, on how to reach this. So the buttons shouldn't simply be rotated, but the horizontal edges shall remain horizontal. Can someone give me a hint or a keyword for this issue?
Thanks!
The easiest way to create that sort of thing in the modern web is to use a clip path. Something like:
clip-path: polygon(0 10%, 100% 0%, 100% 90%, 0% 100%);
Pair that with a transform: rotate on the text and voila.
It looks like your screenshot comes from a website. You can use the dev tools to inspect the buttons to see how they did it.
You can use the transform: skew CSS proportion to skew the whole container.
It retains all functionality of the buttons, including hover effects etc.
Transform is a really powerful option in CSS. Here is a little article on w3schools about it: Link
If you only want to rotate it(It's a bit hard to see if it is just rotated or skewed), something like an absolute positioned after element applied to the container with a transform: rotate might be an option, which will not rotate or move the buttons.