Clean UI Components
<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('https://fonts.googleapis.com/css?family=Raleway:400,200');
@import url('https://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;
}
,The author is Cyruxx
(No Ratings Yet)
Loading...
