I have a button with a notification bubble on it. I applied a hover property on this button in order to enlarge the button. The problem is that the notification on the button is also transformed and it caused a tiny space between button and notification.
How can I make to have a uniform transformation between my button and my notification on it? I am aware that the position of the notifications is in pixels and maybe this is the origin of the problem.
Here's my code:
.notify-badge{
position: absolute;
background-color: #3bb2bc !important;
height: 25px;
width: 25px;
right: 40px;
bottom: 40px;
text-align: center;
line-height: 25px;
border-radius: 50%;
color: white;
border:1px solid #3bb2bc;
}
a {
background: white;
padding: 15px;
padding-top: 11px;
border: 0;
border-radius: 50%;
height: 50px;
width: 50px;
margin-left: 30px;
}
a:hover{
transform: scale(1.1);
transition: all 0.25s ease-out;
}
<a class="button">
<img src="images.png"/>
<span class="notify-badge">2</span>
</a>
Related
I am building a contact form using the divi builder's module.
Divi's contact form already comes with a button and I need to customize it by adding html span tags within the button tag.
.link--button {
font-family: "Raleway", sans-serif;
font-size: 15px;
line-height: 22.6px;
background-color: transparent;
padding: 16px 32px 16px 40px;
cursor: pointer;
border: 4px solid #000000;
color: #000000;
}
.link--button:hover .arrow {
transition: all 0.4s ease;
width: 35px;
margin-right: 5px;
}
.arrow {
height: 2px;
width: 25px;
position: relative;
display: inline-block;
cursor: pointer;
margin-right: 15px;
margin-bottom: 4px;
background: black;
}
arrow:before {
right: -2px;
bottom: -3px;
transform: rotate(-45deg);
background: black;
}
.arrow:after {
right: -2px;
top: -3px;
transform: rotate(45deg);
background: black;
}
.arrow:before,
.arrow:after {
content: "";
background: black;
position: absolute;
height: 2px;
width: 10px;
border-radius: 30%;
}
<button class="link--button btn--black">
<span class="arrow arrow--black"></span>Submit
</button>
How can I modify divi's html to insert the arrow?
I found the answer. In the Divi Themes integration tab, use jquery to prepend the HTML as so:
jQuery(document).ready(function(){
jQuery(".my-form .et_pb_button").prepend('<span class="arrow arrow--black"></span>');
});
This adds the HTML tag inside of the form's button
I am having the weirdest problem: I am working on a portfolio page with images that should link to the various projects. There are 6 of these in total. Each of the images has a button that should live on top of it. When the button is hovered on by the user, it changes color, the cursor changes, and a popup with a short description of the project opens. When the button is clicked, there is an event listener that redirects to the project's page.
The problem is that in 2 out of the 6 instances, the moment I position the buttons inside the image, the buttons lose all functionality (including the event listener). As far as I can tell the code governing these 2 instances is the same as the other 4 where there is no such problem.
code where it doesn't work:
HTML:
<div class="container" id="linkTwo">
<img src="assets/images/bonez2.jpg" alt="bonez" style="width:200px; height:200px;" class="linkpic" >
<div class="btn1"id="btn1">Bone's Beatz<span id="bonezPop"> */some text that pops up/* </span></div>
</div>
CSS:
#linkTwo {
position: absolute;
top: 100px;
left: 230px;
}
#linkTwo #btn1:hover {
background-color: black;
}
#btn1 {
position: absolute;
left:20px;
padding-left: 23px;
padding-right: 23px;
}
#btn1 #bonezPop {
visibility: hidden;
width: 250px;
background-color: #883043;
color: #aa9e9e;
text-align: center;
border-radius: 6px;
border-style: solid;
border-color: black;
border-width: 2px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
#btn1:hover #bonezPop {
visibility: visible;
}
.container #btn1 {
position: absolute;
top: -2px;
left: 20px;
font-size: 16px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 53px;
padding-right: 53px;
border: none;
cursor: pointer;
border-radius: 5px;
}
code that DOES work:
HTML:
<div class="container" id="linkFive">
<img src="assets/images/weather.jpg" alt="weather app" style="width:200px;height:200px;" class="linkpic">
<div class="btn3" id="btn3">Weather App<span id="weatherPop"> */some text that pops up */</span></div>
</div>
CSS:
#linkFive {
position: absolute;
top:320px;
}
#btn3 #weatherPop {
visibility: hidden;
width: 250px;
background-color: #883043;
color: #aa9e9e;
text-align: center;
border-radius: 6px;
border-style: solid;
border-color: black;
border-width: 2px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
#btn3:hover #weatherPop {
visibility: visible;
}
#btn3 {
padding-left: 53px;
padding-right: 53px;
}
.container .btn3 {
position: absolute;
top: -2px;
left: 20px;
font-size: 16px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 60px;
padding-right: 40px;
border: none;
cursor: pointer;
border-radius: 5px;
}
.container .btn3:hover {
background-color: black;
}
I realize this whole thing would have been done much more easily with WordPress or some such, but this is a class assignment that requires I do this with code.
Thanks!
Short gif of how the problem looks
Found the answer. It was a different CSS rule that was for some reason breaking it:
.container {
position: relative;
width: 50%;
}
commenting this out solved the problem.
I'm trying to create a button out of a single html element. The button needs to have a toggle slider and the text needs to be aligned vertically and horizontally. So I thought I can make use of :before element to help me make that happen. Here is what I have tried:
div {
width: 140px;
height: 40px;
background-color: #B3B3B3;
color: #FFF;
float: left;
clear: both;
border-radius: 5px;
font-size: 12px;
}
div:before {
content: '';
display: block;
width: 20px;
height: 36px;
background-color: #4D4D4D;
position: relative;
left: 2px;
top: 2px;
float: left;
border-radius: 5px;
}
<div>Text Value</div>
I have 2 problems with the above code:
I can't position the text how I want and I have tried using text-align and position to move it around.
I am using a float, which means that it will affect behavior of other elements around it, and I really don't want that.
Is what I want possible with a single element?
Here is the JS Fiddle: https://jsfiddle.net/m3q5Lcjy/
EDIT: The centered text should not be centered on the whole element, but on the light gray area.
This is how I would do this:
Array.from(document.querySelectorAll('.toggler')).forEach((item) => {
item.addEventListener('click', e => {
item.classList.toggle('active');
})
});
.toggler {
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-sizing: border-box;
padding-left: 24px;
width: 140px;
min-height: 40px;
background-color: #B3B3B3;
color: #FFF;
border-radius: 5px;
font-size: 12px;
text-align: center;
cursor: pointer;
transition: padding .25s ease;
}
.toggler.active {
padding: 0 24px 0 0;
}
.toggler:before {
content: '';
display: block;
width: 20px;
background-color: #4D4D4D;
position: absolute;
bottom: 2px;
left: 2px;
top: 2px;
border-radius: 5px;
/* transition to make it look smoother */
transition: left .4s ease;
z-index: 1;
}
.toggler.active:before {
left: calc(100% - 22px);
}
<div class="toggler">Text Value</div>
<hr />
<div class="toggler active">Text Value realllllyy long</div>
<hr />
<div class="toggler">Text Value really far too long for this tiny, tiny, ohhh so tiny button. I recommend using shorter text though, but it won't break not even if you have like 10 or more lines.</div>
If anything about this implementation is unclear, feel free to ask.
Use flexbox to center your text vertically and horizontally. Then use absolute positioning on your pseudo element. Make sure parent element has relative positioning applied so absolute positioned pseudo stays within the parent.
div {
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-sizing: border-box;
padding-left: 24px; /* 20px for :before width, 4px for :before offset */
width: 140px;
height: 40px;
background-color: #B3B3B3;
color: #FFF;
border-radius: 5px;
font-size: 12px;
}
div:before {
content: '';
display: block;
width: 20px;
height: 36px;
background-color: #4D4D4D;
position: absolute;
left: 2px;
top: 2px;
border-radius: 5px;
}
<div>Text Value</div>
You could place the text in a paragraph.
<div class="thediv">
<p class="theText">
enter text here
</p>
</div>
.thediv{
Your own style.
}
.theText{
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
I don't see why you would want it be in one element.
If you do want that, you should give the div a padding.
div{
background-color: #B3B3B3;
color: #FFF;
float: left;
border-radius: 5px;
font-size: 12px;
padding: 20px 70px;
}
I have a problem like this (jsfiddle). Why does the hover of the absolute position is not only the bullet area? It cause I can't click the button, because of it covered by that absolute position. I want that tooltip shows only just when mouse over on the top of the bullet area not outside. Please help me, tq.
css:
.badgeP {
list-style: none;
padding:0;
padding-bottom: -10px;
margin-left: 25px;
display: inline-block;
position: relative;
}
.badgeP > li{
display: inline-block;
}
li.badgeP1:before{
content: "\25cf\00a0";
font-family: arial;
font-size: 100%;
position: relative;
left: 6px;
margin-left: -4px;
}
li.badgeP1:before {
color: orange;
}
.badgeP1:hover .ttbadgeP1{
opacity:1;
}
.badgeP1{
position: relative;
}
.ttbadgeP1{
background-color: black;
font-size: 90%;
padding-left: 3px;
padding-right: 7px;
padding-top: 0px;
padding-bottom: 2px;
margin: auto;
width: 40px;
height: auto;
position: absolute;
border-radius: 3px;
left: -18px;
top: 17px;
color: white;
box-shadow: 2px 2px 2px #888888;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.ttbadgeP1-text:before{
content: '';
width: 0px;
height: 0px;
position: absolute;
border-style: solid;
border-width: 4px;
border-color: transparent transparent black transparent;
left: 17px;
top: -8px;
}
.ttbadgeP1-text{
position: relative;
float: left;
width: auto;
text-align: center;
}
html:
<ul class='badgeP'>
<li class='badgeP1'>
<span class='ttbadgeP1'><span class='ttbadgeP1-text'>reputasi klik</span></span> 556
</li>
</ul>
<br>
. <input type='button' value='muke'></input>
you need to get that badge (.ttbadgeP1) out ouf your way first, using visibility:
.ttbadgeP1{visibility:hidden;}
then show it only on hover:
.badgeP1:hover .ttbadgeP1{visibility:visible;}
updated fiddle: http://jsfiddle.net/k2uepv26/3/
note that you can't just use the display property instead of visibility, see this question for details
Please change the width of .ttbadgeP1
.ttbadgeP1 {
width: 72px;
}
I want to center my text in a relative height div which contains an image. I use absolute position but when my text is on two lines, the text is not centered. I've already tried to use a table but it doesn't work due to the img.
HTML:
<div id="hubs">
<h3>Nos Hubs</h3>
<hr>
<a class="thumbnail vignette-hub" href="http://kkw.fr">
<img style="opacity: 0.6;filter: alpha(opacity=60);" alt="Aéroport de Nantes" src="http://kkw.fr/uploads/upload-center/nantes-vue-aerienne091501270208.png" width="100%" />
<p class="txt-hub-image">
Hub de</br>Nantes
</p>
</a>
</div>
CSS :
.txt-hub-image {
z-index: 100;
position: absolute;
left: 0px;
top: 50%;
width: 100%;
height: 100%;
text-align: center;
text-decoration: none;
color: white;
font-weight: bold;
font-size: 16px;
}
.vignette-hub {
position: relative;
width: 25%;
min-width: 135px;
}
.thumbnail {
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: border .2s ease-in-out;
-o-transition: border .2s ease-in-out;
transition: border .2s ease-in-out;
}
.thumbnail > img,
.thumbnail a > img {
margin-right: auto;
margin-left: auto;
}
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
border-color: #337ab7;
}
.thumbnail .caption {
padding: 9px;
color: #333;
}
Do you have any ideas ?
There are a few changes required to your snippet to make it automatically work for all dimensions:
p tags by default have a margin-top. If you don't reset it, then absolutely positioning it at 50% would become 50% + margin-top. This needs to be reset.
When you absolutely position an element at top: 50%, the box gets positioned at 50% height of the container and text keeps getting added from that position on. So, to match the center of the text block with the center of the parent, you have to translate the box with the text up by 50% of its own size. This can be done by adding transform: translateY(-50%).
You don't need to add a height: 100% on the p tag and it can be removed.
Note: Using transform method for positioning needs CSS3 support but I assume this shouldn't be a problem because you are already using transition.
If you want to support non CSS3 compatible browsers, have a look at the other approaches mentioned here. I have added a different answer just to explain the first two points I had mentioned above.
.txt-hub-image {
z-index: 100;
position: absolute;
left: 0px;
top: 50%;
width: 100%;
text-align: center;
text-decoration: none;
color: white;
font-weight: bold;
font-size: 16px;
/* added to fix the vertical centering */
margin-top: 0px;
transform: translateY(-50%);
}
.vignette-hub {
position: relative;
width: 25%;
min-width: 135px;
}
.thumbnail {
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: border .2s ease-in-out;
-o-transition: border .2s ease-in-out;
transition: border .2s ease-in-out;
}
.thumbnail > img,
.thumbnail a > img {
margin-right: auto;
margin-left: auto;
}
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
border-color: #337ab7;
}
.thumbnail .caption {
padding: 9px;
color: #333;
}
<div id="hubs">
<h3>Nos Hubs</h3>
<hr>
<a class="thumbnail vignette-hub" href="http://kkw.fr">
<img style="opacity: 0.6;filter: alpha(opacity=60);" alt="Aéroport de Nantes" src="http://kkw.fr/uploads/upload-center/nantes-vue-aerienne091501270208.png" width="100%" />
<p class="txt-hub-image">
Hub de</br>Nantes
</p>
</a>
</div>
Here is a demo fiddle as the snippets feature seems to be down.
Change your .txt-hub-image class, top value from 50% to 25%.