Подтвердить что ты не робот

Как я могу сделать кнопку Upvote/Downvote?

Это просто для стилизации, я пытаюсь сделать upvote/downvote так же, как это сделал на SO и Reddit, из того, что я вижу, они используют изображения стрелок в качестве фона, а затем позиционируют его, m новичок в CSS, и мне нужно, чтобы кто-то прошел меня через него. Спасибо заранее.

Ответ 1

Вы можете сделать это, добавив другое изображение на задний план, по одному для каждого состояния кнопки. Однако есть более чистый, более простой и современный способ достижения этого результата: Sprites.

Спрайт - это изображение, которое сохраняется как часть большего изображения. Одним из самых больших преимуществ использования спрайтов является сокращение округлых поездок на сервер для всех изображений только для одного запроса для спрайтов. Элемент для отображения изображения имеет изображение в качестве фона. Фон перемещается относительно элемента, поэтому элемент отображает только часть изображения. Например, когда вы перемещаете фоторамку поверх плаката (или в этом случае: перемещаете плакат под рамкой)

В SO они создают изображение, содержащее все состояния для кнопки. Они дают элемент для кнопки (a span в этом случае) фиксированную ширину и высоту и добавляют к ней фон с помощью CSS. Затем переключите класс для состояния (вкл. Или выкл.) С javascript на событие click. Теперь единственное, что вам нужно сделать в CSS, - изменить положение фона с помощью классов CSS:

  for (const btn документа .querySelectorAll('. vote')) {
 btn.addEventListener('click', event = > {
   event.target.classList.toggle('on');
 });
}Код>

 .vote {
 display: inline-block;
 переполнение: скрыто;
 ширина: 40 пикселей;
 высота: 25 пикселей;
 курсор: указатель;
 background: url ('http://i.stack.imgur.com/iqN2k.png');
 background-position: 0 -25px;
}


.vote.on {
 background-position: 0 2px;
}Код>

   Нажмите, чтобы проголосовать: < span class= "vote" > </& продолжительность GT;код>

Ответ 2

Я использовал только CSS, используя эти треугольники в этой ссылке:

http://css-tricks.com/snippets/css/css-triangle/

Я надеюсь, что это поможет кому-то

Ответ 3

Вы можете сделать это, используя два простых изображения... создайте два изображения в некоторых редакторах изображений, таких как Photoshop, если у вас нет MSPaint...

Код CSS

#voting{
   width:30px;
   height:40px;
}
.upvote{
   width:30px;
   height: 20px;
   cursor: pointer;
}
.downvote{
   width:30px;
   height: 20px;
   background: url('downvote.jpg') 0 0 no-repeat;
   cursor: pointer;
}

Код HTML:

<div id="voting">
    <div class="upvote"></div>
    <div class="downvote"></div>
</div>