WP

WP-Recall

Yworld Prime Designer
Дополнение к PrimeForum

WP

WP-Recall

Yworld PF Motivation
Дополнение к PrimeForum

WP

WP-Recall

Prime Yworld PRO
Дополнение к PrimeForum

Группы кнопок – сниппет Bootstrap

Небольшой но полезный сниппет групп кнопок на Bootstrap. Собственно все просто, у вас должен быть подключен Bootstrap на сайте. В итоге получите красивые кнопочки.

HTML

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="ui-group-buttons">
                <a href="#" class="btn btn-success" role="button"><span class="glyphicon glyphicon-thumbs-up"></span></a>
                <div class="or"></div>
                <a href="#" class="btn btn-danger" role="button"><span class="glyphicon glyphicon-thumbs-down"></span></a>
            </div>
            <div class="ui-group-buttons">
                <a href="#" class="btn btn-success" role="button"><span class="glyphicon glyphicon-floppy-disk"></span></a>
                <div class="or"></div>
                <a href="#" class="btn btn-danger" role="button"><span class="glyphicon glyphicon-trash"></span></a>
            </div>
            <br>
            <br>
            <div class="ui-group-buttons">
                <a href="#" class="btn btn-success" role="button"><span class="glyphicon glyphicon-ok"></span> Sign Up</a>
                <div class="or"></div>
                <a href="#" class="btn btn-default" role="button"><span class="glyphicon glyphicon-remove"></span> Reset</a>
            </div>
            <br>
            <br>
            <div class="ui-group-buttons">
                <button type="button" class="btn btn-primary btn-lg">Large button</button>
                <div class="or or-lg"></div>
                <button type="button" class="btn btn-success btn-lg">Large button</button>
            </div>
            <br>
            <br>
            <div class="ui-group-buttons">
                <button type="button" class="btn btn-primary">Default</button>
                <div class="or"></div>
                <button type="button" class="button btn btn-success">Success</button>
            </div>
            <br>
            <br>
            <div class="ui-group-buttons">
                <button type="button" class="btn btn-primary btn-sm">Small button</button>
                <div class="or or-sm"></div>
                <button type="button" class="btn btn-success btn-sm">Small button</button>
            </div>
            <br>
            <br>
            <div class="ui-group-buttons">
                <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
                <div class="or or-xs"></div>
                <button type="button" class="btn btn-success btn-xs">Extra small button</button>
            </div>
        </div>
    </div>
</div>

CSS

body{margin-top:20px;background:#5a5a5a}
.ui-group-buttons .or{position:relative;float:left;width:.3em;height:1.3em;z-index:3;font-size:12px}
.ui-group-buttons .or:before{position:absolute;top:50%;left:50%;content:'or';background-color:#5a5a5a;margin-top:-.1em;margin-left:-.9em;width:1.8em;height:1.8em;line-height:1.55;color:#fff;font-style:normal;font-weight:400;text-align:center;border-radius:500px;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,0.1);box-shadow:0 0 0 1px rgba(0,0,0,0.1);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}
.ui-group-buttons .or:after{position:absolute;top:0;left:0;content:' ';width:.3em;height:2.84em;background-color:rgba(0,0,0,0);border-top:.6em solid #5a5a5a;border-bottom:.6em solid #5a5a5a}
.ui-group-buttons .or.or-lg{height:1.3em;font-size:16px}
.ui-group-buttons .or.or-lg:after{height:2.85em}
.ui-group-buttons .or.or-sm{height:1em}
.ui-group-buttons .or.or-sm:after{height:2.5em}
.ui-group-buttons .or.or-xs{height:.25em}
.ui-group-buttons .or.or-xs:after{height:1.84em;z-index:-1000}
.ui-group-buttons{display:inline-block;vertical-align:middle}
.ui-group-buttons:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.ui-group-buttons .btn{float:left;border-radius:0}
.ui-group-buttons .btn:first-child{margin-left:0;border-top-left-radius:.25em;border-bottom-left-radius:.25em;padding-right:15px}
.ui-group-buttons .btn:last-child{border-top-right-radius:.25em;border-bottom-right-radius:.25em;padding-left:15px}

Демонстрация работы:











0

Автор публикации: Игорь

82 публикаций 100500 Идей :)

Весь спектр SEO услуг, реклама, продвижение в социальных сетях. Изготовление сайтов.

Обратится в PM Отзывы Подписаться

Ответить

Войти с помощью: