the effect im after is the following: the button doesn't look like a button (ie border: none) and when clicked I want the focus outline to fade out after n seconds.
How can i achieve that?
Thanks
Simply adding a transition. Important to remember is that you need to transition the outline-color, not the outline.
.no-button {
margin:15px;
border:none;
}
.no-button:focus {
outline-color:transparent;
-webkit-transition: outline-color .7s ease-out 1s;
-moz-transition: outline-color .7s ease-out 1s;
-o-transition: outline-color .7s ease-out 1s;
transition: outline-color .7s ease-out 1s;
}
<button class="no-button">This is no button</button>
The first time (.7s) is the duration, the second one (1s) is the delay.
For getting such an effect border is better than outline and I played a little bit with it for you and the result is as follow:
button {
background: border-box linear-gradient(#841518, #4C0C00) no-repeat;
font-size: x-large;
font-family: Sans;
border: none;
transition: border-color 0.7s 0.2s;
border-width: 15px;
box-sizing: border-box;
height: 80px;
width: 220px;
display: inline-block;
}
button:focus {
border-style: solid;
border-color: transparent;
outline: none;
}
<button type="button">Click here</button>
Related
Here is my website (currently building the mobile version). Here is the repository for the site.
button {
background-color: #fff;
border: 3px solid #efefef;
border-radius: 0.35em;
}
button:hover {
border-color: #49bf9d;
transition: border 0.2s ease-in-out;
}
I'm having issues with getting the border-color on my button elements to ease-out when hovering off the button element. The ease-in transition works just fine though.
Any Ideas?
Try this
add the transition property on button instead of hover
CSS
button
{
transition: border 0.2s ease-in-out !important;
}
hope this helps..
Add this to your CSS:
button {
transition: 0.4s ease-out all;
border: 4px solid black;
}
button:hover {
transition: 0.4s ease-in all;
border-color: red;
}
You can also add -moz-transition and -webkit-transition for older browsers.
I expected this to transition when entering and leaving the dimmed state but it only transitions when leaving. How can I make the transition work when entering it? I also tried ease-in and ease-out but these don't seem to make a difference.
.is-dimmed-unless-active:not(:active):not(:focus):not(:hover) {
opacity: .5;
transition: opacity .5s ease-in-out;
}
Live example of problem http://codepen.io/ryanve/pen/doKdgW
Because you need to define the transition on .card:
.card {
transition: opacity .5s ease-in-out;
}
Instead on:
.is-dimmed-unless-active:not(:active):not(:focus):not(:hover) {
transition: opacity .5s ease-in-out;
}
Change you css to this:
.is-dimmed-unless-active {
transition: opacity .5s ease-in-out;
opacity: 1;
}
.is-dimmed-unless-active:hover {
opacity: .5;
}
.card {
width: 60%;
margin: 1em auto;
padding: 1em;
color: crimson;
border: 3px dotted crimson;
}
body {
font-family: sans-serif;
background: white;
}
I've got some buttons that have a CSS transition from black to yellow on hover, then return back to black. When clicked they make an AJAX call. They work nicely when I hover over them and click a mouse on all desktop browsers (naturally IE9 and lower ignore it), but on both iOS Safari, and the standard Android browser, the transition stays yellow after I have clicked the button. They do not return to the normal black state, like they do on a desktop system.
Any clues as to where I've gone wrong would be greatly appreciated. For those with a touch device, this Fiddle demonstrates the problem - http://jsfiddle.net/wpyz9whn/1/
CSS
a.button {
background-color: #000000;
color: #FFFFFF;
border: none;
text-decoration: none;
padding: 0px 10px;
display: block;
line-height: 24px;
font-weight: 700;
text-align: center;
transition: background 0.8s ease-out;
-moz-transition: background 0.8s ease-out;
-webkit-transition: background 0.8s ease-out;
text-transform: uppercase;
-webkit-appearance: none;
}
a.button:hover {
background: #ffcc00;
color: #000;
transition: background 0.2s ease-in;
-moz-transition: background 0.2s ease-in;
-webkit-transition: background 0.2s ease-in;
}
a.button:active {
background: #ff9c00;
transition: background 0s ease-in;
-moz-transition: background 0s ease-in;
-webkit-transition: background 0s ease-in;
}
a.button:focus {
outline: none;
}
HTML
<a class="button" onclick="return addToBasket(11628937,'/')">Add to Basket</a>
I'm new up here, and I tried ti find an answer to my question on existing forums. I tried some and couldn't resolve the issue.
I want to make the hover effect to stay after mouseout on this pre-structured code.
Someone have an idea ?
Thanks much !!!
#search_block_top {
position:absolute;
right: 0;
top: 120px;
z-index: 99;
}
#search_block_top p {padding:0;}
#search_block_top #search_query_top {
border: medium none;
height: 31px;
padding: 0;
width: 1px;
background:#FFF;
box-shadow:none;
line-height: 33px\9;
-moz-transition: width 0.5s ease 0s;
-o-transition: width 0.5s ease 0s;
-ms-transition: width 0.5s ease 0s;
-webkit-transition: width 0.5s ease 0s;
}
#search_block_top .button {
background: url("img/bg-search.png") no-repeat scroll right center transparent;
border: medium none;
border-radius: 0 0 0 0;
height: 33px;
line-height: 33px;
margin: 10px -5px 0 0;
padding: 0;
text-indent: -9999px;
width: 57px;
}
#search_query_top:focus,
#searchbox:focus #search_query_top,
#searchbox:hover #search_query_top{
-moz-transition: width 0.5s ease 0s;
-o-transition: width 0.5s ease 0s;
-ms-transition: width 0.5s ease 0s;
-webkit-transition: width 0.5s ease 0s;
width: 130px;
padding-left:10px;
margin: 10px 0 0;
background:#fff;
border: 1px solid #CCC;
}
#searchbox{}
#searchbox label{
text-indent: -9999px;
}
#searchbox #search_query_block{
border: 1px solid #CCCCCC;
-webkit-border-radius:3px !important;
-moz-border-radius:3px !important;
border-radius:3px !important;
height: 18px;
margin-top:10px;
}
#searchbox #search_button{padding: 1px 4px;}
#badAdviceGuy is right on this one. There's no way in pure css to make the change stay there after you've hovered off of it.
If you do want to venture into jQuery territory however, it would look something like this:
$(document).on('mouseenter', '#hover-element', function(){
$(this).addClass('highlight');
});
Then you would just add whatever changes you want to take place to the highlight class in css and voila!
hope that helps
Well it's best practice to put the jQuery code into a separate js file, but it seems like you'd rather just get it to work so here's the quick and dirty way:
using the css you added above, your new css will look like this:
Change this:
#search_query_top:focus,
#searchbox:focus #search_query_top,
#searchbox:hover #search_query_top{
-moz-transition: width 0.5s ease 0s;
-o-transition: width 0.5s ease 0s;
-ms-transition: width 0.5s ease 0s;
-webkit-transition: width 0.5s ease 0s;
width: 130px;
padding-left:10px;
margin: 10px 0 0;
background:#fff;
border: 1px solid #CCC;
}
To be this:
#search_query_top:focus,
#searchbox:focus #search_query_top,
#searchbox.highlight #search_query_top {
-moz-transition: width 0.5s ease 0s;
-o-transition: width 0.5s ease 0s;
-ms-transition: width 0.5s ease 0s;
-webkit-transition: width 0.5s ease 0s;
width: 130px;
padding-left:10px;
margin: 10px 0 0;
background:#fff;
border: 1px solid #CCC;
}
the html you copied in won't need to be changed, don't worry about that. Then you'll want to add this code into your header before the closing </head> tag
<script type="text/javascript">
$(document).ready(function(){
$(document).on('mouseenter', '#searchbox', function(){
$(this).addClass('highlight');
});
});
</script>
The only issue with this is that you may not have already included the jQuery library. If you put this code in and it doesn't work, add the following code into the header right before the js code you just put in:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Let me know if that helps, to answer your second question, no, css won't be able to override the styling on mouseleave.
Keep in mind also that if you're using something like wordpress, then the rules are different and none of this code will work.
good luck!
I have a textarea and on focus I would like to animate both Border Shadow and Border Radius, the problem is if I try to combine those two together Border Radius animation does not work it just "Pops Out" without any animation. I have created a Fiddle to show you my problem.
Code looks like this:
textarea{
display: block;
padding-left: 3px;
padding-right: 3px;
border: 1px solid #e7e7e7;
box-shadow: 0 0 3px #e7e7e7;
background: none;
color: #6b6b6b;
max-width: 100%;
}
textarea:focus {
outline: none;
box-shadow: 0 0 25px #9ecaed;
-webkit-transition: box-shadow linear 1s;
transition: box-shadow linear 1s;
border-color: #9ecaed;
transition : border 500ms ease-out;
-webkit-transition : border 500ms ease-out;
-moz-transition : border 500ms ease-out;
-o-transition : border 500ms ease-out;
}
CSS doesn't work the way you're expecting it to.
After setting transition: box-shadow linear 1s; you are overriding it with transition : border 500ms ease-out;. You have to set them both on the same property.
Like so (Fiddle):
textarea:focus {
outline: none;
box-shadow: 0 0 25px #9ecaed;
border-color: #9ecaed;
transition: box-shadow linear 1, border 500ms ease-out;
-webkit-transition: box-shadow linear 1, border 500ms ease-out;
-moz-transition: box-shadow linear 1, border 500ms ease-out;
-o-transition: box-shadow linear 1, border 500ms ease-out;
}