Show badge at the edge of a button

Asked

Viewed 194 times

1

I have a button and a badge with the value being updated with Jquery, I want the badge to be at the edge of the button.

Does anyone know how to set up?

jquery css

  • PRV welcome to Stack Overflow in Portuguese, to improve the quality of the answer, I suggest you add the code you already have in the body of the question, click the button edit just below your question to add this information. Make a tour to familiarize yourself with the site.

  • With CSS: float:right

  • This is Diego.. Thanks for your help.. With this setting the badge is on the right side.. but I don’t have the look waiting.. I would like the badge to be on top of the edge of the button.. half inside the button and half out.. understand me?

1 answer

1


There are 'n' ways to do what you want, the one I consider more "clean" and simple handling/maintenance is to have these rules defined:

.badge-button {
  position: relative
}

.badge-button:after {
  /* O conteúdo exibido será o valor definido no atributo 'data-badge'. */
  content: attr(data-badge);
  position: absolute;
  top:   -8px;
  right: -10px
}

/**
 * Técnica para esconder o conteúdo :after caso o atributo
 * 'data-badge' seja vazio. 
 */
.badge-button[data-badge='']:after {
  display: none
}

And in your HTML, the button (or whatever) has the custom attribute data-badge:

<button class='badge-button' data-badge='10'>mensagens</button>

Since you are using jQuery, you can use the function data() to manipulate the attribute and change its value.

The above rules already make him stay in the position you would like - by the "configure" you used in the question, I considered that the problem was the positioning. But still follows an example with a better look applying these properties:

.badge-button {
    position: relative;
    border: 2px solid #3498db;
    background-color: #fff;
    color: #3498db;
    padding: 4px 10px;
    outline: 0
}

.badge-button:after {
    content: attr(data-badge);
    position: absolute;
    top: -8px;
    right: -10px;
    background: #34495e;
    color: #fff;
    padding: 5px;
    border-radius: 50%;
    font-size: .8em
}
<button class='badge-button' data-badge='10'>notificações</button>

  • Thank you!! I’ll test the solution and I’ll tell you if it’s OK!!!

  • 1

    I just made a test!!! Running 100%. thanks for the support. Abs

Browser other questions tagged jquery css

You are not signed in. Login or sign up in order to post.