HEXAGON

by olimann

HTML

<h1>Titre de la page</h1>
<a id="btn" class="btn hexag">i</a>

CSS

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,700,300,100);


body{
  text-align : center;
    background-color: #efefef;
}
h1, h2, h3, h4, h5 {
    font-family: "Montserrat",Arial,sans-serif;
    font-weight: 400;

}
h1 {
    font-weight: 700;
    font-size: 2.75em;
    margin: 0 0 30px;
    line-height: 1;
 
}

/**/

.hexag {
    font-family: "Roboto Slab",Arial,sans-serif;
    font-weight: 700;
    font-size: 2em;
    line-height: 30px;
    color: #efefef;
}
.hexag {  
  position: relative;
  width: 52px; 
  height: 30px;
  background-color: #16232e;
  margin: 50px 0;    
  display: inline-block;
  text-align: center;
  text-decoration: none;    
    
}

.hexag:before,
.hexag:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 26px solid transparent;
  border-right: 26px solid transparent;
  left: 0;
  
}

.hexag:before {
  bottom: 100%;
  border-bottom: 15px solid #16232e;
}

.hexag:after {
  top: 100%;
  width: 0;
  border-top: 15px solid #16232e;
}


#btn {
    -moz-transition: -moz-transform .5s ease;
    -webkit-transition: -webkit-transform .5s ease;
    -o-transition: -o-transform .5s ease;
    transition: transform .5s ease;
    cursor: pointer;
    
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -o-user-select: none;
    user-select: none;
}

#btn.action {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
}

JavaScript

$("#btn").click(function() {
  $(this).toggleClass("action");
  $(".collapsed").stop().slideToggle();
    
   
});