CSS diagonal split button

css-diagonal-split-button.markdown

CSS diagonal split button

CSS two button that is split diagonally in the middle. Perfect for providing simple button options, i.e. Save\Delete.

A Pen by Nathan White on CodePen.

License.

index.html

<h1>CSS SPLIT BUTTON</h1>

<div id="btn_cont">
  <div class="btn">
    <span>BTN 1</span>
  </div>
   <div class="btn">
    <span>BTN 2</span>
  </div>
</div>

style.css

body{
  background-color: #222;
}
H1{
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  width: 100%;
  text-align: center;
}

#btn_cont{
  position: relative;
  margin: 0 auto;
  margin-top: 10%;
  /* NOT IMPORTANT */
  
  width: 300px;
  border: 2px solid #fff;
  height: 30px;
}
.btn{
  display: block;
  position: absolute;
  float: left;
  width: 141px;
  height: 0;
  cursor: pointer;  
}
.btn:nth-child(1){
  border-bottom: 30px solid #c74523;
  border-right: 20px solid transparent;
  left: 0px;
  z-index: 1;
}
.btn:nth-child(1):hover{
  border-bottom: 30px solid #fff;
  color: #c74523;
}
.btn:nth-child(2){
  border-left: 20px solid transparent;
  border-top: 30px solid #c74523;
  right: 0px;
  z-index: 2;
}
.btn:nth-child(2):hover{
  border-top: 30px solid #fff;
  color: #c74523;
}

.btn:nth-child(2):before{
  border-right: 2px solid #fff;
  content: "";
  height: 40px;
  position: absolute;
  right: 150px;
  top: -35px;
  transform: rotate(-34deg) translateZ(0px);
}
.btn span{
  position: relative;
  float: left;
  top: 7px;
  width: 100%;
  height:auto;
  text-align: center;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  margin: 0px;
  padding: 0px;
}
.btn:hover span{
  color: #c74523;
}
.btn:nth-child(2) span{
   top: -23px;

}