Someone knows how to make these hover effects animating the pseudoclasses :after and :before??
https://tympanus.net/Development/CreativeButtons/
thanks, I'm trying to learn, I don't need the sheet to buy or download
I've just analized it and it appears that there is an element:
section p button (the p I discovered is a better way to center, very nice)
a class for the button:
.btn
a normal pseudoclass for the basic hover effects:
.btn:hover
an after and before pseudoclass:
.btn:after
.btn:before
what I don't understand is how to animate .btn:after and .btn:before
here I have a reference sheet that I'm doing for myself where you can see (the css is not dry because it is a reference sheet and in a future I can use it to look to a specific object, class to reuse or modify
https://codepen.io/Heavybrush/pen/bWgXpx
Related
I am styling the underline of a link (<a href...>) via the pseudo class :before, to get a nice transition effect when hovering.
Now I want to exclude some links, if the have a certain class (for example: Button).
a:not(.btn) is working, but if I try to use a::before:not(.btn), the effect doesn't work anymore.
See this JSFiddle:
Working without :not, but the button should not have the effect: https://jsfiddle.net/bzo0nqey/1/
Broken with :not: https://jsfiddle.net/bzo0nqey/
I don't want to use <button> or some other element instead of <a>, because this would cost me hours of editing. Moreover, <a><img></a> is also having this effect falsely: https://jsfiddle.net/7v9u260j/
You have to put :not before ::before then its working like intended
a:not(.btn)::before
I try when click in button , will toggle class transition of
Here is my code
function linkFc(scope,element,attr) {
var toggle =angular.element(document.querySelector('.fa-bars'));
toggle.on('click',function(){
element.toggleClass('toggle');
})
}
Here is my plnkr
https://plnkr.co/edit/1403TdWErBAzrdbszkGo?p=preview
Where is my wrong ? Please help me
Assuming you want the width of the nav menu to transition back to 300px when you click the hamburger, you need to mover you transition rule to the base sate CSS block, you currently have it in the .toggle .nav-side-menu block, which is only applied when the parent element has the .toggle class.
Move the transition: all 1s ease; rule to the .nav-side-menu block to achieve the desired effect.
On another note, please read some articles about code quality and formatting. Your code is very messy, which will make it harder for others (and yourself) to read and maintain in the future.
I want to make a button that displays a background color when hovering and a button color without a background color when the button is down. Here is my current code:
.windowButton:hover {
background-color:#1a82b8;
}
.windowButton:active #windowClose polygon {
fill:#1a82b8;
}
The problem with the above code is that it turns the icon a color when :active but doesn't remove the background color set by :hover. How do I remove the background color?
You have to set a new background color on :hover state
.windowButton:hover {
background-color:#1a82b8;
}
.windowButton:active {
fill:#1a82b8;
background-color:#000000;/*You can put the color you want*/
}
Pseudo states inherit values. For consistency purposes, it is best to only declare the styles which you are changing in your pseudo state rules.
Note: :hover MUST come after :link and :visited (if they are present) in the CSS definition, in order to be effective!
How about this?
I would guess, its cause on the first property you are using background-color and the second fill.
button:hover {
background-color: red;
}
button:active {
background-color: blue;
}
jsFiddle working example (1)
In order for the active state to be applied while the user is also hovering over the button, it's necessary for the :hover selector to come before the :active selector in the code.
From https://developer.mozilla.org/en-US/docs/Web/CSS/:active:
Styles defined by the :active pseudo-class will be overridden by any
subsequent link-related pseudo-class (:link, :hover, or :visited) that
has at least equal specificity. To style links appropriately, put the
:active rule after all other link-related rules, as defined by the
LVHA-order: :link — :visited — :hover — :active.
While the accepted answer did mention that it's necessary to have :active come after :link and :visited, it doesn't say that it must also come after :hover (since in the example given in the question this was already the case). However this wasn't immediately clear to me, so I wanted to post this answer for anyone else who was stuck like I was because the :hover selector was coming after :active.
Also, I think the LVHA-order is a handy rule to keep in mind and relevant to this question.
`button:hover{background-color: transparent;color: yellow;}
button:active {background: white;color: black;}`
My question is really simple, just what i am trying to do is :hover, :after and :before , i want hover anf after to embed in same element, check out my css code:-
#sidebar .widget li a:before:hover, #sidebar .widget li a.active:before {
background-position: 65% 65.7%;
}
Here the element have an icon in :before which i cnt remove or modify, and also i want to have an hover effect on it...
Any solution for this, my console doesn't show the hovering effect?
Interesting question. If you're able to show us a working example we could probably be of more help.
However, in theory there's nothing wrong with what you're attempting to do (although not all browsers will like it: particularly IE8 and below).
The important thing to understand here is that :hover is a pseudo-class, whereas :before is a pseudo-element.
Here's a quick excerpt from the standard (with thanks to this answer previously on Stack Overflow):
Pseudo-classes are allowed anywhere in selectors while pseudo-elements
may only be appended after the last simple selector of the selector.
The mistake you're making is in your syntax: the order that you're appending them.
Try this instead:
#sidebar .widget li a:hover:before,
#sidebar .widget li a.active:before {
background-position: 65% 65.7%;
}
That should do as you wish. However this isn't going to give you great cross-browser coverage, it's not something that all browsers support of have implemented.
A better approach would be to:
reset the :before element to nothing (overwrite the styles you can't access);
use a non-repeated background image on the anchor instead (to display the image), and padding-left to give the indentation;
You can then switch the background-image in whatever fashion you see fit using :hover on the anchor in your CSS.
This will give you far better cross-browser compatibility.
Can I apply css style to dreamweaver hotspot? what I mean is to change backcolor,size,font size, etc...thanks
Hotspots, at least in my experience, are just the areas you define on an image that can be clickable. In HTML they add a map element to your code, assign that map to the image, and add area elements within the map element defining the region that is clickable. (see here: http://www.entheosweb.com/website_design/image_maps.asp)
In that case, you can't do much to control that area element with CSS.
If you're talking about hyperlinks (the element), then yes you can do all of the above. For example:
a:link, a:visited {
background-color: Red;
font-size: 24pt;
}
UPDATE:
If you want an easy way to style the message that appears when you hover over a hotspot, you can use this jQuery plug-in: qtip