I'm trying to make buttons with icons. For the icons I want to use the <i> tag. For example, if I want a button with a star icon at the beginning I want to write something in sort of:
<a class="button" href="#"><i class="star"></i><span>Button</span></a>
The problem is that my by button could be without an icon. Is there any way in Sass to check this? If no, what is the best way to do it?
Thank you.
If you need to give a different style to the link, maybe you could avoid to use extra markup for styling purpose (it's a bad practice) and assign the class (e.g. star) to the link
<a class="button star" href="#"><span>Button</span></a>
and put the icon as content of a pseudoelement, e.g.
.button.star:before {
content: url(...) // or some iconic font (e.g. fontello)
}
doing so you can have a different style for button with and without icon.
The answer of Fabrizio is the best option but if you really want to go with the extra markup route, you could use a span instead of an and nest the label span inside it :
<a class="button" href="#"><span class="star"><span>Button</span></span></a>
And adapt the CSS
.button .star {
// Icon styles
}
.button span span {
// Styles for the link when an icon is present
}
Related
I'm trying to make a dark theme via css for Tiktok's Chrome site and I'm having some trouble making the like button visable on the black background.
i tried using Filter:invert(1); and that worked but when you like the comment the red color is now teal.
tiktok doesn't use different divs for the different imgs so when i filter the black heart it filters the red one too. all tiktok does is switch the image links in the src. i want to specify the black img link in css to isolate it so i can filter that one and that one only.
This is the HTML of the red like button.
<img src="https://sf16-scmcdn-va.ibytedtos.com/goofy/tiktok/web/node/_next/static/images/liked-c7cae6d877d0cceec83f13891a4a8836.svg" class="jsx-1998704864 icon">
This is the one i want to isolate in css.
<img src="https://sf16-scmcdn-va.ibytedtos.com/goofy/tiktok/web/node/_next/static/images/unlike-c0928a8c3ac7b448ef79c4bb26aec869.svg" class="jsx-1998704864 icon">
This is what i have in my css
.like-container.jsx-1998704864 .icon.jsx-1998704864{
filter:invert(1);
}
Since you're not able to use JavaScript, your best option is to use attribute selectors. Please note that the source is probably very likely to change, since those classnames for example seem to be auto generated by some compiler. Same goes for the image URL.
To select the unlike button use
img[src="https://sf16-scmcdn-va.ibytedtos.com/goofy/tiktok/web/node/_next/static/images/unlike-c0928a8c3ac7b448ef79c4bb26aec869.svg"] {
/* your unlike button style */
}
For the like button use
img[src="https://sf16-scmcdn-va.ibytedtos.com/goofy/tiktok/web/node/_next/static/images/liked-c7cae6d877d0cceec83f13891a4a8836.svg"] {
/* your unlike button style */
}
EDIT (after 15 mins):
If you want to select any image tag which contains the word "unlike" you can also use this:
img[src*="unlike"] {
/* your unlike button style */
}
<div class="button share" style="display: none; float: left" id="share_btn_cont">
Share on Facebook
</div>
Here's my code for a Facebook share button. I've added some styling to the <a> element. I'd like to know how to write the CSS code for it in the parent file. How do I call out the <a> element?
The <a> has a class. Just target the class?
.share_btn {
//styling goes here
}
If you just want to write styles in an external css file for all buttons inside the div,
.button.share a.share_btn {
// Add styles here;
}
You could add just a.share_btn, but this will apply to all <a> tags with the class.
If you want styles to be added to just this button, inside this only this div,
#share_btn_cont #share_btn {
// Add styles here;
}
You can use #share_btn_cont > a#share_btn, but this will only look for elements which are one level down.
<div id="share_btn_cont"><a id="share_btn">Some Stuff</a></div>
It will work for the above case, and not for the one below.
<div id="share_btn_cont"><p><a id="share_btn">Some Stuff</a></p></div>
Also, use classes for a general use case, use id for targeting only a particular element.
.parent:first-child {
//code
}
I want the first of the two < i > elements to be shown when not hovering and the other one to be hidden, and when hovering I want the other way around. Is that possible with CSS or do I need to use JS?
<a class="btn btn-like postb2" href="#">
<i class="sprite-io sprite-like-grey"></i>
<i class="sprite-io sprite-like-white"></i>
3
</a>
.postb2 .sprite-like-grey,
.postb2:hover .sprite-like-white {
display: none;
}
.postb2:hover .sprite-like-grey {
display: inline;
}
Demo
You can change it to suit your HTML (btw. I don't see three i in your code)
I think I have an idea of what you want, and it is in fact feasible in CSS alone.
If you want to show a different sprite when hovering the anchor-tag, I would go about creating the markup a bit differently.
<a class="btn btn-like postb2" href="#">
<i class="sprite-io sprite-like"></i>
3
</a>
Instead of switching between two HTML-nodes, you would probably just want to change the coordinates of what to show in your CSS-sprite:
.postb2 .sprite-like{
background-position: -80px -80px; // just some arbitrary coordinates for example purposes
}
.postb2:hover .sprite-like{
background-position: -160px -160px;
}
Another note:
I see that you're using the names "sprite-like-grey" and "sprite-like-white". I would avoid naming my css-rules after how they appear at a certain point, and rather name them after what they actual are or perform in the application.
Know that's there is already the best answer for your case, but there's something I just discover about your question and Mr_Green comment which might be usefull.
You can indeed target sibling elems in CSS with combinators using + if the elems are next to each others or ~ if no (they need to be in the same parent).
Little Fiddle to show
More info on W3C Website
For my website I will need to use <span> instead of <a>, because I am using mostly ajax and thus instead of links I have onclick ajax events as attributes in my spans.
As a result, I had to manually style the spans to look like links. I have used hover and visited pseudo classes to change background and text colour, but to change the mouse default to a pointer finger on hover, will I need to use javascript? Or can I do that using css?
Also, I have just realized: I could not just use the <a> tag anyways instead of <span>, but just instead of an href, I would include an onclick? It should work just the same, no?
span {
cursor:pointer;
color:blue;
text-decoration:underline;
}
Hyperlink<br />
<span>Span</span>
Additionally, you can use :hover pseudo-class to style the element when hovered (you can use any styles not just the ones originally used). For example:
span:hover {
text-decoration:none;
text-shadow: 1px 1px 1px #555;
}
Note that if your website is public and you are counting on search engines to crawl your site, you lose a lot by leaving out links without href since spiders have nothing to grab on while crawling your page.
You should use a complete link - in case your javascript breaks down the user is still able to navigate through pages:
Link
than you can disable the link with jquery by using preventDefault() - and you totally separated base html and the javascript part, meaning your site is still usable without javascript on.
Than you don't need to bother with span hover and anything - but just for the sake of it
span:hover {
cursor:pointer;
}
will enable hover hand cursor on hovered span.
Option1
Just use an anchor link as follows:
Link
Option2
I don't know why you would wanna use span , but if you do you can do the following styles to make it look similar to an anchor link.
span {
color: #000000; /* Change this with links color*/
cursor: pointer;
text-decoration: underline;
}
span:hover {
color: #444444; /* Change the value to with anchors hover color*/
}
Just add cursor:pointer; in your span css.
Use CSS to display the cursor as a pointer:
<span style="cursor: pointer;">Pseudolink</span>
http://jsfiddle.net/kkepg/
You could use an anchor. But within javascript you'd have to use event.preventDefault() But there is a CSS method thats smaller and easier. Keep your span and use this:
span:hover{
cursor:pointer;
}
You can change the cursor to a pointer by specifying the cursor: pointer CSS rule.
You can also use <a> tags instead of <span>, in fact they can behave nicer with screen readers and other similar devices. You don't need to leave out the href attribute if you use the preventDefault() and stopPropagation() JavaScript functions in the onClick handler. This way you can retain some level of backward compatibility with non-JS enabled browsers.
You could use a button instead of span and use bootstrap css classes to style it like a link:
<button class="btn btn-link">Link</button>
It will react on mouseOver as normal links do.
Run the code snippet to preview the result:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<button class="btn btn-link">this is my link styled with bootstrap</button>
You can use an onClick event but if I remember correctly, you must return false in order to prevent your page from jumping around; something like:
<a href="#" onClick="myfunction();return false;">
or: <a href="#" onClick="return myfunction();"> provided that myfunction will return false.
You can also directly call a javascript from href but you must cast the result to void in order to block to the browser to try to follow the result as a valid link:
<a href="javascript:void(myFunction())">
Even if you still want to use the onClick property; it would still be a good idea to replace the href="#" with href="javascript:void(0)" ...>.
Other people have mentionned using the event.preventDefault() and stopPropagation(). I don't remember ever using one of these but I must admit that it has been many years since the last time that I have coding some javascript in a HTML link; so you should definitely investigate the use of these two functions.
EDIT: maybe that using a href="javascript:void(0)" could be a bad idea sometimes; see http://drupal.org/node/1193068 .
I'm reworking a site but only have permission to change the CSS. Most of the elements I need to change are properly tagged as id's or classes, but a few places have ids or classes listed inside an img tag.
I want to replace that image in the img tag using only css. Is there a way to do this? ie, hide the src img and have only my css referenced image visible?
sorry for such a late post, (almost a year, i know..), but i had the same exact problem Dreamling,
Some of the html used on our site is called up externally, so editing the html was not an option for me either. Here's how i solved the problem... Using only CSS.
Use Firebug if you have it.
Now look for the image you'd like to replace in the HTML. (firebug will show the id's and classes of the elements)
Your HTML should look something like this for it to work. (with an img src element inside a span element)
<span class="Dreamlings_ClassA Dreamlings_ClassB">
<img src="http://www.dreamlingsSite.com/dreamlingspic.png" alt="Dreamling's Pic">
<span>[This is just an extra span!] </span>
</span>
Now for the CSS :)
Call up the first element by class in the css. (use the last class name to be more specific in with editing [if you have multiple span elements with same first class name])
<span class="Dreamlings_ClassB">
should look something like this..
span.Dreamlings_ClassB {
background-image: url('../dreamlingsnewpic.png') !important;
}
and to hide that pesky image in the img src element..
span.Dreamlings_ClassA img {
display: none !important;
}
And thats it! :)
p.s. I was using the !important tags in my css to overwrite other external stylesheets..
but you don't have to use the tags if yours css will work without them. (you just have to be more specific in the css with id's and classes)
Hope this helped!
-tony
If your image tag is inside a container, anything that's a block, then use this:
<style>
#container {
background: url('image.png') no-repeat;
text-indent: -9999;
}
</style>
<div id="container">
<img src="image.png" alt="image to be replaced" />
</div>
As others said, it's really not good practice, but it works. Only tested in Chrome.
I want to replace that image in the img tag using only css.
Not that I know of, no. An image's src attribute can't be altered from CSS.
I also can't think of a workaround to do this, not even a terribly kludgy one. You can of course assign a background-image to the image element, but the actual image will always be in front of it,
You would have to have the original HTML altered in a way so the original button is a <button> element with a background-image property - that you can override using CSS.
Restricting access to the HTML but allowing access to edit CSS is odd practice. Both elements go hand in hand to produce the page.
Anyway, you could try removing or changing the name of "btn_next.png" so that it doesnt display when called from "src" and make the CSS the following:
#btn_next {
background: url('image.png') no-repeat;
display:block;
width:150px; /* for example */
height:30px; /* for example */
}
If that doesnt work, the only other way would be to hide the input button and replace the li row with a background image but then the button will cease to work. Unless you have access to an already included javascript file, then you can look at other solutions.