Кнопки и всплывающие подсказки на css

 

19 декабря 2014 - Завсегдатай
article64.jpg

Время от времени возникает необходимость  делать кнопки и красочные подсказки.

В этой статье я буду описывать только то и о том, что использую на даннном сайте.

Зачастую сделано это мной  даже не потому, что это нужно, а потому чтобы кто-то обратив внимание на это, при необходимости нашел на сайте как это сделано.

 

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

Цвет всплывающей подсказки  color: #.......   или кнопки всегда  можно изменить, или подобрать, пользуясь 

таблицой HTML кодов цветов или специализированными сервисами.

 

 

Даю ссылочку на один из них.

 

 

Не бойтесь экспериментировать с цветами и у Вас всё получится 

 

 

 

 

Вот один из примеров использования всплывающих подсказок в кнопках социальных сетей.

 

 

Наведите курсор на кнопки

 

 

Сама картинка 

 

Нестандартность использования цветной всплывающей подсказки в данном конкретном случае заключается в том, что она привязана к изменямой картинке.

Т.е. при наведение на картинку появляется не только цветная подсказка, но изменяется картинка.

 

Делается это путём использования одновременно двух классов в одном элементе   class="twitt helper" 

В данном случае  twitt и  helper.

 

 HTML-разметка


<div id="social_accounts">
<p align="center">
<b>
 <a class="twitt helper" alt="Мы в Twitter" rel="nofollow" target="_blank" href="https://twitter.com/PuksinkaMe" /><span class="airhelper">Мы в Twitter</span></a>
 <a class="febuk helper" alt="Мы в Фейсбуке" rel="nofollow" target="_blank" href="https://www.facebook.com/PuksinkaME" /><span class="airhelper">Мы в Фейсбуке</span></a>
 <a class="livgornal helper" alt="Мы в ЖЖ" rel="nofollow" target="_blank" href="http://puksinkame.livejournal.com" /><span class="airhelper">Мы в ЖЖ</span></a>
 <a class="googlplus helper" alt="Мы в Google+" rel="nofollow" target="_blank" href="https://plus.google.com/u/0/+PuksinkaMesait" /><span class="airhelper">Мы в Google+</span></a>
 <a class="livint helper" alt="Мы в LiveInternet" rel="nofollow" target="_blank" href="http://www.liveinternet.ru/users/me-me" /><span class="airhelper">Мы в LiveInternet</span></a></b></p></div>


 

CSS


/************************ Всплывающая подсказка *************************/
.helper {
color: #2C8505; outline: none; /*цвет подсказки*/
cursor: help; text-decoration: none; /*вид курсора при наведении, можно заменить на pointer*/
position: relative; /*позиция*/
}
/*положение всплывающей подсказки*/
.helper span {
margin-left: -999em;
position: absolute;
}
/*подсказка при наведении курсора*/
.helper:hover span {
font-family: Verdana, Tahoma, Geneva, sans-serif;/*шрифт*/
position: absolute; /*позиция*/
left: 10px;
top: 25px;
z-index: 99;
margin-left: 0;
width: 150px; /*ширина блока подсказки*/
}
/*параметры изображения*/
.helper:hover img {
border: 0;
}
/*блок всплывающей подсказки*/
.airhelper {
background: none repeat scroll 0 0 rgba(97, 177, 255, 0.9); /*цвет и прозрачность фона*/
border: 1px solid #2b82b8; /*параметры бордюра*/
border-radius: 5px; /*закругление углов*/
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2); /*тень блока*/
color: #fff; /*цвет шрифта всплывающей подсказки*/
padding: 5px; /*внутренний отступ*/
}

/************************ Cоциальные кнопки в футере *************************/
#social_accounts a.twitt:hover {
background: url(../images/footer.share.png) 0px 100% no-repeat transparent;
}
#social_accounts a {
display: inline-block;
height: 22px;
margin-right: 2px;
width: 22px;
}
#social_accounts a.twitt {
background: url(../images/footer.share.png) 0px 0% no-repeat transparent;
}
#social_accounts a.febuk:hover {
background: url(../images/footer.share.png) -27px 100% no-repeat transparent;
}
#social_accounts a.febuk {
background: url(../images/footer.share.png) -27px 0% no-repeat transparent;
}
#social_accounts a.livgornal:hover {
background: url(../images/footer.share.png) -53px 100% no-repeat transparent;
}
#social_accounts a.livgornal {
background: url(../images/footer.share.png) -53px 0% no-repeat transparent;
}
#social_accounts a.googlplus:hover {
background: url(../images/footer.share.png) -81px 100% no-repeat transparent;
}
#social_accounts a.googlplus {
background: url(../images/footer.share.png) -81px 0% no-repeat transparent;
}
#social_accounts a.livint:hover {
background: url(../images/footer.share.png) -108px 100% no-repeat transparent;
}
#social_accounts a.livint {
background: url(../images/footer.share.png) -108px 0% no-repeat transparent;

}

 

 

 

 

  Кнопки реагирующие на нажатие. 

 

Главная Статьи Фотографии 

HTML-разметка

 <a href= "http://puksinka.me/" class="button25">Главная</a>
 <a href="http://puksinka.me/stati" class="button25">Статьи</a>
 <a href="http://puksinka.me/photos" class="button25">Фотографии</a>

 

