Кнопки, реагирующие на наведение мыши

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

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

Демо-пример

Установка на сайт

1. Код в таблице внизу вставить в раздел head или файл стилей сайта:

Для выделения текста сделайте щелчок мышью.
Для увеличения окна, «подцепите» мышью правый нижний угол.


<style type="text/css">
a.css3dbutton {
    background: #c1e75c; /* default green background color of button */
    color: black;
    text-decoration: none;
    font: bold 17px Arial; /* font size and style */
    position: relative;
    display: inline-block;
    margin-right: 25px; /* spacing between multiple buttons */
    padding: 42px; /* padding inside button */
    border-radius: 85px; /* border radius of button */
    width: 85px; /* dimensions of button */
    height: 85px;
    outline: none;
    box-shadow: 0 8px 0 #8dab3b, /* depth and color of main shadow */
        0 0 3px rgba(0,0,0, 0.2),
        0 20px 20px #eee;
    -moz-transition: all 0.2s ease-in-out; /* transition style and duration */
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

a.css3dbutton span.outer{ /* outermost text container */
    text-align: center;
    width: 100%;
    display: block;
    position: relative;
    top: 50%; /* center element */
    -webkit-transform: translateY(-50%); /* center element */
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%); 
}

a.css3dbutton span.outer span.top{ /* top line */
    display: block;
    padding-bottom: 4px;
}

a.css3dbutton span.outer span.bottom{ /* bottom line */
    border-top: 1px solid black;
    padding-top: 4px;
    display: block;
    text-transform: uppercase;
    line-height: 12px;
    font-size: 60%;
}


a.css3dbutton:hover {
    background: #9cc62b; /* background color when mouse rolls over button */
    box-shadow:  none;
    -ms-transform: translateY(8px); /* shift button downwards by shadow depth amount */
    -webkit-transform: translate3D(0, 8px, 0);
    -moz-transform: translateY(8px);
    transform: translate3D(0, 8px, 0);
}


a.css3dbutton.blue{
    background: #a6e9f7;
    box-shadow: 0 8px 0 #529dad, /* depth and color of main shadow */
        0 0 3px rgba(0,0,0, 0.2),
        0 20px 20px #eee;
}

a.css3dbutton.blue:hover {
    background: #66cbe1; /* background color when mouse rolls over button */
    box-shadow: none;
}

a.css3dbutton.pink{
    background: #fbbaba;
    box-shadow: 0 8px 0 #d74848, /* depth and color of main shadow */
        0 0 3px rgba(0,0,0, 0.2),
        0 20px 20px #eee;
}

a.css3dbutton.pink:hover {
    background: #ea6161; /* background color when mouse rolls over button */
    box-shadow: none;
}

a.css3dbutton.yellow{
    background: #f3fa86;
    box-shadow: 0 8px 0 #dbcd2f, /* depth and color of main shadow */
        0 0 3px rgba(0,0,0, 0.2),
        0 20px 20px #eee;
}

a.css3dbutton.yellow:hover {
    background: #ecd347; /* background color when mouse rolls over button */
    box-shadow: none;
}
</style>

В коде CSS можно производить допустимые регулировки: ширина и высота кнопок, отступы, размер текста, цвет и т.д.

Изменяя радиус закругления, можно добиваться изменения внешнего вида кнопок. Если в строке
border-radius: 85px; /* border radius of button */
вместо величины 85px, установить, например, 25px, кнопки будут выглядеть примерно так:

Если изменить радиус закругления, можно добиваться изменения внешнего вида кнопок

2. А этот код скопируйте и расположите в разделе body в том месте, где желаете видеть кнопку (кнопки):


<a href="#" class="css3dbutton">
<span class="outer">
<span class="top">Регистрация!</span>
<span class="bottom">Это быстро и бесплатно</span>
</span>
</a>

<a href="#" class="css3dbutton blue">
<span class="outer">
<span class="top">Регистрация!</span>
<span class="bottom">Это быстро и бесплатно</span>
</span>
</a>

<a href="#" class="css3dbutton pink">
<span class="outer">
<span class="top">Регистрация!</span>
<span class="bottom">Это быстро и бесплатно</span>
</span>
</a>

<a href="#" class="css3dbutton yellow">
<span class="outer">
<span class="top">Регистрация!</span>
<span class="bottom">Это быстро и бесплатно</span>
</span>
</a>

Проставьте адреса ссылок на страницу регистрации (в данном случае).

Благодарю за внимание. Посещайте мой сайт. Пока! L.M.

Ваше мнение по материалу, изложенному на сайте

Служба поддержки