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

(✿◠‿◠)Форум общения, советы дизайнерам(ง ͠° ͟ل͜ ͡°)ง

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

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


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


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

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

1

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

Код:
#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

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

Код:
/* Кнопка входа */
#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


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


Рейтинг форумов | Создать форум бесплатно © 2007–2017 «QuadroSystems» LLC