Кнопки с подсказками на CSS3
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
[class*="button-"] { position: relative; display: inline-block; clear: both; overflow: hidden; margin: 0 1em 1em 100px; padding: 0 4em; height: 3.5em; font: 300 1em/3.5em 'Open Sans', sans-serif; text-decoration: none; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); letter-spacing: .08em; color: #fff; background: #0090C0; border: solid 1px #fff; border-radius: 2px; -moz-transition: ease 0.35s all; -o-transition: ease 0.35s all; -webkit-transition: ease 0.35s all; transition: ease 0.35s all; width: 300px; text-align: center; box-sizing: border-box; } [class*="button-"]:hover { background: #007DA7; box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset; } .button-hover:hover { line-height: 9em; } .button-hover:before { content: attr(data-text); color: #DEEFF5; position: absolute; top: -2.75em; left: 0px; text-align: center; width: 300px; } |
|
1 2 3 4 5 6 7 |
<a href="#" data-text="Бла бла бла" class="button-hover">Читать далее</a> <br> <a href="#" data-text="И ещё бла бла бла" class="button-hover">Дополнительно</a> <br> <a href="#" data-text="Здесь были статьи" class="button-hover">Статьи</a> <br> <a href="#" data-text="Качай меня полностью" class="button-hover">Скачать</a> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
