Skip to content

Instantly share code, notes, and snippets.

@beseidel

beseidel/css3-animated-buttons.markdown

Created July 20, 2019 20:43
Show Gist options
  • Save beseidel/e029be4f59e063bfab9602ca5ec157f8 to your computer and use it in GitHub Desktop.
Save beseidel/e029be4f59e063bfab9602ca5ec157f8 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 Animated Buttons
Raw
index.html
<h1>CSS3 Animated Buttons</h1>
<p>This is a proof of concept for buttons that switch between two (or possibly more) different contexts.<br>
<p>Switch them all buttons at once <a href="#" id="switch">by clicking here</a></p>
<div class="row">
<div class="button menu">
<div class="line"></div>
</div>
<div class="button menu4">
<div class="line"></div>
</div>
<div class="button menu2">
<div class="line"></div>
</div>
<div class="button menu5">
<div class="line"></div>
</div>
</div>
<div class="row">
<div class="button arrow">
<div class="line"></div>
</div>
<div class="button arrow3">
<div class="line"></div>
</div>
<div class="button arrow2">
<div class="line"></div>
</div>
<div class="button arrow6">
<div class="line"></div>
</div>
<div class="button arrow4">
<div class="line"></div>
</div>
<div class="button arrow5">
<div class="line"></div>
</div>
</div>
<div class="row">
<div class="button plus">
<div class="line"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Raw
script.js
$(function(){
$('.button').click(function(){
$(this).toggleClass('open');
})
$('#switch').click(function(){
$('.button').toggleClass('open');
return false;
})
})
Raw
style.css
body {
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 300;
color: #333;
margin: 40px 60px
}
h1 {
font-size: 3em;
font-weight: 100
}
a {
color: #2980b9;
}
a:hover {
text-decoration: none
}
.row {
overflow: hidden
}
.button {
margin: 40px;
float: left;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.menu {
background: #000;
width: 100px;
height: 100px;
line-height: 95px;
text-align: center;
cursor: pointer;
overflow: hidden;
position: relative;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
.menu:hover {
background: #3498db
}
.menu .line {
width: 40px;
height: 5px;
background: #fff;
display: inline-block;
box-shadow: 0 10px 0 #fff, 0 -10px 0 #fff;
-webkit-transition: all .2s ease;
transition: all .2s ease;
position: relative;
}
.menu .line:after {
-webkit-transition: all .2s ease;
transition: all .2s ease;
display: block;
position: absolute;
content: ' ';
width: 40px;
height: 5px;
background: #fff;
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg)
}
.menu.open:hover {
background: #e74c3c
}
.menu.open .line {
box-shadow: 0 75px 0 #fff, 0 -75px 0 #fff;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu.open .line:after {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg)
}
.menu2 {
background: #000;
width: 100px;
height: 100px;
line-height: 95px;
text-align: center;
cursor: pointer;
overflow: hidden;
position: relative;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
.menu2:hover {
background: #3498db
}
.menu2 .line {
width: 40px;
height: 5px;
background: #fff;
display: inline-block;
box-shadow: 0 10px 0 #fff, 0 -10px 0 #fff;
-webkit-transition: all .2s ease;
transition: all .2s ease;
position: relative;
}
.menu2 .line:after {
-webkit-transition: all .2s ease;
transition: all .2s ease;
display: block;
position: absolute;
content: ' ';
width: 40px;
height: 5px;
background: #fff;
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg)
}
.menu2.open:hover {
background: #e74c3c
}
.menu2.open .line {
box-shadow: 0 10px 30px rgba(255, 255, 255, 0), 0 -10px 30px rgba(255, 255, 255, 0);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu2.open .line:after {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg)
}
.menu3 {
background: #000;
width: 100px;
height: 100px;
line-height: 95px;
text-align: center;
cursor: pointer;
overflow: hidden;
position: relative;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
.menu3:hover {
background: #3498db
}
.menu3 .line {
width: 40px;
height: 5px;
background: #fff;
display: inline-block;
box-shadow: 0 -10px 0 #fff;
-webkit-transition: all .3s ease;
transition: all .3s ease;
position: relative;
}
.menu3 .line:after {
-webkit-transition: all .3s ease;
transition: all .3s ease;
display: block;
position: absolute;
content: ' ';
box-shadow: 0 -10px 0 #fff;
width: 40px;
height: 5px;
background: #fff;
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg)
}
.menu3.open:hover {
background: #e74c3c
}
.menu3.open .line {
box-shadow: 0 0 0 #fff;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu3.open .line:after {
box-shadow: 0 0 0 #fff;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg)
}
.menu4 {
background: #000;
width: 100px;
height: 100px;
line-height: 95px;
text-align: center;
cursor: pointer;
overflow: hidden;
position: relative;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
.menu4:hover {
background: #3498db
}
.menu4 .line {
width: 40px;
height: 5px;
background: #fff;
display: inline-block;
box-shadow: 0 10px 0 #fff;
-webkit-transition: all .2s ease;
transition: all .2s ease;
position: relative;
}
.menu4 .line:after {
-webkit-transition: all .2s ease;
transition: all .2s ease;
display: block;
position: absolute;
content: ' ';
width: 40px;
height: 5px;
box-shadow: 0 10px 0 #fff;
background: #fff;
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg)
}
.menu4.open:hover {
background: #e74c3c
}
.menu4.open .line {
box-shadow: 0 75px 0 #fff;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu4.open .line:after {
box-shadow: 0 75px 0 #fff;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg)
}
.menu5 {
background: #000;
width: 100px;
height: 100px;
line-height: 95px;
text-align: center;
cursor: pointer;
overflow: hidden;
position: relative;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
.menu5:hover {
background: #3498db
}
.menu5 .line {
width: 40px;
height: 5px;
background: #fff;
display: inline-block;
-webkit-transition: all .2s ease;
transition: all .2s ease;
position: relative;
}
.menu5 .line:before, .menu5 .line:after {
-webkit-transition: all .2s ease;
transition: all .2s ease;
display: block;
content: ' ';
position: absolute;
left: 0;
width: 40px;
height: 5px;
background: #fff
}
.menu5 .line:before {
top: -10px
}
.menu5 .line:after {
top: 10px
}
.menu5.open:hover {
background: #e74c3c
}
.menu5.open .line:before, .menu5.open .line:after {
width: 30px;
left: 15px
}
.menu5.open .line:before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
top: -9px
}
.menu5.open .line:after {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 9px
}
.arrow {
background: #000;
width: 100px;
height: 100px;
line-height: 95px;
text-align: center;
cursor: pointer;
overflow: hidden;
position: relative;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
.arrow:hover {
background: #2980b9
}
.arrow .line {
width: 40px;
height: 5px;
background: #fff;
display: inline-block;
position: relative;
left: 0;
top: 0;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
.arrow .line:after, .arrow .line:before {
width: 30px;
height: 5px;
background: #fff;
display: block;
position: absolute;
content: ' ';
-webkit-transition: all .2s ease;
transition: all .2s ease
}
.arrow .line:before {
top: -9px;
left: 15px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg)
}
.arrow .line:after {
top: 9px;
left: 15px;
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg)
}
.arrow.open:hover {
background: #c0392b
}
.arrow.open .line {
left: -75px;
}
.arrow.open .line:after, .arrow.open .line:before {
width: 40px;
left: 75px;
top: 0
}
.arrow2 {
background: #000;
width: 100px;
height: 100px;
line-height: 95px;
text-align: center;
cursor: pointer;
overflow: hidden;
position: relative;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
.arrow2:hover {
background: #2980b9
}
.arrow2 .line {
width: 40px;
height: 5px;
background: #fff;
display: inline-block;
position: relative;
left: 0;
top: 0;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
.arrow2 .line:after, .arrow2 .line:before {
width: 30px;
height: 5px;
background: #fff;
display: block;
position: absolute;
content: ' ';
-webkit-transition: all .2s ease;
transition: all .2s ease
}
.arrow2 .line:before {
top: -9px;
left: 15px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg)
}
.arrow2 .line:after {
top: 9px;
left: 15px;
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg)
}
.arrow2.open:hover {
background: #c0392b
}
.arrow2.open .line {
left: 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background: rgba(255, 255, 255, 0);
}
.arrow2.open .line:after, .arrow2.open .line:before {
width: 40px;
left: 0;
top: 0
}
.arrow2.open .line:before {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg)
}
.arrow2.open .line:after {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0)
}
.arrow3 {
background: #000;
width: 100px;
height: 100px;
line-height: 95px;
text-align: center;
cursor: pointer;
overflow: hidden;
position: relative;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
.arrow3:hover {
background: #2980b9
}
.arrow3 .line {
width: 40px;
height: 5px;
background: #fff;
display: inline-block;
position: relative;
left: 0;
top: 0;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
.arrow3 .line:after, .arrow3 .line:before {
width: 30px;
height: 5px;
background: #fff;
display: block;
position: absolute;
content: ' ';
-webkit-transition: all .2s ease;
transition: all .2s ease
}
.arrow3 .line:before {
top: -9px;
left: 15px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg)
}
.arrow3 .line:after {
top: 9px;
left: 15px;
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg)
}
.arrow3.open:hover {
background: #c0392b
}
.arrow3.open .line {
left: 75px;
}
.arrow3.open .line:after, .arrow3.open .line:before {
width: 40px;
left: -75px;
top: 0
}
.arrow3.open .line:before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg)
}
.arrow3.open .line:after {
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg)
}
.arrow4 {
background: #000;
width: 100px;
height: 100px;
line-height: 95px;
text-align: center;
cursor: pointer;
overflow: hidden;
position: relative;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
.arrow4:hover {
background: #2980b9
}
.arrow4 .line {
width: 40px;
height: 5px;
background: #fff;
display: inline-block;
position: relative;
left: 0;
top: 0;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
.arrow4 .line:after, .arrow4 .line:before {
width: 30px;
height: 5px;
background: #fff;
display: block;
position: absolute;
content: ' ';
-webkit-transition: all .2s ease;
transition: all .2s ease
}
.arrow4 .line:before {
top: -9px;
left: 15px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg)
}
.arrow4 .line:after {
top: 9px;
left: 15px;
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg)
}
.arrow4.open:hover {
background: #c0392b
}
.arrow4.open .line:after, .arrow4.open .line:before {
left: -5px
}
.arrow4.open .line:before {
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg)
}
.arrow4.open .line:after {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg)
}
.arrow5 {
background: #000;
width: 100px;
height: 100px;
line-height: 95px;
text-align: center;
cursor: pointer;
overflow: hidden;
position: relative;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
.arrow5:hover {
background: #2980b9
}
.arrow5 .line {
width: 40px;
height: 5px;
background: #fff;
display: inline-block;
position: relative;
left: 0;
top: 0;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
.arrow5 .line:after, .arrow5 .line:before {
width: 30px;
height: 5px;
background: #fff;
display: block;
position: absolute;
content: ' ';
-webkit-transition: all .2s ease;
transition: all .2s ease
}
.arrow5 .line:before {
top: -9px;
left: 15px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg)
}
.arrow5 .line:after {
top: 9px;
left: 15px;
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg)
}
.arrow5.open {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.arrow5.open:hover {
background: #c0392b
}
.arrow5.open .line {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg)
}
.arrow6 {
background: #000;
width: 100px;
height: 100px;
line-height: 95px;
text-align: center;
cursor: pointer;
overflow: hidden;
position: relative;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
.arrow6:hover {
background: #2980b9
}
.arrow6 .line {
width: 40px;
height: 5px;
background: #fff;
display: inline-block;
position: relative;
left: 0;
top: 0;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
.arrow6 .line:after, .arrow6 .line:before {
width: 30px;
height: 5px;
background: #fff;
display: block;
position: absolute;
content: ' ';
-webkit-transition: all .2s ease;
transition: all .2s ease;
box-shadow: 0 92px 0 rgba(255, 255, 255, 0)
}
.arrow6 .line:before {
top: -9px;
left: 15px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg)
}
.arrow6 .line:after {
top: 9px;
left: 15px;
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg)
}
.arrow6.open:hover {
background: #c0392b
}
.arrow6.open .line {
left: 75px;
background: rgba(255, 255, 255, 0);
}
.arrow6.open .line:after, .arrow6.open .line:before {
width: 40px;
left: -10px;
background: rgba(255, 255, 255, 0);
box-shadow: 0 92px 0 #fff
}
.arrow6.open .line:before {
top: -65px
}
.arrow6.open .line:after {
top: 65px
}
.plus {
background: #000;
width: 100px;
height: 100px;
line-height: 90px;
text-align: center;
cursor: pointer;
overflow: hidden;
position: relative;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
.plus:hover {
background: #2ecc71
}
.plus .line {
width: 40px;
height: 5px;
background: #fff;
display: inline-block;
position: relative;
left: 0;
top: 0;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
.plus .line:before {
width: 5px;
height: 40px;
background: #fff;
display: block;
position: absolute;
content: ' ';
top: -17px;
left: 17px;
-webkit-transition: all .2s ease;
transition: all .2s ease
}
.plus.open:hover {
background: #e74c3c
}
.plus.open .line {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment