Создать описание кнопки, имеющие с помощью CSS

Im ищет что-то вроде этогоСоздать описание кнопки, имеющие с помощью CSS

enter image description here

Существует небольшое описание ($ 10 USD) приведены для кнопки. Может ли кто-нибудь помочь мне создать его?

У меня есть якорная кнопка, подобная этой. Может ли кто-нибудь помочь мне создать такое описание с помощью css?

<a style="float:right" class="iframe button pink" href="">Pay Now</a>

это скрипка

http://jsfiddle.net/wLmbw/

источник

2014-01-09 user3177828

Фактически это всего лишь 1 изображение, которое выглядит как 2, а «описание» - это тег 'alt' из html 5 – jcho360

У вас есть основная подсказка: http://jsfiddle.net/wLmbw/3/ или что-то больше фантазии? –

Вы после подсказок? проверьте http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/ – Dror

Если это статический контент, вы можете добавить небольшой контейнер через элемент: before.

.button.pink{ 
    position: relative; 
} 

.button.pink:before{ 
    position: absolute; 
    left: -90%; 
    top: 0; 
    display: block; 
    padding: 10px; 
    width: 30px; 
    height: 10px; 
    content: "$10"; 
    background: #6FCC49; 
    border: 1px solid #679500; 
    color: white; 
    text-shadow: 1px 1px 0 #679500; 
    border-radius: 5px; 
    text-align: center; 
}

http://jsfiddle.net/etasf/2/

enter image description here

Это, вероятно, может быть очищен - это был просто мой быстрый бег на него.

источник

2014-01-09 21:42:07 geebru

Большое вам спасибо. Это то, что я хотел! – user3177828

Псевдо элементы - отличный способ получить дополнительный контент без дополнительной разметки HTML, рад, что я мог бы помочь! – geebru

добавить еще один HTML элемент, как на рисунке слева, положения его с помощью CSS и использовать javacsript для заполнения правильного значения

источник

2014-01-09 21:32:05

вы может потребоваться что-то в этом направлении:

HTML:

<a style="float:right" class="iframe button pink" href=""> 
<span class="label">10 USD</span>Pay Now</a>

CSS

.pink{ 
    position:relative; 
} 
.label 
{ 
    box-sizing:border-box; 
    text-align:center; 
    position:absolute; 
    right:105%; 
    bottom: -1px; 
    padding-bottom:5px; 
    padding-top:5px; 
    display:inline-block; 
    width: 50px; 
    height: 18px; 
    background-color:pink; 
    border-radius:5px; 
    border:1px solid black; 
}

JSFiddle

источник

2014-01-09 21:33:02 MadeOfAir

Я угадываю вы знаете, как стиль div или span, элемент. Поместите его прямо рядом с кнопкой и установите его на css.display:none. И когда пользователь наводит курсор на кнопку, затем установите ее на css.display:block с помощью javascript ...

источник

2014-01-09 21:35:40 ThomasK

Создать описание кнопки, имеющие с помощью CSS

ответ

Смежные вопросы