CSS - Animated button - html

I need animated CSS button, something like on the picture,
You can find that buttons here: http://todomvc.com/
Something similar to this:

You could try placing a div inside the button like so:
<button>
<div>
Button
</div>
</button>
And then set the div to animate to width: 100% and background: red
For the red line underneath, maybe an animation where you set the border-bottom property

Related

anchor tag doesn't work within div with :before pseudo element

I have a code something like this
<div class="container">
<a target="_blank" href="http://www.google.com">Google</a>
</div>
where I use the pseudo element ::before in container to set a background image with opacity for the container div. However, when I set the background image using the ::before pseudo element, I cannot click on the anchor tag, and when I remove the pseudo element, it works fine. How can I go around this issue by keeping the background image?
Thanks
Set pointer-events: none on the pseudo to let clicks pass through it.

Parallax transparent scrolling effect with "curtain" div placed outside the parallax div

I'm having problems making my "curtain" div transparent if it's outside the fixed DIV. In the example below I'd like to achieve transparency of the parallax-curtain DIV without having to place it inside the parallax DIV.
https://jsfiddle.net/0kfapw35/
I know it can be achieved if the DIVs are nested like so:
<div class="parallax">
<div class="parallax-curtain">
</div>
</div>
https://jsfiddle.net/wamosjk/jfxb0kz1/
Unfortunately, this doesn't work for me. Is that possible?
Thanks in advance!
The problem in your example is that if parallax-curtain is not a child of the parallax element, behind him it's only the body element, which is white. If your change the body element's background-color:red; you'll see that the transparency is indeed applied to parallax-curtain, it's just not visible in your example because it's the same color as the element behind him.
You can place the parallax element behind parallax-curtain, by adding position:sticky; z-index=-1; top:0;: https://jsfiddle.net/x837kwfb/60/

Swapping div content on hover with fade

I'm looking to have a div which shows just a h3 tag vertically aligned centre with a background image, which on hover shows a paragraph text block and button instead of the h3 element (so a straight swap) with a quick fade transition.
I can only see to find examples that swap on other elements.
Any ideas? Thanks!
<div class="col-lg-3">
<h3>Service Name</h3>
<p>This is the description of the service which explains what it's all about.</p>
<a class="button">Read More</a>
</div>
You can use CSS transition to give a fade effect. I tried to create something like you asked using just CSS. You can also add the show/hide with jquery. The transition css is from #Guillermo given here.
Check fiddle

How to create shape image border with clickable container?(use HTML and CSS)

I want create the border show in the picture but i want to stay clickable the under picture of frame.
I use a div on the other div,it's work but under div is not clickable.
I use border image,but the corner of left bottom is not create like the picture.
Any other way?
http://i.stack.imgur.com/z8HSs.jpg
I am using .png picture that cut center of that png picture.
My code is this:
<div id="slideshow204" class="slideshow" style="position:absolute;top:22px;right: 34px;z-index: 1;">
......
</div>
<div class="decor"><img style="position: absolute;z-index: 4;" src="http://shakeri.info/images/logo/zendeginameh.png" alt="">
</div>
problem solved.
I must add
pointer-events: none;
to the png's div to clickable under div.
need detail?
Click through a DIV to underlying elements

Add text inside the DIV on top image

I am trying to add text "Post" in the center of Div on top of image , but it adds next to the image:
HTML:
<div id="Post">
<span class="Post">Post
<img src="images/ask_post.png" />
</span>
</div>
CSS:
#Post {
position:absolute;
background-image:url('../images/ask_post.png') no-repeat;
left:741px;
top:157px;
}
First remove the image from the div element, the text wont go on top of that image, only the background. Second, play around with the background properties until it looks like you want it to.
My guess is that you need to adjust the background-size or background-position.
<div id="Post">
<span class="Post">Post</span>
</span>
See if background-size:cover; is what you need. You'll probably also have to adjust the height and width of the div to get what you want.
It looks like you are calling the image twice. Once in the css and again in the div. Remove