<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="margin"> <h2>Created with <i class="ion-ios-heart-outline"></i> by <a href="http://twitter.com/AlexMahrt" target="_blank">@AlexMahrt</a> </h2> <br> <a class="btn-clean" href="#"> Awesome Button <i class="ion-ios-unlocked-outline"></i> </a> </div> <div class="margin"> <div class="button-group clean"> <a class="btn-clean button-dropdown" href="#" data-toggle="dropdown"> Awesome Dropdown <i class="ion-ios-arrow-down"></i> </a> <ul class="dropdown-menu clean"> <li><a href="#">Dropdown Item</a></li> <li><a href="#">Dropdown Item</a></li> <li class="divider"></li> <li><a href="#">Dropdown Item</a></li> <li><a href="#">Dropdown Item</a></li> </ul> </div> </div> <div class="margin"> <input type="text" class="form-input" placeholder="Some cool text input.."> </div>

@import url('http://fonts.googleapis.com/css?family=Raleway:400,200'); @import url('http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'); html { background: #ffffff; width: 100%; width: 100vw; height: 100%; height: 100vh; font-family: 'Raleway', sans-serif; } body { padding: 5%; text-align: center; } div.margin { margin-bottom: 1.5em; } /* Text Input */ .form-input { background: #fafafa; border: 1px solid #bfbfbf; border-radius: 2px; padding: 12px 16px; min-width: 25%; } .btn-clean { display: inline-block; padding: 12px 16px; background: #fafafa; border: 1px solid #bfbfbf; border-radius: 2px; text-decoration: none; color: #8f8f8f; font-size: 1em; -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -ms-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; } .btn-clean i { position: relative; top: 1px; margin-left: 7px; font-size: 1.15em; } .btn-clean i.ion-ios-arrow-down { top: 2px; margin-left: 8px; } .btn-clean:hover, .btn-clean:focus, .btn-clean:active, .clean.button-group.open .button { border-color: #8f8f8f; color: #808080; text-decoration: none; } .form-input:focus { border-color: #8f8f8f; } /* Required for Dropdowns */ .clean.dropdown { position: relative; } .dropdown-toggle:focus { outline: 0; } .clean.dropdown-menu { position: absolute; top: 100%; width: 100%; left: 0; z-index: 1000; float: left; min-width: 160px; padding: 5px 0; margin: 15px 0 0; list-style: none; font-size: 14px; text-align: left; background-color: #fafafa; border: 1px solid #8f8f8f; border-radius: 2px; } .clean.dropdown-menu:before { content: "\00a0"; display: block; height: 10px; width: 10px; position: absolute; top: -6px; border: 1px solid #8f8f8f; border-right: 0; border-bottom: 0; background-color: #fafafa; right: 10px; -webkit-transform: rotate(48deg) skew(5deg); transform: rotate(48deg) skew(5deg); } .clean.dropdown-menu .divider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #8f8f8f; } .clean.dropdown-menu > li > a { display: block; padding: 3px 20px; clear: both; font-weight: normal; text-decoration: none; line-height: 2; color: #8f8f8f; white-space: nowrap; } .clean.dropdown-menu > li > a:hover, .clean.dropdown-menu > li > a:focus { text-decoration: none; color: #808080; background-color: #f3f3f3; } .clean.button-group, .clean.button-group-vertical { position: relative; display: inline-block; vertical-align: middle; } .clean.button-group > .button, .clean.button-group-vertical > .button { position: relative; float: left; }