<div class="example"> <div class="mt"> <button class="btn btn-blue btn-raised">Кнопка</button> <button class="btn btn-green btn-raised">Кнопка</button> <button class="btn btn-orange btn-raised">Кнопка</button> <button class="btn btn-red btn-raised">Кнопка</button> <button class="btn btn-black btn-raised">Кнопка</button> <button class="btn btn-grey btn-raised">Кнопка</button> <button class="btn btn-white btn-raised">Кнопка</button> </div> <div class="mt"> <button class="btn btn-blue btn-flat">Кнопка</button> <button class="btn btn-green btn-flat">Кнопка</button> <button class="btn btn-orange btn-flat">Кнопка</button> <button class="btn btn-red btn-flat">Кнопка</button> <button class="btn btn-black btn-flat">Кнопка</button> <button class="btn btn-grey btn-flat">Кнопка</button> </div> <div class="mt"> <button class="btn btn-blue btn-fab"><i class="fa fa-plus"></i></button> <button class="btn btn-green btn-fab"><i class="fa fa-plus"></i></button> <button class="btn btn-orange btn-fab"><i class="fa fa-plus"></i></button> <button class="btn btn-red btn-fab"><i class="fa fa-plus"></i></button> <button class="btn btn-black btn-fab"><i class="fa fa-plus"></i></button> <button class="btn btn-grey btn-fab"><i class="fa fa-plus"></i></button> <button class="btn btn-white btn-fab"><i class="fa fa-plus"></i></button> </div> <div class="mt"> <button class="btn btn-blue btn-icon"><i class="fa fa-plus"></i></button> <button class="btn btn-green btn-icon"><i class="fa fa-plus"></i></button> <button class="btn btn-orange btn-icon"><i class="fa fa-plus"></i></button> <button class="btn btn-red btn-icon"><i class="fa fa-plus"></i></button> <button class="btn btn-black btn-icon"><i class="fa fa-plus"></i></button> <button class="btn btn-grey btn-icon"><i class="fa fa-plus"></i></button> </div> </div>
/*** контейнер демо ***/ .example { position: relative; padding: 24px; border-bottom: 1px solid #ddd; margin:0 auto; max-width: 620px; } .mt { margin-top: 12px; } /*** Кнопки ***/ .btn { z-index: 2; display: inline-block; vertical-align: top; margin: 2px; padding: 0; border: none; border-radius: 2px; background-color: transparent; font-family: 'Roboto', sans-serif; font-weight: 400; text-align: center; text-transform: uppercase; cursor: pointer; padding-left: 14px; padding-right: 14px; font-size: 13px; font-size: 0.8125rem; line-height: 36px; -webkit-transition-property: box-shadow; -moz-transition-property: box-shadow; transition-property: box-shadow; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; transition-duration: .5s; } .btn, .btn:hover, .btn:active, .btn:focus { text-decoration: none; outline: none; } .btn::-moz-focus-inner { border: 0; padding: 0; } /*** Цвета шрифта кнопок без фона ***/ .btn-flat.btn-red, .btn-icon.btn-red { color: #f44336; } .btn-flat.btn-blue, .btn-icon.btn-blue { color: #2196f3; } .btn-flat.btn-green, .btn-icon.btn-green { color: #4caf50; } .btn-flat.btn-orange, .btn-icon.btn-orange { color: #ff9800; } .btn-flat.btn-grey, .btn-icon.btn-grey { color: #9e9e9e; } .btn-flat.btn-black, .btn-icon.btn-black { color: #000000; } .btn-flat.btn-white, .btn-icon.btn-white { color: #fff; } /*** Тень кнопок ***/ .btn-raised, .btn-fab { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } /*** Изменение при наведении ***/ .btn-raised:hover, .btn-flat:hover, .btn-fab:hover, .btn-icon:hover { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4); } /*** Кнопки с фоном ***/ .btn-raised.btn-red, .btn-fab.btn-red { color: #fff; background-color: #f44336; } .btn-raised.btn-blue, .btn-fab.btn-blue { color: #fff; background-color: #2196F3; } .btn-raised.btn-green, .btn-fab.btn-green { color: #fff; background-color: #4caf50; } .btn-raised.btn-orange, .btn-fab.btn-orange { color: #fff; background-color: #ff9800; } .btn-raised.btn-grey, .btn-fab.btn-grey { color: #fff; background-color: #9e9e9e; } .btn-raised.btn-black, .btn-fab.btn-black { color: #fff; background-color: #000; } .btn-raised.btn-white, .btn-fab.btn-white { color: rgba(0, 0, 0, 0.87); background-color: #fff; } /*** Кнопки с иконками ***/ .btn-icon, .btn-fab { border-radius: 50%; padding: 0; height: 36px; width: 36px; line-height: 0; }