buttons and inputs flat style ui
scr:https://dribbble.com/shots/1807337-Freebie-UI-3-365 дизайн кнопок и инпутов
<div class="demo">
<div class="demo">
<button >BUTTON</button>
<input class="btn-b" type="button" value="button">
<input class="btn-g" type="submit">
<input class="btn-d" type="reset">
<br><br>
<input placeholder="Input" class="" type="text">
<input placeholder="Input" class="inp-g" type="text">
<input placeholder="Input" class="inp-r" type="text">
</div>
url(http://fonts.googleapis.com/css?family=Roboto+Condensed:700,400);
http://fonts.googleapis.com/css?family=Roboto+Condensed:700,400);url(
*{
padding: 0;
margin: 0;
}
html{
height: 100%;
overflow:hidden;
}
body{
&:extend(html);
background: linear-gradient(45deg, rgba(58, 200, 224, .1),rgba(20, 6, 96, .2)),linear-gradient(75deg, rgba(170, 251, 184, 0.2),rgba(117, 133, 52, 0.12)),linear-gradient(140deg,#FF9E3E,#EAD339);
font-family: 'Roboto Condensed', sans-serif;
}
.demo>*{
margin: 5px;
}
#fff;:
//@btn
#d2527f;:
#6c7a89;:
#87d37c;:
#98d0c3;:
1em;:
.mix-btn( :gold){
background: ;
border-bottom-color: darken( ,20);
&:hover{
background: lighten( ,5);
}
&:active{
color: darken( ,20);
}
}
button,
input[type=button],
input[type=submit],
input[type=reset]{
border: none;
outline: none;
box-sizing: border-box;
background: ;
border-bottom: .3em solid darken( ,20);
color: ;
padding: *2.5;
border-radius: 10px;
text-transform: uppercase;
font-weight: 700;
transition: all .06s;
&:hover{
background: lighten( ,5);
}
&:active{
border-bottom-width: 0.12em;
padding-bottom: ~'calc(1em + 0.18em)';
color: darken( ,20);
}
}
button.btn-r,
input.btn-r{
.mix-btn( );
}
button.btn-b,
input.btn-b{
.mix-btn( );
}
button.btn-g,
input.btn-g{
.mix-btn( );
}
button.btn-d,
input.btn-d{
.mix-btn( );
}
// //////////////////////////////////////////////////////////
#f6f5f3;:
#c4c0b7;:
#a2ded0;:
#f1a9a0;:
#fff;:
input[type=text]{
outline: none;
border: 1px solid darken( ,5);
border-right-color: transparent;
border-bottom-color: transparent;
border-radius: 10px;
font-weight: 700;
padding: 15px 20px;
background: ;
color: ;
&::-webkit-input-placeholder{
color: ;
}
}
.mix-input( ){
background: ;
border-top-color: darken( ,5);
border-left-color: darken( ,5);
color: ;
&::-webkit-input-placeholder{
color: ;
}
}
input[type=text].inp-g{
.mix-input( );
}
input[type=text].inp-r{
.mix-input( );
}
/////////////////////////////////////////////////////
// input[type="checkbox"]{
// display: none;
// }
// input[type="checkbox"]:checked + label:before {
// background-color: #a2ded0;
// }
// input[type="checkbox"] + label:before{
// content: '';
// display: inline-block;
// color: transparent;
// background-color: #f6f5f3;
// width: 45px;
// height: 45px;
// border-radius: 10px;
// text-align: center;
// line-height: 32px;
// margin-right: 5px;
// font-size: 120%;
// }
// src: https://dribbble.com/shots/1807337-Freebie- UI- 3- 365
// src: https://dribbble.com/shots/1807337-Freebie-UI-3-365
//