Folding Button

Developer
Hornebom
Size
4,346 Kb
Views
28,336
  1. Folding Button Previews
  2. Folding Button HTML Codes
  3. Folding Button CSS Codes

How do I make an folding button?

My inspiration for this button comes from a design concept by Dan Mall for the new RIF website. Follow the link for more information about his work. http://danielmall.com/articles/rif-element-collages/. What is a folding button? How do you make a folding button? This script and codes were developed by Hornebom on 12 August 2022, Friday.

Folding Button Previews
IQ Test

Folding Button - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Folding Button</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <article> <a class="btn-fold-1" href="#"> <span>Donate</span><span>to RIF</span> </a>
</article>
<article> <a class="btn-fold-2" href="#"> <span>Don</span><span>ate</span> </a>
</article>
<article> <p>A while ago I read <a href="http://danielmall.com/articles/rif-element-collages/">this article</a> by Dan Mall about the design process he went through as he was working on the new website for <a href="http://www.rif.org/">Reading Is Fundamental</a> (if you're fond of design, you should definitely take some time and look into his writings). One thing I couldn't get out of my head was his concept for the CTA button. I'm not sure if anyone else already coded this one, but here are my versions. The first one is an interpretation, while the second one tries to be as close as possible to the original sketch.</p>
</article>
</body>
</html>

Folding Button - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Droid+Serif|Varela+Round);
*, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box;
}
body { text-align: center; font-family: 'Droid Serif', serif; background-color: #fafafa;
}
article { padding: 10rem 1rem; border-bottom: 1px solid #ebeaea;
}
article p { display: block; max-width: 50rem; margin: 0 auto; color: grey; text-align: left; font-size: 1.2rem; line-height: 1.7rem;
}
article p::-moz-selection { color: black; background-color: #fae900;
}
article p::selection { color: black; background-color: #fae900;
}
article p a { color: #0079c2; text-decoration: none; -webkit-transition: all .15s; transition: all .15s;
}
article p a:hover { background-color: #fae900; color: black;
}
article p a::-moz-selection { color: black; background-color: #fae900;
}
article p a::selection { color: black; background-color: #fae900;
}
.btn-fold-1 { position: relative; display: inline-block; width: 28rem; z-index: 1; font-family: 'Varela Round', sans-serif; text-decoration: none; font-size: 2.5rem; color: black; text-transform: uppercase; letter-spacing: 0.1rem; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 800px; perspective: 800px; -webkit-perspective-origin: 50% 200%; perspective-origin: 50% 200%; -webkit-transform: translateX(-25%) translateZ(0); transform: translateX(-25%) translateZ(0); -webkit-transition: -webkit-transform 0.8s; transition: -webkit-transform 0.8s; transition: transform 0.8s; transition: transform 0.8s, -webkit-transform 0.8s;
}
.btn-fold-1 span { position: relative; display: block; width: 50%; float: left; padding-top: 1rem; padding-bottom: .7rem; text-align: right;
}
.btn-fold-1 span:last-child { z-index: 2; padding-right: 1rem; padding-left: .6rem; text-align: left; background-color: #fae900;
}
.btn-fold-1 span:first-child { z-index: 3; padding-right: .6rem; padding-left: 1rem; pointer-events: none; background-color: #fae900; -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform: rotateY(179.9deg); transform: rotateY(179.9deg); -webkit-transition: -webkit-transform 0.4s ease-in-out; transition: -webkit-transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;
}
.btn-fold-1 span:first-child:before { content: 'Donate'; position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding-top: 1rem; z-index: 4; color: white; text-align: center; background-color: #0079c2; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-transition: color 0s 0.2s, background-color 0s 0.2s; transition: color 0s 0.2s, background-color 0s 0.2s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
}
.btn-fold-1:hover { -webkit-transform: translateX(0) translateZ(0); transform: translateX(0) translateZ(0);
}
.btn-fold-1:hover > span:first-child { -webkit-transform: rotateY(0); transform: rotateY(0);
}
.btn-fold-1:hover > span:first-child:before { color: transparent; background-color: transparent;
}
.btn-fold-2 { position: relative; display: inline-block; width: 14rem; z-index: 1; font-family: 'Varela Round', sans-serif; color: white; text-decoration: none; font-size: 2.5rem; text-transform: uppercase; letter-spacing: 0.1rem; background-color: #0079c2; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateX(0.5rem); transform: translateX(0.5rem); -webkit-transition: background-color 0s 0.2s ease-in-out; transition: background-color 0s 0.2s ease-in-out;
}
.btn-fold-2 span { position: relative; width: 50%; float: left; padding-top: 1rem; padding-bottom: .7rem; pointer-events: none; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 400px; perspective: 400px; -webkit-perspective-origin: 50% 200%; perspective-origin: 50% 200%;
}
.btn-fold-2 span:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transition: opacity 0s 0.2s ease-in-out, -webkit-transform 0.4s; transition: opacity 0s 0.2s ease-in-out, -webkit-transform 0.4s; transition: transform 0.4s, opacity 0s 0.2s ease-in-out; transition: transform 0.4s, opacity 0s 0.2s ease-in-out, -webkit-transform 0.4s;
}
.btn-fold-2 span:first-child { z-index: 3; opacity: 1; text-align: right; background-color: #0079c2; box-shadow: -1rem 0 0 #0079c2; -webkit-transition: opacity 0s; transition: opacity 0s;
}
.btn-fold-2 span:first-child:after { content: 'ate'; opacity: 1; padding-top: 1rem; text-align: left; background-color: #0079c2; -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transform: translateX(100%) rotateY(0); transform: translateX(100%) rotateY(0);
}
.btn-fold-2 span:last-child { z-index: 2; text-align: left; color: black; background-color: #fae900;
}
.btn-fold-2 span:last-child:after { content: 'don'; opacity: 0; padding-top: 1rem; text-align: right; background-color: #fae900; box-shadow: -1rem 0 0 #fae900; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform: translateX(-100%) rotateY(180deg); transform: translateX(-100%) rotateY(180deg);
}
.btn-fold-2:hover { background-color: #fae900;
}
.btn-fold-2:hover > span:first-child { opacity: 0; -webkit-transition: opacity 0s 0.4s; transition: opacity 0s 0.4s;
}
.btn-fold-2:hover > span:first-child:after { opacity: 0; -webkit-transform: translateX(100%) rotateY(-180deg); transform: translateX(100%) rotateY(-180deg);
}
.btn-fold-2:hover > span:last-child:after { opacity: 1; -webkit-transform: translateX(-100%) rotateY(0.1deg); transform: translateX(-100%) rotateY(0.1deg);
}
Folding Button - Script Codes
Folding Button - Script Codes
Home Page Home
Developer Hornebom
Username Hornebom
Uploaded August 12, 2022
Rating 4.5
Size 4,346 Kb
Views 28,336
Do you need developer help for Folding Button?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Hornebom (Hornebom) Script Codes
Name
Radio click through
Pew
Rocker Switch
PPDC Button
Lamp
MovieScript
Splitted Layout
Dancing Joseph Butler
Curved Cut
Perspective Scrolling in CSS
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!