CSS

a.button25 {
position: relative;
display: inline-block;
width: 10em;
height: 2.5em;
line-height: 2.5em;
vertical-align: middle;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 1px #777;
color: #fff;
outline: none;
border: 2px solid #F64C2B;
border-radius: 5px;
box-shadow: 0 0 0 60px rgba(0,0,0,0) inset, .1em .1em .2em #800;
background: linear-gradient(#FB9575, #F45A38 48%, #EA1502 52%, #F02F17);
}
a.button25:active {
top: .1em;
left: .1em;
box-shadow: 0 0 0 60px rgba(0,0,0,.05) inset;
}

 

 

 

 А теперь, те же самые кнопки, но реагирующие на наведение курсора.

 

  Главная Статьи Фотографии 


HTML-разметка

<a href= "http://puksinka.me/" class="button26">Главная</a>

 <a href="http://puksinka.me/stati" class="button26">Статьи</a>

 <a href="http://puksinka.me/photos" class="button26">Фотографии</a>

 

CSS

a.button26 {
position: relative;
display: inline-block;
width: 10em;
height: 2.5em;
line-height: 2.5em;
vertical-align: middle;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 1px #777;
color: #fff;
outline: none;
border: 2px solid #F64C2B;
border-radius: 5px;
box-shadow: 0 0 0 60px rgba(0,0,0,0) inset, .1em .1em .2em #800;
background: linear-gradient(#FB9575, #F45A38 48%, #EA1502 52%, #F02F17);
}
a.button26:hover {
top: .1em;
left: .1em;
box-shadow: 0 0 0 60px rgba(0,0,0,.05) inset;
}

 

 

 

 А теперь, те же самые кнопки реагирующие на наведение курсора и на нажатие.

 

Главная Статьи Фотографии

 

HTML-разметка

<a href="http://puksinka.me/" class="button27">Главная</a>
 <a href="http://puksinka.me/stati" class="button27">Статьи</a>
 <a href="http://puksinka.me/photos" 
class="button27" >Фотографии</a>

 

CSS

a.button27 {
position: relative;
display: inline-block;
width: 10em;
height: 2.5em;
line-height: 2.5em;
vertical-align: middle;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 1px #777;
color: #fff;
outline: none;
border: 2px solid #F64C2B;
border-radius: 5px;
box-shadow: 0 0 0 60px rgba(0,0,0,0) inset, .1em .1em .2em #800;
background: linear-gradient(#FB9575, #F45A38 48%, #EA1502 52%, #F02F17);
}
a.button27:hover {
position: relative;
display: inline-block;
width: 10em;
height: 2.5em;
line-height: 2.5em;
vertical-align: middle;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 1px #777;
color: #fff;
outline: none;
border: 2px solid #ff7b61;
border-radius: 5px;
box-shadow: 0 0 0 60px rgba(0,0,0,0) inset, .1em .1em .2em #000000;
background: linear-gradient(#fab099, #ff603d 48%, #fb3523 52%, #dd4431);
}
a.button27:active {
top: .1em;
left: .1em;
box-shadow: 0 0 0 60px rgba(0,0,0,.05) inset;
}

 

 

 

 

 А теперь,  кнопки реагирующие на наведение курсора увеличиваясь и реагирующие на нажатие. 

 

 

    Главная     Статьи     Фотографии

 

HTML-разметка

&nbsp;&nbsp;&nbsp;&nbsp;<a href=" http://puksinka.me/ " class="button28">Главная</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="
http://puksinka.me/stati " class="button28">Статьи</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="
http://puksinka.me/photos " class="button28">Фотографии</a>

 

CSS

 a.button28 {
position: relative;
display: inline-block;
width: 10em;
height: 2.5em;
line-height: 2.5em;
vertical-align: middle;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 1px #777;
color: #fff;
outline: none;
border: 2px solid #F64C2B;
border-radius: 5px;
box-shadow: 0 0 0 60px rgba(0,0,0,0) inset, .1em .1em .2em #800;
background: linear-gradient(#FB9575, #F45A38 48%, #EA1502 52%, #F02F17);
-webkit-transition:all .5s;
-moz-transition:all .5s;
-o-transition:all .5s;
transition:all .5s;
}
a.button28:hover {
-webkit-transform:scale(1.2);
-moz-transform: scale(1.2);
-o-transform:scale(1.2);
-ms-transform:scale(1.2);
transform:scale(1.2);
}
a.button28:active {
top: .1em;
left: .1em;
box-shadow: 0 0 0 60px rgba(0,0,0,.05) inset;
}

 

 Всем удачи!     

 

 

Похожие статьи:

Время от времени возникает необходимость подбора цвета.  И именно поэтому ниже представлена таблица с кодами цветов.   ...
Постараюсь максимально сжато рассказать как сделать так, чтобы на картинку большого размера  поместить маленькую картинку  и чтобы маленькая картинка была кликабельной....
Иногда появляется необходимомость создать эффект увеличения изображения при наведении мышки. ...
Возникла у меня необходимость сделать для заголовка красивый трехмерный текст.  Всё оказалось достаточно просто.....
Рейтинг: +1 Голосов: 1 1107 просмотров