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

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

Ознакомьтесь с правилами, прежде чем добавлять материалы в данный раздел.

Простые FLAT-кнопочки от 7UARTS

Последнее обновление :

Для примера решил сделать простые кнопочки, кому-то может пригодится этот метод, кто-то не знал как их делать, вот будет образцом.

Изначально был сделан только один стиль но я подумал что это как-то скучно и решил чуток изменить все)

И так вот наша кнопочка :



А вот все что потребовалось для создания этой кнопочки :

HTML :
Код
<a href="/" class="link-primary">Просто кнопочка от 7uarts</a>

И CSS :
Код
.link-primary {  
  background : #0f93e0;  
  color: #fff;  
  padding: 8px;  
  text-decoration: none;  
  border: 0;  
  border-radius: 3px;  
  font-size: 14px;  
}  
.link-primary:hover {  
  background : #0d7cbc;  
}


А вот еще серые и со 100% закруглением :



Тут четок поправил CSS, добавил отступы по краям. Как по мне так эта даже лучше смотрится)

А вот код HTML :
Код
<a href="/" class="link-gray">Просто кнопочка от 7uarts</a>

А вот CSS :
Код
.link-gray {  
  background : #727B84;  
  color: #fff;  
  padding: 8px;  
  text-decoration: none;  
  border: 0;  
  border-radius: 100px;  
  font-size: 14px;  
  padding-right: 20px;  
  padding-left: 20px;  
}  
.link-gray:hover {  
  background : #5f6770;  
}

Как видите все очень просто и красиво.

Кстати если хотите сделать кнопку со 100% длиной, которая будет идти до конце блока в котором она будет, то добавляем :
Код
display:block;width:100%

Ну на этом все. Вы можете проверить работоспособность кнопочек в нашем HTML-редакторе.


  • Дата публикации

    15.Дек.17 15:25 (Пятница)

  • Версия скрипта

    Не указано

  • Процесс

    Готово на : 100%

  • Версия скрипта

    Не указано

Прикрепленные файлы

1 изображение

2 изображение

Комментарии (0)

На данный момент никто не оставил комментариев.

Оставить комментарий :


Требуется войти в свой аккаунт.

Для того чтобы оставить комментарий вам не обходимо войти в свой аккаунт или зарегистрироваться.

Вход Регистрация