Ваша БЕСПЛАТНАЯ рекламма

Форум общения, рекламы (ง ͠° ͟ل͜ ͡°)ง

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Форум общения, рекламы (ง ͠° ͟ل͜ ͡°)ง » Готовые коды для дизайна » Овальная зеленая кнопка входа в чат

Овальная зеленая кнопка входа в чат

Страница: 1
Ответить

Сообщений 1 страница 2 из 2

1

  • Автор: Admin
  • Администратор
  • Admin
  • Откуда: Украина
  • Зарегистрирован: 2017-06-18
  • Приглашений: 15
  • Сообщений: 65535
  • Уважение: [+10/-0]
  • Позитив: [+14/-0]
  • Пол: Мужской
  • Провел на форуме:
    2 дня 21 час
  • Последний визит:
    2019-06-09 22:18:03

Код овальной зеленой кнопки входа в чат с другим шрифтом:

Код:
#join-chat-button, #join-chat-button2 {
        font-weight: bold;
        padding: 4px 6px;

    
    font-family: Comic Sans MS, monospace;
    font-weight: bold;
    text-shadow: 1px 1px 1px #ffffff;
    
    background: green;
    border-radius: 40px 40px;
}

#join-chat-button:enabled { 
    -webkit-animation: keyEnterAnimBack 3s ease 1;
    animation: keyEnterAnimBack 1s ease 1;
}

#join-chat-button:hover {
    cursor: pointer;
    
    -webkit-animation: keyEnterAnim 3s ease 1;
    animation: keyEnterAnim 1s ease 1;
}

0

2

  • Автор: Admin
  • Администратор
  • Admin
  • Откуда: Украина
  • Зарегистрирован: 2017-06-18
  • Приглашений: 15
  • Сообщений: 65535
  • Уважение: [+10/-0]
  • Позитив: [+14/-0]
  • Пол: Мужской
  • Провел на форуме:
    2 дня 21 час
  • Последний визит:
    2019-06-09 22:18:03

А вот еще одна, стильнее:

Код:
/* Кнопка входа */
#join-chat-button {
    background-color: #4caf50; /* Цвет фона */
    border: 5px solid rgba(255, 255, 255, 0.4); /* Граница (кайма) */
    color: #fff; /* Цвет текста */
    border-radius: 25px; /* Закругление */
    text-shadow: -1px 0 1px rgba(0, 0, 0, 0.25); /* Тень текста */
    font-size: 1em; /* Размер текста */
    transition: .3s; /* Плавность анимации */
    padding: 8px 14px;
    font-weight: normal;
    box-sizing: inherit;
    outline: none;
    cursor: pointer;
}

/* Кнопка входа при наведении */
#join-chat-button:hover {
    background-color: #81c784;
}

/* Кнопка входа при нажатии */
#join-chat-button:active {
    background-color: #43a047;
}

0

Ответить
Страница: 1

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


Вы здесь » Форум общения, рекламы (ง ͠° ͟ل͜ ͡°)ง » Готовые коды для дизайна » Овальная зеленая кнопка входа в чат

Рейтинг форумов | Создать форум бесплатно