Happy Envelop Buttons

In this example below you will see how to do a Happy Envelop Buttons with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by schooolman, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright schooolman ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Happy Envelop Buttons</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="content">
  <div class="buttonVersionOne"></div>

  <a href="ww.jakeschoolmeesters.com">
    <div class="squareButton">
    <div class="flap">
      <p>Schoolman!</p>
    </div>
      <h3>About</h3>
    </div>
  </a>
<!--   <div class="longButtonTwo"></div> -->
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/schooolman/happy-envelop-buttons-aBbOMa */
.buttonVersionOne {
  float: left;
  display: block;
  margin: 50px;
  width: 300px;
  height: 100px;
  cursor: pointer;
  background: #000099;
  color: #FFF;
  border-radius: 5px;
  transition: all 300ms ease-out;
}
.buttonVersionOne h3 {
  display: block;
  width: 200px;
  z-index: 10;
  margin: 0 auto;
  line-height: 100px;
  font-family: helvetica;
  font-weight: 100;
  font-size: 22px;
}
.buttonVersionOne:before {
  content: "Hover Button Animation";
  font-family: helvetica;
  margin: 0 auto;
  text-align: center;
  line-height: 100px;
  font-weight: 100;
  font-size: 22px;
  position: relative;
  display: block;
  top: 0;
  z-index: 10;
  width: 300px;
  height: 90px;
  border-radius: 5px 5px 90px 90px;
  background-color: #339900;
  border-bottom: 0 solid #339999;
  transition: border 250ms ease-out;
}
.buttonVersionOne:after {
  content: "";
  display: block;
  position: relative;
  border-radius: 5px 5px 0 0;
  top: -90px;
  width: 300px;
  height: 90px;
  background-color: #339900;
  transform-origin: top center;
  transition: transform 150ms ease-out;
}
.buttonVersionOne:hover {
  background-color: #007a99;
  transition: all 300ms ease-out;
}
.buttonVersionOne:hover:after {
  transform: scaleY(0.2);
  transform-origin: top center;
  transition: transform 250ms ease-out;
}
.buttonVersionOne:hover:before {
  border-bottom: 2px solid #339999;
  transition: border 250ms ease-out;
}

.squareButton {
  height: 100px;
  width: 100px;
  float: left;
  background-color: #fff;
  border: 2px solid #ff9933;
  border-radius: 2px;
  display: block;
  margin: 50px;
  text-align: center;
  overflow: hidden;
}
.squareButton h3 {
  color: #ff9933;
  display: block;
  position: relative;
  top: -85px;
  font-family: helvetica;
  font-weight: 100;
  line-height: 100px;
  transition: transform 100ms linear;
}
.squareButton .flap {
  height: 0;
  width: 0;
  left: -30px;
  top: -30px;
  position: relative;
  transition: transform 100ms linear;
  border-top: 80px solid #f7f750;
  border-left: 80px solid transparent;
  border-right: 80px solid transparent;
}
.squareButton .flap p {
  font-family: helvetica;
  color: #ff9933;
  position: relative;
  display: block;
  left: -42px;
  top: -81px;
}
.squareButton:hover {
  cursor: pointer;
}
.squareButton:hover .flap {
  transform: translateY(25px);
  transition: transform 200ms ease;
}
.squareButton:hover h3 {
  transform: translateY(25px);
  transition: transform 200ms ease;
}

.longButtonTwo {
  width: 200px;
  height: 100px;
  display: block;
  background: skyblue;
  float: left;
}

.content {
  display: flex;
  justify-content: center;
  width: 90%;
  margin: 0 auto;
}

a {
  text-decoration: none;
}

body {
  background: #333333;
}

Comments