Hi I have a few links in my html page and I want to set up a notification badge (using css) beside my links which I already did but I am not sure how to make the notification badges disappear once the user clicks the link.
CSS:
.badge1 {
position:relative;
}
.badge1[data-badge]:after {
content:attr(data-badge);
position:absolute;
top:-10px;
right:-10px;
font-size:.7em;
background:red;
color:white;
width:30px;height:18px;
text-align:center;
line-height:18px;
border-radius:50%;
box-shadow:0 0 1px #333;
}
HTML:
</span>Upcoming Job Bidding<br>
</span>7-11 Online Store<br>
EDIT: it doesn't work
I guess you can use this:
a:visited .badge1:after{
content: none;
}
Related
I'm trying to add a floating WhatsApp button to my website by using Kevin Castro's Pen here: https://codepen.io/demoonkevin/pen/MvPEpV
* WhatsApp Button */
.whatsApp{
position:fixed;
width:60px;
height:60px;
bottom:40px;
left:40px;
background-color:#25d366;
color:#FFF;
border-radius:50px;
text-align:center;
font-size:30px;
box-shadow: 2px 2px 3px #999;
z-index:100;
}
.my-whatsApp{
margin-top:16px;
}
But when I use it on my website it taking my wordpress website global color which is yellow and I want it to be white even tho I add color:#FF it is still same as you can see in screenshot Here is the colour
I'm have a wordpress site where I have three buttons with position:fixed in the right side. The buttons show fine in FF and IE, but disappears behind the next section when I scroll in google chrome. I am pretty sure it is a stacking context problem, but can not make the button appear no matter which value I change. HTML and css below( the theme uses visual composer, if that is any help:)
.button_fixed{
position:fixed;
right:0;
top:35%;
z-index:99999999;
}
.button_fixed a{
border:3px solid #f37121;
border-radius:8px 0 0 8px;
background:rgba(0,0,0,0.4);
display:block;
border-right:0;
color:white;
margin-bottom:25px;
padding:10px;
font-family: 'Deftone Stylus';
font-size:35px;
width:150px;
position:relative;
}
span.oswald{
font-family: Oswald;
font-size:25px;
text-transform:uppercase;
displaY:inline-block;
padding-top:5px;
}
HTML:
<div class="button_fixed">
sell <br/><span class="oswald">equipment</span>
buy <br/><span class="oswald">equipment</span>
outsource <br/><span class="oswald">my sales</span>
</div>
site url: http://tinyurl.com/q9yangh
Thanks a lot for the help.
For #top add overflow: visible
I'm trying to build a button that has some notification attached to it and am trying to emulate the facebook notification styles. A little red circle in the top right corner with a number in it.
I'm having some issues with it though. I can't seem to get the circle in the right place or to get the number to actually sit inside of it.
my button looks like this
<button class="btn btn-blue" id="noteBtn">Notes <span class="notification">1</span></button>
and I've tred to do this with my css
.notification:before {
content: ' \25CF';
font-size: 5em;
color:red;
}
here is a js fiddle I was working with
http://jsfiddle.net/N8cjB/5/
<span> and I don't get along, so I changed it to a <div>
Here you go: http://jsfiddle.net/aXvqW/3/
edit moved it out of the button a little bit, as requested.
To make it simple you don't need :before.
Add border-radius to the span, and to center the number use text-align: center
.notification {
border-radius: 30px;
text-align: center;
border: red;
width:20px;
height:10px;
background: red;
padding: 2px;
}
Check this in fiddle
Change <span> to <div> and make button position:relative; and notification position:absolute; using CSS then put it wherever you want.
Check it out here: http://jsfiddle.net/N8cjB/26/
Code
.button{
margin:20px 0px;
border:1px solid #e2e2e2;
background:#f9f9f9;
padding:5px 10px;
position:relative;
cursor:pointer;
transition:all 0.4s;
}
button:hover{
background:#333;
border:1px solid #333;
color:#fff;
}
.notifications {
position:absolute;
border-radius:2px;
font-size:14px;
background-color:red;
color:#fff;
padding:2px 5px;
top:-10px;
right:-10px;
}
<button class="button">
Notes<div class="notifications">1</div>
</button>
I have to design a form with an input inside it. I use background image on the input so it would look like a button. Every time somebody clicks it, it would send $POST, a behavior I want to achieve.
But the problem is about the outline around the form. The outline shows when we click the form. It's minor, but it would be great to make the form (or input) lose the outline.
I test it using Firefox 3.6 and flock. Both of them show the outline behavior that I want to avoid.
<div id="hdrRight">
<form name="input" action="/home.html" method="post" id="buttonform" >
<input type="submit" value="" id="gohome" />
</form>
#----- CSS part
#hdrRight {
float:left; width:420px;
height:30px;
padding:0;
}
form#buttonform{
background-color:transparent;
border:none;
clear:both;
outline:none;
}
input#gohome{
padding:0;
margin:0;
background-color:transparent;
background-repeat:no-repeat;
width:280px;
height:60px;
border:none;
float:right;
background-image: url('images/gohome.png');
outline:none;
}
input#gohome:hover {
background-image: url('images/gohome_hover.png');
cursor:pointer;
outline:none;
}
Can you explain why this is happening and how to hide the outline?
Insert this in your CSS file for the site
form input
{
border: none;
outline: none;
}
And done.
Following Removing The Dotted Ouline:
This is default styling for the
purpose of accessibility. For folks
without the ability to use a mouse,
they still need some visual indicator
that they currently have a link active
(so, for example, they can press enter
to navigate to that link).
After creating a small test page locally, I see the following in Chrome:
Screen shot http://img714.imageshack.us/img714/7445/googlechromescreensnapz.jpg
With this CSS code (I added the borders so I can see where the form is and where the button is, note that the Lorem Ipsum is inside the form):
#hdrRight {
float:left; width:420px;
height:30px;
padding:0;
}
form#buttonform{
background-color:transparent;
border:1px solid black;
clear:both;
outline:none;
}
input#gohome{
padding:0;
margin:0;
background-color:transparent;
background-repeat:no-repeat;
width:280px;
height:60px;
border:1px solid black;
float:right;
background-image: url('images/gohome.png');
outline:none;
}
input#gohome:hover {
background-image: url('images/gohome_hover.png');
cursor:pointer;
border: 1px solid blue;
outline:none;
}
Actually, the "outline: none;" only works for anchor tags, not input tags or button tags (please try testing a sample HTML page in Firefox if you don't believe me).
Since the browser in question is Firefox, there is a browser specific rule for this.
input::-moz-focus-inner { border: 0; }
Appy...
border: none;
to your input
i can't figure out what makes an html button element appear to be pushed (right click an html button and then hover on and off to see what i mean).
the following two examples i've taken from other websites. the first has the typical button push effect. the second does not.
.button {
border:none 0;
background-color:Transparent; }
.button .l { background:url('img.gif') no-repeat 0 0;
padding-left:7px;
display:block;
height:32px; }
.button .c { background:url('img.gif') repeat-x 0 0;
display:block;
height:32px;
padding-top:7px; }
.button .r {
background:url('img.gif') no-repeat right top;
padding-right:7px;
display:block;
height:32px; }
and
.button {
background:#F0F0F0 url(img.gif) repeat-x scroll 0 0;
border:1px solid Black;
color:#333333;
font-size:12px;
height:20px;
padding-left:8px;
padding-right:8px; }
EDIT: # mr skeet, i want a button that will look the same in all browsers (ie. background image) but still behave like a real html button with the push effect. am i correct in assuming that i'll need javascript for this? and different css for the push state? an example/tutorial would be awesome
Either use
<input type="button" value="Click Me"/>
which will automatically act like a button, or use the :hover and :active CSS pseudo classes to get what you want...
a.likeAButton {
background-color:#67a0cf;
border:1px outset #2683cf;
color:#fff;
padding:3px 3px 3px 3px;
margin:1px;
text-decoration:none;
}
a.likeAButton:hover {
background-color:#5788af;
border:1px outset #2683cf;
color:#fcffdf;
padding:3px 3px 3px 3px;
margin:1px;
text-decoration:none;
}
a.likeAButton:active {
background-color:#67b4cf;
border:1px inset #1d659f;
color:#e0ffaf;
padding:4px 2px 2px 4px;
margin:1px;
text-decoration:none;
}
Fake Button
you can also add border radius to every element such as a.likeabutton, a.likeabutton:hover and all. this wil give it a good look. If we can make it like a list of Button then it will have a better Navbar feature, I tried this though, it position of these buttons does no remain same in Maximized and restored borwser.