CODEWITHSUNDEEP
csstwitter-bootstrapcss-position
bijoume
bijoume

Reputation: 365

Notification background position issue

There's a CTA button which has this little notification bubble on top of it:

enter image description here

I've managed to position number 2 to the right place but the background doesn't position itself correctly:

enter image description here

This is my HTML:

<button type="button" class="btn btn-link center-block green" role="link" type="submit" name="op" value="Link 2">see our vacancies<sup class="notify">2</sup></button>

And this is the CSS:

.btn-link.green {
  margin-top: 65px;
  text-decoration: none;
  border: none;
  background-color: #1dcb8b;
  color: white;
  padding: 15px 30px;
  position: relative;
}

.notify {
  position: absolute;
  top: -7px;
  right: -7px;
  background: #1dcb8b;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  border: 2px solid #052c57;
  font-size: 1.3rem;
}

Here's a link to the demo page.

What am I doing wrong? Thank you for your help.

Upvotes: 0

Views: 54

Answers (4)

Vadim Ovchinnikov
Vadim Ovchinnikov

Reputation: 14012

Flexible version allowing you to change width and height and everything will remain the same.

.btn-link.green {
  margin-top: 65px;
  text-decoration: none;
  border: none;
  background-color: #1dcb8b;
  color: white;
  padding: 15px 30px;
  position: relative;
}

.notify {
  background: #1dcb8b;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  border: 2px solid #052c57;
  font-size: 1.3rem;
  display: inline-flex;
  position: absolute;
  top: -50%;
}

/* center text horizontally and vertically */
.notify > span {
  margin: auto;
}
<button type="button" class="btn btn-link center-block green"
role="link" type="submit" name="op" value="Link 2">
  see our vacancies<sup class="notify"><span>2</span></sup>
</button>

Upvotes: 0

Jones Joseph
Jones Joseph

Reputation: 4938

Modify the .notify as follows and use <span> not <sup>

.notify {
position: absolute;
top: -20px;
padding:8px;
background: #1dcb8b;
width: 50px;
height: 50px;
border-radius: 100%;
border: 2px solid #052c57;
font-size: 1.3rem;
}

Put together: 

* {
  box-sizing: border-box;
}
.btn-link.green {
  margin-top: 65px;
  text-decoration: none;
  border: none;
  background-color: #1dcb8b;
  color: white;
  padding: 15px 30px;
  position: relative;
}
.notify {
  position: absolute;
  top: -20px;
  background: #1dcb8b;
  padding: 10px 0px 10px 0px;
  text-align:center;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  border: 2px solid #052c57;
  font-size: 1.3rem;
}
<button type="button" class="btn btn-link center-block green" role="link" type="submit" name="op" value="Link 2">see our vacancies<span class="notify">2</span>
</button>

P.S
Change the top and padding as required.
I tried on your site, it works..

enter image description here

Upvotes: 2

Selvam Elumalai
Selvam Elumalai

Reputation: 693

.btn-link.green {
  margin-top: 65px;
  text-decoration: none;
  border: none;
  background-color: #1dcb8b;
  color: white;
  padding: 15px 30px;
  position: relative;
}

.notify {
  position: absolute;
  top: -30px;
  right: -25px;
  background: #1dcb8b;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  border: 2px solid #052c57;
  font-size: 1.3rem;
  line-height:3rem;
}
<button type="button" class="btn btn-link center-block green" role="link" type="submit" name="op" value="Link 2">see our vacancies
  <sup class="notify">2</sup>
</button>

No DOM changes, just adjust the top and right position and add line-height. Its done.

JSFiddle preview at https://jsfiddle.net/341064cd/3/

Upvotes: 0

Johann Kratzik
Johann Kratzik

Reputation: 794

The sup tag is moving up text by default so I recommend to use a span tag instead.

And then change your CSS like this:

.notify {
    position: absolute;
    top: -25px;
    right: -25px;
    background: #1dcb8b;
    width: 50px;
    height: 50px;
    line-height: 46px;
    border-radius: 100%;
    border: 2px solid #052c57;
    font-size: 1.3rem;
}

Upvotes: 1

Related Questions