Button & Corner SHIFT

by firegroove

HTML

<button class="myCorner myCorner_2">
HELLO !!
</button>

CSS

button {
  height: 30px;
  width: 90px;
  font-size:0.7rem;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  margin: 30px auto;
  background: white;
  /* border: 1px solid lime; */
}

.myCorner_2:before {
  content: "";
  position: absolute;
  top: -70px;
  right: -90px;
  height: 100px;
  width: 100px;
  transform: rotate(45deg);
  background: red;
  /* border: 1px solid lime; */
}


.myCorner_2:hover {
  color:white;
  background: darkblue;
  /* border: 1px solid cyan; */
}
.myCorner_2:hover:before {
  background: white;
  /* border: 1px solid cyan; */
}
.myCorner:before {
  content: "";
  position: absolute;
  top: -70px;
  right: 80px;
  height: 100px;
  width: 100px;
  transform: rotate(-45deg);
  background: blue;
  border: 1px solid lime;
}
.myCorner:hover {
  color:white;
  background: darkblue;
  border: 1px solid cyan;
}
.myCorner:hover:before {
  background: white;
  border: 1px solid cyan;
}

/***********FOR DEMO ONLY*******************/


html, body {
    margin:0;
    padding:0;height:100%;
    vertical-align:top;overflow:hidden;
    background: rgb(79, 79, 79);
    background: -moz-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(79, 79, 79, 1)), color-stop(100%, rgba(34, 34, 34, 1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
    background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f', endColorstr='#222222', GradientType=1);
}