LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Sweet button, dude...

I bet you can't click just once.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id sodales purus, a tempor mi. Nullam ac laoreet tortor. Vivamus ut congue neque, id rhoncus libero. Phasellus et accumsan diam. Pellentesque interdum urna eros, in venenatis lorem tincidunt a. Pellentesque euismod velit sed nunc consectetur vulputate. Sed posuere est id convallis elementum. Phasellus accumsan iaculis est, eu auctor purus mattis non. Phasellus pharetra ex ac lacus ullamcorper, eget tempus augue hendrerit. Vestibulum vitae lorem augue. Maecenas consectetur tempor turpis, nec imperdiet libero blandit ac. Mauris dignissim purus eu euismod mattis.

Nulla eu condimentum eros. Curabitur vel metus in magna fringilla congue. Cras ac dictum lectus, vitae imperdiet libero. Mauris et neque nibh. Etiam auctor urna purus, in consectetur enim fermentum eget. Vivamus tincidunt massa sapien, sed fermentum lectus laoreet sed. Donec porttitor lacus sit amet metus facilisis, ac pretium magna venenatis. Ut libero nisi, volutpat id auctor at, congue in dui. Integer turpis sapien, cursus eu magna vel, posuere bibendum sapien.

Nulla accumsan leo quis volutpat rhoncus. Integer nec porttitor ante, quis pharetra ipsum. Vivamus nulla nunc, commodo at commodo vel, placerat quis orci. Phasellus porta, purus vel ornare luctus, lorem nunc molestie nisi, sed fermentum purus nulla vel est. Nullam purus velit, vestibulum non velit sit amet, elementum auctor mauris. In non lobortis tellus. Maecenas fringilla, turpis eget luctus aliquam, sem ligula varius magna, sit amet dignissim tellus erat non neque. Fusce dignissim ipsum sed orci aliquam, a molestie magna egestas. In hac habitasse platea dictumst. Curabitur vel rhoncus elit, quis vulputate augue. Pellentesque ac pellentesque diam, eu feugiat velit. In sagittis ipsum eu velit malesuada, sed iaculis dui euismod. Vestibulum tempus metus et mollis posuere. Etiam lacinia, tellus vitae porttitor vulputate, neque purus rutrum lorem, non vehicula metus augue eu elit. Integer quis turpis quis justo molestie ultricies nec semper enim. In hac habitasse platea dictumst.

CSS
body {
  margin: 0;
}
h1 {
  padding: 0;
  margin: 0;
  color: white;
  font-weight: lighter;
  font-family: 'Open sans', sans-serif;
  left: 15%;
  top: 50px;
  font-size: 2.5em;
  position: absolute;
}
h2 {
  font-family: 'open sans', sans-serif;
  font-weight: lighter;
  color: #fff;
  opacity: .5;
  position: absolute;
  left: 15%;
  top: 90px;
}
header {
  position: relative;
  width: 100%;
  height: 200px;
  background-color: #3f51b5;
}
header .btn-multi {
  position: absolute;
  z-index: 999;
  right: 15%;
  bottom: -54px;
}
.btn {
  display: inline-flex;
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
  justify-content: center;
  align-items: center;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  padding: 8px 20px;
  font-size: 14px;
  background-color: #E91E63;
  border-radius: 2px;
  color: white;
  text-transform: uppercase;
  border: none;
  transition: all 0.2s ease-in;
  background-position: 50%;
  outline: none !important;
}
.btn.btn-circle {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  padding: 0 !important;
  font-size: 18px;
}
.btn-multi input {
  display: none;
}
.btn-multi input:not(:checked) ~ label {
  transform: rotate(0);
}
.btn-multi input:not(:checked) ~ label .btn {
  border-radius: 0;
  height: 30px;
  width: 30px;
  box-shadow: none;
}
.btn-multi input:not(:checked) ~ label .btn:first-child {
  border-top-left-radius: 100%;
  transform: translate(25px, 25px);
}
.btn-multi input:not(:checked) ~ label .btn:nth-child(2) {
  border-top-right-radius: 100%;
  transform: translate(55px, 25px);
}
.btn-multi input:not(:checked) ~ label .btn:nth-child(3) {
  border-bottom-left-radius: 100%;
  transform: translate(25px, 55px);
}
.btn-multi input:not(:checked) ~ label .btn:nth-child(4) {
  border-bottom-right-radius: 100%;
  transform: translate(55px, 55px);
}
.btn-multi input:not(:checked) ~ label .btn .icon {
  opacity: 0;
}
.btn-multi input:not(:checked) ~ label > .icon {
  opacity: 1;
  cursor: pointer;
}
.btn-multi label {
  position: relative;
  height: 110px;
  width: 110px;
  display: block;
  transform: rotate(45deg);
  transition: all 0.2s ease-in;
  cursor: default;
}
.btn-multi label .btn {
  position: absolute;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.btn-multi label .btn:nth-child(2) {
  transform: translate(60px, 0);
}
.btn-multi label .btn:nth-child(3) {
  transform: translate(0, 60px);
}
.btn-multi label .btn:nth-child(4) {
  transform: translate(60px, 60px);
}
.btn-multi label .btn .icon {
  opacity: 1;
  transition: all 0.15s ease-in-out;
  transform: rotate(-45deg);
}
.btn-multi label > .icon {
  color: white;
  position: absolute;
  border-radius: 50%;
  display: flex;
  font-size: 30px;
  align-items: center;
  justify-content: center;
  height: 60px;
  width: 60px;
  top: 25px;
  left: 25px;
  opacity: 0;
  transition: all 0.25s ease-in-out;
}
.btn-multi label .icon {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
main {
  position: absolute;
  left: 15%;
  right: 15%;
  top: 250px;
  margin-bottom: 50px;
  font-family: 'open sans', sans-serif;
  font-weight: lighter;
}
Host Instantly Drag and Drop Website Builder

 

Description

Using Pure CSS to create a multi-functional button out of a single button from checkbox events. --LOOKS BEST ON CHROME (of course..)
Term
Mon, 11/27/2017 - 21:59

Related Codes

Pen ID
Pen ID
Pen ID