I'm having some trouble with making an transition effect on a button.
Using "box-shadow" I am able to create this:
.load {
color:black;
border:none;
background-color: #ffffff;
width: 100px;
height: 30px;
margin-left: 21px;
box-shadow: inset 0 0 0 0 #000000;
transition-duration: 0.3s;
transition-timing-function: ease-in;
}
.load:hover {
transition-duration: 0.3s;
box-shadow: inset 0 -3px 0 0 #000000;
}
<button class="load"> Home
</button>
The shadow comes from the bottom and 3px into the button. I want it to be able to come from left to right, but still remaining at the 3px height.
I'm also pretty sure this website got it working, but i'm not able to extract the required CSS from inspecting it.
Website
Thanks!
You can do this using the :after attribute. See my example below. The width of the after element changes between 0 and 100% to get the effect. You can tweak the settings of .home-link:after easily to your needs.
Using only box-shadow is not the best way and surely not the best practise for this effect.
.home-link {
position: relative;
background: none;
border: none;
font-size: 1em;
color: blue;
width: 80px;
text-align: center;
margin: 0;
padding: 0;
}
.home-link:after {
position: absolute;
bottom: 0;
content: '';
display: block;
width: 0;
height: 3px;
background: #000;
-webkit-transition: width .2s ease-in-out;
transition: width .2s ease-in-out;
}
.home-link:hover:after {
width: 100%;
}
<button class="home-link">Home</button>
Related
I need a button whose after selector expands and gets disappeared when clicked. I need this effect via CSS.
When i click this button it's after selector expands.
Like
#button::after{
transform: scale(2);
}
But this is not happening for me. Please help me. When clicked the after selector button should expand then should disappear. In a nutshell, i need button scaling effect.
Do you mean something like this?
As far as I know you can't get an onclick event with CSS only and without using JavaScript. You can use :active, but this will only apply the style when the mouse button is held down. See Bojangles answer on "Can I have an Onclick effect in CSS".
#button {
display: block;
border: none;
position: relative;
color: red;
background-color: white;
font-size: 30px;
padding: 15px 30px;
}
#button:after {
content: '';
position: absolute;
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
border: 4px solid red;
color: black;
font-size: 8px;
opacity: 1;
transition: transform .3s ease, opacity .5s ease;
}
#button:active:after {
transform: scale(5);
opacity: 0;
}
<button id="button">BUTTON</button>
**The code snippet is built upon on benedikt's answer.
#button:after's border color is set to transparent, adds border-color during the animation. this creates the illusion that it disappears. I hope this helps.
#button {
display: block;
border: 4px solid red;
position: relative;
color: red;
background-color: white;
font-size: 30px;
padding: 15px 30px;
}
#button:after {
content: '';
position: absolute;
display: block;
width:100%;
height:100%;
top:0;
left:0;
border: 4px solid transparent;
color: black;
font-size: 8px;
opacity: 1;
transition: transform 0.3s ease, opacity 0.5s ease, border-color 0.1s ease;
}
#button:active:after {
transform: scale(2);
border-color:red;
opacity: 0;
}
<button id="button">BUTTON</button>
I am bit new to CSS/bootstrap style programming.
I am trying to create a SlideOut control. Please refer the working code in URL .
I am facing some issues as listed below
I am not able to get the curve on the left side of the button i.e. Top-Left and Bottom-Left (Please refer snapshot)
I want to increase the size of the Feedback area i.e. want to have the height and width as 500px each. But When I try chaning it in the CSS #slideout_inner, the slide out doesn't happen properly/smoothly.
I want to implement this slideout control using HTML and CSS/bootstrap only and don't want to use JQuery in it.
Can anyone please help me with this issues?
Space getting added inbetween the Button and the innerarea,
Border:
turn your border radius around
It should be like this
border-radius: 5px 0 0 5px;
/* here is the pattern */
border-radius: top-right top-left bottom-left bottom-right
Sizing:
You have to change the sizing in 3 places
#slideout:hover {
right: here;
}
#slideout_inner textarea {
display: block;
margin: 15px;
width: here;
height: 200px;
}
#slideout_inner textarea {
width: here;
height: 100px;
margin-bottom: 6px;
}
Demo:
#slideout {
position: fixed;
top: 40px;
right: 0;
width: 35px;
padding: 12px 0;
text-align: center;
background: #6DAD53;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-webkit-border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}
#slideout_inner {
position: fixed;
top: 40px;
right: -550px;
background: #6DAD53;
width: 500px;
padding: 25px;
height: 130px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-o-transition-duration: 0.3s;
text-align: right;
-webkit-border-radius: 0 0 0 5px;
-moz-border-radius: 0 0 0 5px;
border-radius: 0 0 0 5px;
}
#slideout_inner textarea {
width: 490px;
height: 100px;
margin-bottom: 6px;
}
#slideout:hover {
right: 550px;
}
#slideout:hover #slideout_inner {
right: 0;
}
<div id="slideout">
<img src="http://img.usabilitypost.com.s3.amazonaws.com/1104/css_slideout/feedback.png" alt="Feedback" />
<div id="slideout_inner">
<form>
<textarea></textarea>
<input type="submit" value="Post feedback">
</form>
</div>
</div>
I have created a CSS3 animation on a button. At the moment, it works perfectly everywhere apart from IE. I know it wont work well in older IE versions, but I was atleast expecting it to work in IE11.
I have created a fiddle to demonstrate Fiddle
I call the animation on :before and :after like so
animation: 1000ms ease 0s normal none infinite running pulse-long;
If you open the fiddle in Firefox or Chrome, you should see the animation on the button working. If you open it in IE11, it is just a static dot. I have gone online and tried a few things, such as moving the animation frames to the top of the CSS file, but it still does not work.
Is there any way to get this animation working in IE11?
There are two things that are preventing the animation from working in IE11 and they are as follows:
IE11 always has a problem when setting animation-play-state as running in the shorthand. There is no justification for this and it should probably be considered as a bug. Fix for this issue should be to just remove the running from the shorthand. This will cause no harm because the default value for animation-play-state is running.
The parent button container's dimension is only 10px x 10px whereas the pseudo-elements are eventually getting a dimension of 60px x 60px during the animation. While other browsers are by defaulting showing the overflow, IE11 seems to be cropping it. This needs to be cross-checked with the specs to find out if it is a bug or something that is loosely defined.
The fix for the overflow issue is again pretty simple. Just add a overflow: visible for the button container (.btnPulse.inactive). This will also not cause any problem in other browser because they are anyway doing this by default.
Snippet showing the overflow problem:
In the below snippet, I have avoided the animations and just added a couple of default box-shadow to the pseudo-elements such that the whole thing looks like 4 concentric circles with a red colored circle (produced by the button element) in the middle, followed by a white circle (blank space), followed by a blue colored circle (produced by box shadow of :before element) and then a green circle (produced by box shadow of :after element).
In Chrome, Firefox and Opera the concentric circles would be visible completely but IE11 will show only the center red circle because the rest is outside parent's area.
.btnPulse.inactive.throb::before {
box-shadow: 0 0 0 16px blue inset;
display: block;
height: 60px;
left: -22px;
margin: 0 auto;
right: 0;
top: 50%;
transform: translate3d(-3px, -50%, 0px);
width: 60px;
}
.btnPulse.inactive::before {
border-radius: 100%;
bottom: -5px;
box-shadow: 0 0 0 1px red inset;
content: "";
display: block;
height: 30px;
left: -10px;
margin: 0 auto;
position: absolute;
right: -5px;
top: -5px;
transition: all 300ms ease-in-out 0s;
width: 30px;
}
.btnPulse.inactive.throb::after {
border-radius: 100%;
bottom: -5px;
box-shadow: 0 0 0 8px green inset;
content: "";
display: block;
height: 60px;
left: -22px;
margin: 0 auto;
position: absolute;
right: -5px;
top: 50%;
transform: translate3d(-2px, -50%, 0px);
transition: all 300ms ease-in-out 0s;
width: 60px;
}
.btnPulse.inactive {
background: red none repeat scroll 0 0;
border: medium none;
border-radius: 100%;
height: 10px;
outline: medium none;
padding: 0;
position: relative;
width: 10px;
}
.btnPulse {
border-radius: 50%;
cursor: pointer;
height: 15px;
padding: 0;
transition: all 300ms ease-in-out 0s;
width: 15px;
}
.btn {
-moz-user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: 400;
line-height: 1.42857;
margin-bottom: 0;
padding: 6px 12px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
}
#button-container {
position: absolute;
left: 100px;
top: 100px;
}
<div id="button-container">
<button class="btn btnPulse inactive throb"></button>
</div>
Working Snippet with the fix:
The below snippet has both the above mentioned fixes applied and it works in IE11, Chrome, Firefox and Opera.
#keyframes pulse-short {
100% {
box-shadow: inset 0 0 0 80px red;
-moz-box-shadow: inset 0 0 0 80px red;
-webkit-box-shadow: inset 0 0 0 80px red;
height: 60px;
width: 60px;
left: -22px;
opacity: 0;
}
}
#keyframes pulse-long {
100% {
box-shadow: inset 0 0 0 10px red;
-moz-box-shadow: inset 0 0 0 10px red;
-webkit-box-shadow: inset 0 0 0 10px red;
height: 60px;
width: 60px;
left: -22px;
opacity: 0;
}
}
.btnPulse.inactive.throb::before {
animation: 1000ms ease 0s normal none infinite pulse-long;
box-shadow: 0 0 0 0 red inset;
display: block;
height: 100%;
left: 3px;
margin: 0 auto;
right: 0;
top: 50%;
transform: translate3d(-3px, -50%, 0px);
width: 100%;
}
.btnPulse.inactive::before {
border-radius: 100%;
bottom: -5px;
box-shadow: 0 0 0 1px red inset;
content: "";
display: block;
height: 30px;
left: -10px;
margin: 0 auto;
position: absolute;
right: -5px;
top: -5px;
transition: all 300ms ease-in-out 0s;
width: 30px;
}
.btnPulse.inactive.throb::after {
animation: 2500ms ease 300ms normal none infinite pulse-short;
border-radius: 100%;
bottom: -5px;
box-shadow: 0 0 0 0 red inset;
content: "";
display: block;
height: 30px;
left: -9px;
margin: 0 auto;
position: absolute;
right: -5px;
top: 50%;
transform: translate3d(-2px, -50%, 0px);
transition: all 300ms ease-in-out 0s;
width: 30px;
}
.btnPulse.inactive {
background: red none repeat scroll 0 0;
border: medium none;
border-radius: 100%;
height: 10px;
outline: medium none;
padding: 0;
position: relative;
width: 10px;
overflow: visible;
}
.btnPulse {
border-radius: 50%;
cursor: pointer;
height: 15px;
padding: 0;
transition: all 300ms ease-in-out 0s;
width: 15px;
}
.btn {
-moz-user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: 400;
line-height: 1.42857;
margin-bottom: 0;
padding: 6px 12px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
}
#button-container {
position: absolute;
left: 100px;
top: 100px;
}
<div id="button-container">
<button class="btn btnPulse inactive throb"></button>
</div>
IE 10 and 11 need css animation without webkit. like shown below.
#keyframes animation{
0%{width: 10px; height:10px; border-radius:5px; background:#bfbfbf;}
}
#element{animation: animation 2s ease-in-out 0s infinite alternate;}
This works for me finally.
I am trying to create a delete button, that once you click it, expands to show the delete option, so you won't delete anything by mistake. The problem is that the parent container jumps to full size right away while I would like it to grow gradually.
This can be overcome when I set the fixed pixel width for the parent container, but the problem is that I don't always know the width of the contents. Therefor I used a percentage to get it dynamic.
I don't really know how to explain it clearly so I've made a fiddle to show you: http://jsfiddle.net/cgHcP/
HTML:
<div class="right">
<div style="background-color: #000; display: inline-block;">
<div class="roll-button">
<div class="icon">x</div>
<div class="text">Remove</div>
</div>
</div>
<div style="background-color: #000; display: inline-block;">
<div class="roll-button">
<div class="icon">x</div>
<div class="text">Remove</div>
</div>
</div>
</div>
CSS:
/* Roll Button */
div.roll-button {
float: right;
display: inline;
position: relative;
height: 24px;
width: 24px;
-webkit-box-shadow: 0 0 0 2px #fff;
-webkit-border-radius: 12px;
text-align: center;
vertical-align: middle;
background-color: #fff;
overflow: hidden;
-webkit-transition: width .5s ease-in-out;
transition: width .5s ease-in-out;
}
div.roll-button .icon {
left: 0;
display: inline;
position: absolute;
font-size: 24px;
width: 24px;
height: 24px;
background-color: #ff3e3e;
-webkit-border-radius: 12px;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
text-align: center;
vertical-align: middle;
color: #fff;
line-height: .7;
}
div.roll-button .text {
float: left;
display: inline;
position: relative;
height: 24px;
overflow: hidden;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
vertical-align: middle;
line-height: 24px;
color: #ff3e3e;
font-weight: 700;
padding: 0 0 0 24px;
font-size: 12px;
}
div.roll-button:hover .text {
padding: 0 5px 0 29px;
}
div.roll-button:hover .icon {
-webkit-transform: rotateZ(-180deg);
}
div.roll-button:hover {
width: 100%;
}
.right {
float: right;
margin-right: 200px;
}
When you look at the fiddle, you'll notice the parent container (black), jumps to full size when hovered. Even though the child seems to grow gradually. This behavior causes trouble when you put multiple items inline (like in the fiddle, and exactly what I want to do).
I'm, trying to make this button purely with CSS, but this is where I get stuck. Does anyone have a suggestion how this can be done by using purely CSS?
The trick to achieving what you want is using width:auto on the .text and limiting the max-width of it.. the new working jsFiddle
div.roll-button .text {
width: auto;
max-width:0px;
}
div.roll-button:hover .text {
max-width:100px; /* set this to the maximum allowed value.. */
}
Ok, it seemed to much of a hassle to get this to work without using javascript, so I decided to go the javascript way using jQuery.
I now set the width in real pixels to bypass the problem that still occurs in most browsers when you make a transition from a pixel width to auto or percentage. I did it by creating a wrapper element with a overflow:hidden and summed up the width of the children. This sum I used to set the button width in real pixels.
Furthermore i've added a timer to close the button within a preset amount of time. My idea for this button was to not have to show a delete dialog asking if the content should really be deleted. Maybe this fiddle will be useful to someone else.
Check my latest fiddle for the final result.
HTML
<div class="roll-button">
<div class="icon">x</div>
<div class="label">Short Label</div>
</div>
<div class="roll-button">
<div class="icon">x</div>
<div class="label">This is a very long label</div>
</div>
CSS
body {
background-color: #ff3e3e;
}
.roll-button {
margin-right: 12px;
float: right;
display: inline-block;
width: 24px;
height: 24px;
overflow: hidden;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
white-space: nowrap;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
background-color: rgba(255,255,255,1);
-webkit-box-shadow: 0 0 0 2px rgba(255,255,255,1);
-moz-box-shadow: 0 0 0 2px rgba(255,255,255,1);
box-shadow: 0 0 0 2px rgba(255,255,255,1);
}
.roll-button .icon {
display: inline-block;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
width: 24px;
height: 24px;
background-color: #ff0000;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: 0 0 0 2px rgba(255,255,255,1);
-moz-box-shadow: 0 0 0 2px rgba(255,255,255,1);
box-shadow: 0 0 0 2px rgba(255,255,255,1);
text-align: center;
vertical-align: middle;
}
.roll-button .label {
display: inline-block;
height: 24px;
padding: 0 15px 0 5px;
}
.roll-button.open .icon {
-webkit-transform: rotateZ(-180deg);
}
javascript/jquery
$(function() {
$('.roll-button').bind('click',function() {
var iconWidth = $(this).find('.icon').outerWidth();
var newWidth = 0;
var timer = [];
var $elm = $(this);
$(this).children().each(function(){ newWidth += $(this).outerWidth(); });
if(!$(this).hasClass('open')) {
$(this).addClass('open').css({'width':newWidth+'px'});
setTimeout(function() {
$elm.removeClass('open').css({'width':iconWidth+'px'});
},5000);
}
});
});
I am using pure CSS based tooltip, but having display issue. The span box is hiding behind main boday and facebook like box which is in right sidebar. Below is the screenshot of the same.
Here is the tooltip CSS.
a.tooltip
{
position: relative;
display: inline-block;
}
a.tooltip span {
position: absolute;
width: 300px;
padding: 8px;
left: 50%;
font-size: 13px;
line-height: 16px;
margin-left: -160px;
text-align: justify;
visibility: hidden;
bottom: 40px; /** Use 30px for simple fade in effect - Removes slide down effect **/
opacity: 0;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
/** CSS Down Arrow **/
a.tooltip span:after {
content: '';
position: absolute;
bottom: -14px;
left: 50%;
margin-left: -9px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
a:hover.tooltip span {
opacity: 1;
visibility: visible;
bottom: 30px;
z-index: 100;
}
a.imgleft {
float: left;
margin: 0 15px 10px 0;
}
a.imgright {
float: right;
margin: 0 0 10px 15px;
}
a.imgleft span, a.imgright span {
bottom: 140px;
}
a:hover.imgleft span, a:hover.imgright span {
bottom: 130px;
}
/** Span Color **/
a.ttblue {
color: #E45742;
}
a.ttblue span {
background: #E45742;
border: 4px solid #E45742;
color: #FFF;
}
a.ttblue span:after {
border-top: 10px solid #E45742;
}
any help will be greatly appreciated! Thanks
I believe we had to see more of your pages html to be able to help you.
However, the only problem I can imagine is .tooltip being in a different stacking context than right sidebar's.
Does any of .tooltip's parents/grandparents have a z-index or an opacity level set on it? It might be an opacity level. If it is, set a positive z-index on it (or if sidebar has a z-index too, a higher one than sidebar's).