Home Ask Login Register

Developers Planet

Your answer is one click away!

P. Danek February 2016

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


Chris February 2016

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;
  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

Patrick Knudsen February 2016

Yeah- use gradiant, if you dont want background img.

you can use this generator if you want http://www.colorzilla.com/gradient-editor/

Post Status

Asked in February 2016
Viewed 1,825 times
Voted 9
Answered 2 times


Leave an answer

Quote of the day: live life