Search code examples
csshoverdiagonal

CSS - diagonal split hover effect

Is possible to do diagonal splitted background (as on the image) only by css (without background image)?Diagonal hover effect in the menu

Solution

  • Something like this?

    If this is the desired style, you can find more info on w3schools and MDN

    .btn {
  width: 250px;
  height: 60px;
  margin: 25px;
  border-radius:4px;
  background: linear-gradient(to bottom right, rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%);
}
    <button class="btn">Button
</button>