• Страница 1 из 1
  • 1
Форум » Территория вебмастера » Начинающему вебмастеру » Привлекательные и анимированные кнопки на CSS3
Привлекательные и анимированные кнопки на CSS3
Kosten
Дата: Пятница, 05.01.2018, 19:40 | Сообщение 1
Администраторы
Сообщений:18071
Награды: 55


Каждый веб мастер, как может создает свой интернет ресурс оригинальным. И кнопки на нем не исключение, так как они могут идти под разным дизайн и выполнять различные функций, что здесь рассмотрим небольшую подборку на них. Создание сайта вероятно является одним из самых актуальных в сети интернет.

И тематические ресурсы в создание растут как грибы после дождя, где используют HTML и CSS во всех направлениях в дизайн и безусловно в функциональности. Стили CSS прошел долгий путь от форматирования структурированного контента. Он использовался для точного контроля расположения документов и применения различных макетов к типам носителей.

Предоставить веб мастерам большую функциональность, где совмещена со стилистикой SS3 предлагает крупную редакцию CSS. В этом уроке мы сделаем несколько классных кнопок CSS3.

Фантастические анимированные кнопки с помощью CSS3. Мы создадим круглые кнопки, кнопки сжимания, кнопки для увеличения, расширяющие кнопки, кнопки масштабирования, кнопки для встряхивания и других. Вы можете легко использовать любую кнопку на своем веб-сайте без какой-либо внешней зависимости.

Стиль CSS3 полностью меняет мир веб-дизайна и способ проектирования веб-страниц. В настоящее время нам не нужно много полагаться на JavaScript и изображения для разработки потрясающих элементов дизайна для наших веб-сайтов. CSS3 делает магию для нас легко и эффективно. Хотя есть много дизайнеров, которые по-прежнему неохотно используют CSS3 из-за отсутствия поддержки в некоторых браузерах, но есть много людей, которые продвигаются вперед и разрабатывают некоторые потрясающие вещи в CSS3.

Итак, если вы хотите повысить свои навыки в разработке некоторых удивительных меню и кнопок с помощью CSS3 , то эта статья - это то, что вы искали. Мы очень усердно работали над составлением только лучших и наиболее хорошо написанных руководств доступный в Интернете. Мы решили включить как учебники Button, так и Menu, чтобы сделать этот список эпической коллекцией.



Шаг 1: Начните с HTML, что устанавливаем, где вам нужно.

Код
<a href="http://zornet.ru/" class="zornet_rulined green">ZORNET.RU</a>
<a href="http://zornet.ru/" class="zornet_rulined red">ZORNET.RU</a>

CSS

Код
.zornet_rulined {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #f5f0f0;
    padding: 9px 75px;
    margin: 0 9px;
    text-decoration: none;
}

.green {
    border: solid 1px #38610c;
    background-color: #6ea71a;
}

.red {
    border: solid 1px #610404;
    background-color: #921d1d;
}


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

Стиль CSS3 намного продвинут чем обычный стиль CSS. Здесь мы добавим стиль для продвижения свойств кнопок, таких как закругленные углы и тени. Для этого нам нужно использовать различные префиксы для разных браузеров.



Код
<a href="#" class="zornet square green">надпись</a>
<a href="#" class="zornet rounded red">надпись</a>


CSS
Код
.zornet {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
    padding: 10px 75px;
    margin: 0 20px;
    text-shadow: 2px 2px 1px #595959;
    filter: dropshadow(color=#595959, offx=1, offy=1);
    text-decoration: none;
}

.green {
    border: solid 1px #3b7200;
    background-color: #88c72a;
}

.red {
    border: solid 1px #720000;
    background-color: #c72a2a;
}

.square {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.rounded {
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}


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

3 вариант



Код
<a href="#" class="zornet square green">надпись</a>
<a href="#" class="zornet rounded red">надпись</a>


CSS

Код
.zornet {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
    padding: 10px 75px;
    margin: 0 20px;
    text-shadow: 2px 2px 1px #595959;
    filter: dropshadow(color=#595959, offx=1, offy=1);
    text-decoration: none;
}

.green {
    border: solid 1px #3b7200;
    background-color: #88c72a;
    background: -moz-linear-gradient(top, #88c72a 0%, #709e0e 100%);
    background: -webkit-linear-gradient(top, #88c72a 0%, #709e0e 100%);
    background: -o-linear-gradient(top, #88c72a 0%, #709e0e 100%);
    background: -ms-linear-gradient(top, #88c72a 0% ,#709e0e 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#709e0e', endColorstr='#709e0e',GradientType=0 );
    background: linear-gradient(top, #88c72a 0% ,#709e0e 100%);
    -webkit-box-shadow: 0px 0px 1px #66FF00, inset 0px 0px 1px #FFFFFF;
    -moz-box-shadow: 0px 0px 1px #66FF00, inset 0px 0px 1px #FFFFFF;
    box-shadow: 0px 0px 1px #66FF00, inset 0px 0px 1px #FFFFFF;
}

.red {
    border: solid 1px #720000;
    background-color: #c72a2a;
    background: -moz-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);
    background: -webkit-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);
    background: -o-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);
    background: -ms-linear-gradient(top, #c72a2a 0% ,#9e0e0e 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9e0e0e', endColorstr='#9e0e0e',GradientType=0 );
    background: linear-gradient(top, #c72a2a 0% ,#9e0e0e 100%);
    -webkit-box-shadow: 0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;
    -moz-box-shadow: 0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;
    box-shadow: 0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;
}

.square {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.rounded {
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}


Демонстрация:
Прикрепления: 2960066.png(29.6 Kb) · 2631547.png(52.1 Kb) · 3683019.png(48.1 Kb)
Страна: (RU)
Форум » Территория вебмастера » Начинающему вебмастеру » Привлекательные и анимированные кнопки на CSS3
  • Страница 1 из 1
  • 1
Поиск: