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

Answers


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


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

Search




Leave an answer