• Главная
  • Регистрация
  • Вход
  • RSS
  • О нас
    • Отзывы
  • Обратная связь
  • Новости
  • Заработок
    • Заработок на кликах
    • Биткоин
    • Лотерея
    • Партнерка
    • Заработок в соц сетях
    • Монетизация сайта
    • Обучающие видеокурсы
    • Бесплатные видеоуроки
  • Доска объявлений
    • Реф-ссылки
      • Заработок в сети
      • Почтовые спонсоры
      • Кликовые спонсоры
      • Партнерки
      • BUX
      • Игры
      • Казино
      • Прочее
    • Объявления
      • Куплю
      • Продам
      • Обменяю
    • Работа
      • Ищу работу
      • Предлагаю работу
  • Как привлечь рефералов?
  • Автозаработок
  • Форум
Заработок в сети
Проверенно, качественно и легко.
Форма входа
Старая форма входа
E-mail:
Пароль:
Забыл парольРегистрация
или

Меню сайта

  • Главная страница
  • О нас
    • Отзывы
  • Статьи
    • Раскрутка групп соц. сетей.
    • Способы заработка в сети
    • Добыча Bitcoin
    • Размещение статей
  • Заработок на кликах
  • Биткоин
  • Лотерея
  • Партнерка
  • Заработок в соц сетях
  • Монетизация сайта
  • Автозаработок
  • Дайджест
  • Обучающие курсы
    • Технические моменты
    • Способы заработка
    • Красота и здоровье
    • Любовь и отношения 18+
    • Разное
  • Бесплатные уроки
    • Методы заработка
    • Технические курсы
    • Красота и здоровье
    • Любовь и отношения 18+
    • Разное
  • Книги
  • Веб-Мастеру
    • Уроки CSS
  • Форум

Реклама от Так.Ru

Мини-чат

Для добавления необходима авторизация

Реклама

Наши спонсоры

  • Авто волгоград
  • Онлайн ТВ
Главная » 2015 » Ноябрь » 18 » Делаем кнопку с помощью css
Делаем кнопку с помощью css
Дата:Автор:
аватар Гость
18.11.2015Konstantin

Меняем простую ссылку на красивую кнопку.

Заполняя сайт каким либо материалом, мы в тексте часто делаем ссылки на другие страницы сайта или сторонние сервисы что зачастую делает их незаметными. Предлагаю с помощью CSS стилей заменить текстовые ссылки на красивые кнопки, которые будут ярко выделяться из основного контента вашего проекта.
Итак если вы заинтересовались, то приступим.

1. Для начала нам понадобится текстовая ссылка
<a href="ссылка" target="_blank">Текст</a> ( вместо ссылка вписываем адрес сайта или страницы на которую должен произойти переход, вместо текст вписываем фразу или слово которое должно отображаться на кнопке).
Мой вариант
<a href="http://zvs.ucoz.com/" target="_blank">Заработок в сети</a>
Далее присваиваем ссылке класс в виде class="buttlink" (По желанию buttlink можно поменять на свое имя класса).
Должно получится вот так
<a href="http://zvs.ucoz.com/" target="_blank" class="buttlink">Заработок в сети</a>

2. Переходим к созданию стилей для нашей кнопки.
Внимание! При смене имени buttlink в ссылке не забудьте поменять его и в стилях.
Для своей кнопки я создал вот такие стили, где buttlink это основные стили, а buttlink:hover стили отображения кнопки при наведении на нее курсора мыши.

.buttlink {
padding:6px 10px; /----------/Величина отступа внутри элемента/----------/
background: #b91919; /----------/Цвет фона/----------/
text-decoration: none; /----------/Отменяет подчеркивание текста/----------/
color:#FFFFFF; /----------/Цвет текста/----------/
border-radius: 8px; /-------------------/Скругленные углы/-------------------/
box-shadow: #000 0 .1em 3px; /----------/Тень/----------/
}
.buttlink:hover {
padding:8px 12px; /----------/Величина отступа внутри элемента/----------/
background: #ff0000; /----------/Цвет фона/----------/
text-decoration: none; /----------/Отменяет подчеркивание текста/----------/
font-weight:bold; /----------/Жирный шрифт/----------/
color:#FFFFFF; /----------/Цвет текста/----------/
box-shadow: #000 0 .3em 6px; /----------/Тень/----------/
}
В итоге получилась вот такая кнопка
Заработок в сети

Меняя тот или иной параметр, вы сможете настроить кнопку под свой цвет и вкус, а так же удаляя или добавляя в нее новые элементы.
На всякий случай вот шпаргалка по CSS, и тема на форуме для ваших вопросов.

Теперь нам нужно разместить созданную кнопку в нужном для нас месте. Собственно сам код кнопки прописываем туда, где бы вы хотели ее видеть, а вот для прописывания стилей существует несколько вариантов.
Вариант 1. Скачиваем файл CSS, заливаем его в корневой каталог сайта. Далее на странице с кнопкой, вверху прописываем следующий код
<style type="text/css">  
@import url('путь к CSS файлу') all;
</style>
Вариант 2. На странице с кнопкой внизу прописываем
<style type="text/css">  
Тут вписываем css стили нашей кнопки.
</style>

Вот вроде бы и все, если что обращайтесь с вопросами на наш форум.
Огромная просьба строго не судить, так как я являюсь самоучкой, лучше дайте свой профессиональный совет.

3790.0 (0)Уроки CSS
  • 1
  • 2
  • 3
  • 4
  • 5

Поделиться ссылкой в соц. сетях

Похожие новости на нашем сайте

  • Шпаргалка по CSS
  • Наклонный блок DIV
  • Свойства блока
Теги: уроки, CSS
Всего комментариев: 0
Пожалуйста войдите чтобы оставить свой комментарий:

Форум

 Web-ip
11.11.2024/18:50
6
 Wmzona
11.11.2024/18:49
8
 Smmka
11.11.2024/18:49
7
 https://sutynery.ru ...
20.02.2022/17:52
0
 predprof
20.02.2022/17:48
0
 Постинг в форум
20.02.2022/17:48
3
 Деньги Payeer
20.02.2022/17:47
1

Календарь

«  Ноябрь 2015  »
Пн Вт Ср Чт Пт Сб Вс
      1
2345678
9101112131415
16171819202122
23242526272829
30

Сообщество vk

Наш опрос

Сколько Вы зарабатываете в сети в месяц?
[ Результаты · Архив опросов ]
Всего ответов: 24

Реклама

Ты здесь

Статистика

Яндекс.Метрика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Copyright © 2012-2025 «zvs.ucoz.com»
Создать бесплатный сайт с uCoz
ucoz шаблоны
Поднять страницу в верх