Skip to content

Instantly share code, notes, and snippets.

@oliyh

oliyh/ Material Design button group.md

Last active May 20, 2016 19:10
Show Gist options
  • Save oliyh/7fc4b09074dba62404c7db39fab01627 to your computer and use it in GitHub Desktop.
Save oliyh/7fc4b09074dba62404c7db39fab01627 to your computer and use it in GitHub Desktop.
Download ZIP
Material Design button with Bootstrap-like dropdown functionality
Raw
mdl-button-group.html
<html lang="en">
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<style>
.expandable-button {
position: relative;
height: 36px;
display: inline-block;
}
.expandable-button.expanded .button-expansion {
max-height: 120px;
border-top: 1px solid gray;
}
.expandable-button.expanded .button-expansion-toggle {
color: white;
transform: rotate(90deg);
}
#expansion-toggle {
display: inline-block;
}
.button-expansion-toggle {
margin-left: 8px;
margin-right: -8px;
transition: transform 0.5s;
font-size: 1.4em;
cursor: default;
}
.button-expansion-toggle:hover {
color: white;
}
.button-expansion {
position: absolute;
z-index: 4;
width: 100%;
background-color: inherit;
max-height: 0px;
overflow: hidden;
-webkit-transition: max-height 0.5s;
transition: max-height 0.5s;
}
</style>
</head>
<body>
<div style="padding: 24px;">
<div id="button" class="expandable-button mdl-button--raised">
<div class="mdl-button">
Click me
<i onclick="toggleExpansion();" class="material-icons button-expansion-toggle">settings</i>
</div>
<div class="button-expansion mdl-button--raised">
<div style="padding: 8px">
<div>
Expanded content here
</div>
</div>
</div>
</div>
</div>
<script>
function toggleExpansion(event) {
document.getElementById('button').classList.toggle("expanded");
event.stopPropagation();
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment