Bordered button with slated corner with CSS

Question

I'm trying to achieve the bordered button with slated (with turned page effect) corner with CSS, example:

http://jsfiddle.net/dmxt/75Fkv/

HTML:

<a class="btn-note" href="#" role="button">gratis prøve</a>

CSS:

.btn-note {
    font-family: sans-serif;
    font-size: 36px;
    position: relative;
    border: solid 5px #00ABE2;
    color: #00ABE2;
    padding: 10px 80px 10px 10px;
    text-decoration: none;
    text-transform: uppercase;

}

.btn-note:before {
   content: "";
   position: absolute;
   bottom: -2px;
   right: -2px;
   border-width: 30px 30px 0 0;
   border-style: solid;
   border-color: #00ABE2 rgba(0,0,0,0);

}

.btn-note:hover {
    text-decoration: none;
    color: #fff;
    border-color: #fff;
}

Thanks, I hope I could get it answered. I've been trying for a long time. Thanks!

Answer 1

There are at least 3 ways to achieve this (using just pseudo-elements, if using addtional HTML elements, we even have more ways to go), each has its own advantage. I would like to introduce 2 ways. The first uses 2 pseudo-elements. The second uses multi-background feature together with one pseudo-element and the calc function (looks like browsers supporting multi-backgrounds feature should also support calc function, and only IE8 is considered to be a fairly old browser which does not support these features).

1. The first solution:

.btn-note {
  font-family: sans-serif;
  font-size: 36px;
  position: relative;
  border: solid 5px #00ABE2;
  border-right:0;    
  color: #00ABE2;
  padding: 10px 50px 10px 10px;
  text-decoration: none;
  text-transform: uppercase;    
}
 /* render the triangle corner */
.btn-note:before {
  content: "";
  position: absolute;
  left:100%;
  bottom:-5px;
  border-width: 15px;
  border-style: solid;
  border-color: inherit;
  border-right-color:transparent;
  border-bottom-color:transparent;
}
 /* render the right border */
.btn-note:after {
  content:'';
  position:absolute;
  box-sizing:border-box;
  width:30px;
  left:100%;
  top:-5px;
  bottom:25px;
  border-width:5px 5px 0 0;
  border-color:inherit;    
  border-style:solid;
}
.btn-note:hover {
  text-decoration: none;
  color: #fff;
  border-color: #fff;   
}
body {
  background:url(http://lorempixel.com/800/600);
}

Demo 1.

2. The second solution:

.btn-note {
  font-family: sans-serif;
  font-size: 36px;
  position: relative;
  border: solid 5px #00ABE2;
  border-right:0;
  border-bottom:0;
  color: #00ABE2;
  padding: 10px 80px 10px 10px;
  text-decoration: none;
  text-transform: uppercase;
  background:linear-gradient(to top, #00abe2,#00abe2),
             linear-gradient(to left, #00abe2, #00abe2);
  background-repeat:no-repeat;
  background-size:calc(100% - 30px) 5px, 5px calc(100% - 30px);
  background-position: left 0 bottom 0, right 0 top 0;
}

.btn-note:before {
  content: "";
  position: absolute;
  right:0;
  bottom:0;
  border-width: 15px;
  border-style: solid;
  border-color: inherit;
  border-right-color:transparent;
  border-bottom-color:transparent;
}

.btn-note:hover {
  text-decoration: none;
  color: #fff;
  border-color: #fff;
  background-image:linear-gradient(to top, #fff,#fff),
                   linear-gradient(to left, #fff, #fff);
}
body {
  background:url(http://lorempixel.com/800/600);
}

Demo 2.

The difference between the 2 solutions is, while the text can be spreaded the whole inner width of the bounding box (with 5px border) using the second solution, the first solution limits the text just inside the actual width of the .btn-note which is about 30px distant from the right edge of the bounding box. That means the second solution is a little better.