CSS continue animation after mouseleave

CSS continue animation after mouseleave - javascript

Can someone please help me with css animation? Mb I should use js too?
I want to create hover animation left->right but after mouse leave, I want to continue animation left->right not right->left.
Thanks
.button_sliding_bg {
color: #31302B;
background: #FFF;
padding: 12px 17px;
margin: 25px;
font-family: 'OpenSansBold', sans-serif;
border: 3px solid #31302B;
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
border-radius: 2px;
display: inline-block;
text-align: center;
cursor: pointer;
box-shadow: inset 0 0 0 0 #31302B;
-webkit-transition: all ease 0.8s;
-moz-transition: all ease 0.8s;
transition: all ease 0.8s;
}
.button_sliding_bg:hover {
box-shadow: inset 100px 0 0 0 #31302B;
color: #FFF;
}
<button class="button_sliding_bg">
Button
</button>
I want something like this:
Here is the solution:
window.setTimeout(function() {
document.getElementById('btn').style.visibility = 'visible';
}, 400);
.button_sliding_bg {
visibility:hidden;
padding: 12px 17px;
margin: 25px;
font-family: 'OpenSansBold', sans-serif;
border: 3px solid #31302B;
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
border-radius: 2px;
display: inline-block;
text-align: center;
cursor: pointer;
animation: animate-out 0.5s 1;
animation-fill-mode:forwards;
}
.button_sliding_bg:hover {
animation: animate-in 0.5s 1;
animation-fill-mode:forwards;
}
#keyframes animate-in {
0% {
box-shadow: inset 0 0 0 0 #31302B;
color:#31302B;
background: #FFF;
}
100% {
box-shadow: inset 100px 0 0 0 #31302B;
color:#FFF;
background: #FFF;
}
}
#keyframes animate-out {
0% {
box-shadow: inset 0 0 0 0 #FFF;
background: #31302B;
color:#FFF;
}
100% {
box-shadow: inset 100px 0 0 0 #FFF;
background: #31302B;
color:#31302B;
}
}
<button id="btn" class="button_sliding_bg">
Button
</button>

If you dont mind that it runs the first when the page loads, you can use CSS3's animation properties to get what you're trying to achieve. The trick is the combination of changing the animation-name on hover and the use of animation-fill-mode to persist the changes made. Do keep in mind that CSS3's animation is considered "experimental", however, it has almost complete coverage on the latest browser versions.
JSFIDDLE
CSS
.button_sliding_bg {
padding: 12px 17px;
margin: 25px;
font-family: 'OpenSansBold', sans-serif;
border: 3px solid #31302B;
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
border-radius: 2px;
display: inline-block;
text-align: center;
cursor: pointer;
animation-name: animate-out;
animation-duration: 0.5s;
animation-repeat-count: 1;
animation-fill-mode: forwards;
}
.button_sliding_bg:hover {
animation-name: animate-in;
}
#keyframes animate-in {
0% {
box-shadow: inset 0 0 0 0 #31302B;
color:#31302B;
background: #FFF;
}
100% {
box-shadow: inset 100px 0 0 0 #31302B;
color:#FFF;
background: #FFF;
}
}
#keyframes animate-out {
0% {
box-shadow: inset 0 0 0 0 #FFF;
background: #31302B;
color:#FFF;
}
100% {
box-shadow: inset 100px 0 0 0 #FFF;
background: #31302B;
color:#31302B;
}
}

Related

Using 'class="select-chosen"'

I'm looking to use select-chosen for my select dropdown as it has both a search feature and a flat UI which matches the UI of what I'm working on. (So trying to stay away from 'select2', 'chosen-select', etc.)
Link to example page
When I inspect the element in Chrome to see how it works I find:
<select id="example-chosen" name="example-chosen" class="select-chosen" style="width: 250px; display: none;">
I also find that it seems to depend on: 'bootstrap.min', 'main' and 'plugins' css/js all of which are imported into my project.
However when I try to put this into practice I get nothing. Disabling 'display:none' returns:
I think I'm right in saying that the 'display: none' is there because bootstrap generates a new dropdown requiring me to 'hide' my hard-coded one. Surely then, the select-chosen is not being generated?
To clarify, I'm trying to recreate the dropdown shown in the example link on my own page.
Here is a snippet of the code I'm using:
<select name="user" id="user-select" class="select-chosen" style="display:none;"><option>admin</option><option>user</option></select>
Can anyone see where I'm going wrong?

Working fiddle.
The example in your page use the jQuery plugin chosen and the css of bootstrap so it will be bootstrap-chosen, you have just to define your select as usual and add chosen class to it then init the plugin using $('.chosen').chosen();, check the example bellow.
HTML :
<select class="form-control chosen" data-placeholder="Choose an option please">
<option value=""></option>
<option value="1" >Option 1</option>
<option value="2" >Option 2</option>
</select>
JS :
$('.chosen').chosen();
Hope this helps.
$('.chosen').chosen();
select.form-control + .chosen-container.chosen-container-single .chosen-single {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #555;
vertical-align: middle;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
background-image:none;
}
select.form-control + .chosen-container.chosen-container-single .chosen-single div {
top:4px;
color:#000;
}
select.form-control + .chosen-container .chosen-drop {
background-color: #FFF;
border: 1px solid #CCC;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box;
margin: 2px 0 0;
}
select.form-control + .chosen-container .chosen-search input[type=text] {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #555;
vertical-align: middle;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
background-image:none;
}
select.form-control + .chosen-container .chosen-results {
margin: 2px 0 0;
padding: 5px 0;
font-size: 14px;
list-style: none;
background-color: #fff;
margin-bottom: 5px;
}
select.form-control + .chosen-container .chosen-results li ,
select.form-control + .chosen-container .chosen-results li.active-result {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333;
white-space: nowrap;
background-image:none;
}
select.form-control + .chosen-container .chosen-results li:hover,
select.form-control + .chosen-container .chosen-results li.active-result:hover,
select.form-control + .chosen-container .chosen-results li.highlighted
{
color: #FFF;
text-decoration: none;
background-color: #428BCA;
background-image:none;
}
select.form-control + .chosen-container-multi .chosen-choices {
display: block;
width: 100%;
min-height: 34px;
padding: 6px;
font-size: 14px;
line-height: 1.428571429;
color: #555;
vertical-align: middle;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
background-image:none;
}
select.form-control + .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
height:auto;
padding:5px 0;
}
select.form-control + .chosen-container-multi .chosen-choices li.search-choice {
background-image: none;
padding: 3px 24px 3px 5px;
margin: 0 6px 0 0;
font-size: 14px;
font-weight: normal;
line-height: 1.428571429;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid #ccc;
border-radius: 4px;
color: #333;
background-color: #FFF;
border-color: #CCC;
}
select.form-control + .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
top:8px;
right:6px;
}
select.form-control + .chosen-container-multi.chosen-container-active .chosen-choices,
select.form-control + .chosen-container.chosen-container-single.chosen-container-active .chosen-single,
select.form-control + .chosen-container .chosen-search input[type=text]:focus{
border-color: #66AFE9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(102, 175, 233, 0.6);
}
select.form-control + .chosen-container-multi .chosen-results li.result-selected{
display: list-item;
color: #ccc;
cursor: default;
background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<select class="form-control chosen" data-placeholder="Choose an option please">
<option value=""></option>
<option value="1" >Option 1</option>
<option value="2" >Option 2</option>
</select>

How may I stack multiple html/css buttons vertically along the center of the page?

My css is listed below, followed by the html.
I am not currently aware of a method to centralize the buttons within the below detailed "box/inner-box" s. The flex display seems to be stacking the buttons vertically (though, honestly, I am not certain as to how), but, no matter what I try, and I have tried most searchable recommendations, I cannot seem to locate the column of buttons to the centre of the page, beneath the 'my name' . Does anyone know how I might centralize the buttons or if there is a much simpler method for accomplishing a similar aesthetic? I am open to all solutions. Thank you in advance!
html, body {
height: 100%;
background: #ffffff;
overflow: hidden;
color: #000000;
font-family: 'Raleway';
font-size: 18px;
}
h1 {
font-weight: 200;
margin-bottom: 0.5em;
text-align: center;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
background-color: #ffffff;
width: 90%;
max-width: 1920px;
padding: 5px;
border: 2px solid #000000;
}
.box .box-inner {
position: relative;
border: 2px solid #000000;
padding: 40px;
}
.btn {
box-sizing: border-box;
appearance: none;
background-color: transparent;
border: 2px solid #000000;
border-radius: 0.6em;
color: #000000;
cursor: pointer;
font-size: 18px;
font-weight: 400;
line-height: 1;
margin: 12px;
padding: 1.2em 1.5em;
display: flex;
text-transform: uppercase;
font-family: 'Raleway';
font-weight: 400;
}
.btn:hover, .btn:focus {
color: #000000;
outline: 0;
}
.me {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.me:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.cv {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.cv:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rd {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rd:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.av {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.av:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rr {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rr:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
<body>
<div class='box'>
<div class='box-inner'>
<h1>myname</h1>
<button class="btn me">me</button>
<button class="btn cv">cv</button>
<button class="btn rd">rd</button>
<button class="btn av">av</button>
<button class="btn rr">rr</button>
</div>
</div>
</body>

I know you already have multiple answers. However the way you use flex is not correct. It should be added into the parent div box-inner
display:flex;
align-items:center; //align item center
flex-direction:column; //direction to column
html, body {
height: 100%;
background: #ffffff;
overflow: hidden;
color: #000000;
font-family: 'Raleway';
font-size: 18px;
}
h1 {
font-weight: 200;
margin-bottom: 0.5em;
text-align: center;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
background-color: #ffffff;
width: 90%;
max-width: 1920px;
padding: 5px;
border: 2px solid #000000;
}
.box .box-inner {
position: relative;
border: 2px solid #000000;
padding: 40px;
display:flex;
align-items:center;
flex-direction:column;
}
.btn {
box-sizing: border-box;
appearance: none;
background-color: transparent;
border: 2px solid #000000;
border-radius: 0.6em;
color: #000000;
cursor: pointer;
font-size: 18px;
font-weight: 400;
line-height: 1;
margin: 12px;
padding: 1.2em 1.5em;
text-transform: uppercase;
font-family: 'Raleway';
font-weight: 400;
}
.btn:hover, .btn:focus {
color: #000000;
outline: 0;
}
.me {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.me:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.cv {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.cv:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rd {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rd:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.av {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.av:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rr {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rr:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
<body>
<div class='box'>
<div class='box-inner'>
<h1>myname</h1>
<button class="btn me">me</button>
<button class="btn cv">cv</button>
<button class="btn rd">rd</button>
<button class="btn av">av</button>
<button class="btn rr">rr</button>
</div>
</div>
</body>

Check out this code: you need to have a margin: 0 auto, and add text-align:center.
html, body {
height: 100%;
background: #ffffff;
overflow: hidden;
color: #000000;
font-family: 'Raleway';
font-size: 18px;
}
h1 {
font-weight: 200;
margin-bottom: 0.5em;
text-align: center;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
background-color: #ffffff;
width: 90%;
max-width: 1920px;
padding: 5px;
border: 2px solid #000000;
}
.box .box-inner {
position: relative;
border: 2px solid #000000;
padding: 40px;
}
.btn {
box-sizing: border-box;
display: block;
margin: 0 auto;
appearance: none;
background-color: transparent;
border: 2px solid #000000;
border-radius: 0.6em;
color: #000000;
cursor: pointer;
font-size: 18px;
font-weight: 400;
line-height: 1;
padding: 1.2em 1.5em;
display: flex;
text-transform: uppercase;
font-family: 'Raleway';
font-weight: 400;
}
.btn:hover, .btn:focus {
color: #000000;
outline: 0;
}
.me {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.me:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.cv {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.cv:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rd {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rd:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.av {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.av:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rr {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rr:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}

Simply add below CSS
.box
{
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100%;
}
.box .btn {
display: block;
margin: 0 auto;
}
and modify you HTML too
<body>
<div class="box">
<h1>myname</h1>
<button class="btn me">me</button>
<button class="btn cv">cv</button>
<button class="btn rd">rd</button>
<button class="btn av">av</button>
<button class="btn rr">rr</button>
</div>
</body>
this will place buttons in center of page, both horizontally and vertically.

check out this code: you need to have a margin 0 auto, and add text-align:center
html, body {
height: 100%;
background: #ffffff;
overflow: hidden;
color: #000000;
font-family: 'Raleway';
font-size: 18px;
}
h1 {
font-weight: 200;
margin-bottom: 0.5em;
text-align: center;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
background-color: #ffffff;
width: 90%;
max-width: 1920px;
padding: 5px;
border: 2px solid #000000;
}
.box .box-inner {
position: relative;
border: 2px solid #000000;
padding: 40px;
}
.btn {
box-sizing: border-box;
display: block;
margin: 0 auto;
appearance: none;
background-color: transparent;
border: 2px solid #000000;
border-radius: 0.6em;
color: #000000;
cursor: pointer;
font-size: 18px;
font-weight: 400;
line-height: 1;
padding: 1.2em 1.5em;
display: flex;
text-transform: uppercase;
font-family: 'Raleway';
font-weight: 400;
}
.btn:hover, .btn:focus {
color: #000000;
outline: 0;
}
.me {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.me:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.cv {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.cv:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rd {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rd:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.av {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.av:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rr {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rr:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
<body>
<div class='box'>
<div class='box-inner'>
<h1>myname</h1>
<button class="btn me">me</button>
<button class="btn cv">cv</button>
<button class="btn rd">rd</button>
<button class="btn av">av</button>
<button class="btn rr">rr</button>
</div>
</div>
</body>

Convert button to on hover transition

I've come across the following code online for a nice button that when clicked appears to be pressed.
I'd like to add a transition with the button appearing pressed on hover not on click.
How can I do this?
/**
* AddToCalendar Icon Style
* http://addtocalendar.com
*/
/* Base */
.addtocalendar var{
display: none;
}
.addtocalendar {
position: relative;
display: inline-block;
background: transparent!important;
}
.atcb-link {
display: block;
outline: none!important;
cursor: pointer;
}
.atcb-link:focus~ul,
.atcb-link:active~ul,
.atcb-list:hover{
visibility:visible;
}
.atcb-list {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
width: 170px;
z-index: 900;
}
.atcb-list,
.atcb-item
{
list-style: none;
margin: 0;
padding: 0;
background: #fff;
}
.atcb-item {
float: none;
text-align: left;
}
.atcb-item-link
{
text-decoration: none;
outline: none;
display: block;
}
.atcb-item.hover,
.atcb-item:hover {
position: relative;
z-index: 900;
cursor: pointer;
text-decoration: none;
outline: none;
}
/* Orange */
.atc-style-glow-orange .atcb-list{
margin: 10px 0px 0px 0px;
padding: 0;
color: #fff;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
border-radius: 4px;
}
.atc-style-glow-orange .atcb-link
{
position: relative;
color: rgba(255,255,255,1);
text-decoration: none;
background-color: rgba(219,87,5,1);
font-size: 1em;
display: block;
padding: 4px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 12px rgba(0,0,0,.7);
-moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 12px rgba(0,0,0,.7);
box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 12px rgba(0,0,0,.7);
text-align: center;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}
.atc-style-glow-orange .atcb-link:active {
-webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
-moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
position: relative;
top: 6px;
}
.atc-style-glow-orange .atcb-link,
.atc-style-glow-orange .atcb-link:hover,
.atc-style-glow-orange .atcb-link:active,
.atc-style-glow-orange .atcb-link:focus
{
color: #fff;
font-family: "Verdana";
font-size: 14px;
text-decoration: none;
outline: none;
padding: 7px 25px;
}
.atc-style-glow-orange .atcb-list {
width: 170px;
border: 1px solid #fff;
border: 1px solid rgb(186,186,186);
border-radius: 2px;
box-shadow: 0 0 5px #AAA;
}
.atc-style-glow-orange .atcb-list,
.atc-style-glow-orange .atcb-item
{
background: #fff;
color: #000;
}
.atc-style-glow-orange .atcb-item,
.atc-style-glow-orange .atcb-item-link
{
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
}
.atc-style-glow-orange .atcb-item-link,
.atc-style-glow-orange .atcb-item-link:hover,
.atc-style-glow-orange .atcb-item-link:active,
.atc-style-glow-orange .atcb-item-link:focus
{
color: #000;
font-family: "Verdana";
font-size: 14px;
text-decoration: none;
outline: none;
padding: 5px 15px;
}
.atc-style-glow-orange .atcb-item-link:hover,
.atc-style-glow-orange .atcb-item-link:active,
.atc-style-glow-orange .atcb-item-link:focus
{
color: #fff;
background: rgba(219,87,5,1);
}
.atc-style-glow-orange .atcb-item.hover,
.atc-style-glow-orange .atcb-item:hover {
background: rgba(250,203,175,1);
}
<span class="addtocalendar atc-style-glow-orange" id="atc_btn_orange" data-on-button-click="atcButtonClick" data-on-calendar-click="atcCalendarClick">
<a class="atcb-link">Add to Calendar</a>
</span>
</div>

Provide hover to the class which you need like,
.classname:hover{
background-color:#FF0000;
}

Change this:
.atc-style-glow-orange .atcb-link:active {
to this:
.atc-style-glow-orange .atcb-link:hover {
Here is the JSFiddle demo

Select Box squished and elongated in Firefox

Here's the jsfiddle for the rest of the code but I attached my style css below
In Chrome they look like this
In Internet Explorer they look like this
And in Firefox they look like this
Not exactly sure what the issue is and how to fix it
And here is my style css
html {
height: 100%;
}
* {
margin: 0;
padding: 5;
}
body {
font: normal .80em'trebuchet ms', arial, sans-serif;
background: #F5F5EE;
color: #555;
}
p {
padding: 0 0 20px 0;
line-height: 1.7em;
}
img {
border: 0;
}
h1, h2, h3, h4, h5, h6 {
color: #362C20;
letter-spacing: 0em;
padding: 0 0 5px 0;
}
h1, h2, h3 {
font: normal 170%'century gothic', arial;
margin: 0 0 15px 0;
padding: 15px 0 5px 0;
color: #000;
}
h2 {
font-size: 160%;
padding: 9px 0 5px 0;
color: #009FBC;
}
h3 {
font-size: 140%;
padding: 5px 0 0 0;
}
h4, h6 {
color: #009FBC;
padding: 0 0 5px 0;
font: normal 110% arial;
text-transform: uppercase;
}
h5, h6 {
color: #888;
font: normal 95% arial;
letter-spacing: normal;
padding: 0 0 15px 0;
}
a, a:hover {
outline: none;
text-decoration: underline;
color: #AEB002;
}
a:hover {
text-decoration: none;
}
blockquote {
margin: 20px 0;
padding: 10px 20px 0 20px;
border: 1px solid #E5E5DB;
background: #FFF;
}
ul {
margin: 2px 0 22px 17px;
}
ul li {
list-style-type: circle;
margin: 0 0 6px 0;
padding: 0 0 4px 5px;
line-height: 1.5em;
}
ol {
margin: 8px 0 22px 20px;
}
ol li {
margin: 0 0 11px 0;
}
.left {
float: left;
width: auto;
margin-right: 10px;
}
.right {
float: right;
width: auto;
margin-left: 10px;
}
.center {
display: block;
text-align: center;
margin: 20px auto;
}
#main, #logo, #menubar, #site_content, #footer {
margin-left: auto;
margin-right: auto;
}
#header {
background: #323534 url(back.png) repeat-x;
height: 177px;
}
#logo {
width: 880px;
position: relative;
height: 140px;
background: transparent;
}
#logo #logo_text {
position: absolute;
top: 10px;
left: 0;
}
#logo h1, #logo h2 {
font: normal 300%'century gothic', arial, sans-serif;
border-bottom: 0;
text-transform: none;
margin: 0 0 0 9px;
}
#logo_text h1, #logo_text h1 a, #logo_text h1 a:hover {
padding: 22px 0 0 0;
color: #FFF;
letter-spacing: 0.1em;
text-decoration: none;
}
#logo_text h1 a .logo_colour {
color: #E4EC04;
}
#logo_text a:hover .logo_colour {
color: #FFF;
}
#logo_text h2 {
font-size: 120%;
padding: 4px 0 0 0;
color: #999;
}
#menubar {
width: 880px;
height: 46px;
}
ul#menu {
float: right;
margin: 0;
}
ul#menu li {
float: left;
padding: 0 0 0 9px;
list-style: none;
margin: 1px 2px 0 0;
background: #5A5A5A url(tab.png) no-repeat 0 0;
}
ul#menu li a {
font: normal 100%'trebuchet ms', sans-serif;
display: block;
float: left;
height: 20px;
padding: 6px 35px 5px 28px;
text-align: center;
color: #FFF;
text-decoration: none;
background: #5A5A5A url(tab.png) no-repeat 100% 0;
}
ul#menu li.selected a {
height: 20px;
padding: 6px 35px 5px 28px;
}
ul#menu li.selected {
margin: 1px 2px 0 0;
background: #00C6F0 url(tab_selected.png) no-repeat 0 0;
}
ul#menu li.selected a, ul#menu li.selected a:hover {
background: #00C6F0 url(tab_selected.png) no-repeat 100% 0;
color: #FFF;
}
ul#menu li a:hover {
color: #E4EC04;
}
#site_content {
width: 880px;
overflow: hidden;
margin: 20px auto 0 auto;
padding: 0 0 10px 0;
}
#sidebar_container {
float: right;
width: 224px;
}
.sidebar_top {
width: 222px;
height: 14px;
background: transparent url(side_top.png) no-repeat;
}
.sidebar_base {
width: 222px;
height: 14px;
background: url(side_base.png) no-repeat;
}
.sidebar {
float: right;
width: 222px;
padding: 0;
margin: 0 0 16px 0;
}
.sidebar_item {
background: url(side_back.png) repeat-y;
padding: 0 15px;
width: 192px;
}
.sidebar li a.selected {
color: #444;
}
.sidebar ul {
margin: 0;
}
#content {
text-align: left;
width: 620px;
padding: 0 0 0 5px;
float: left;
}
#content ul {
margin: 2px 0 22px 0px;
}
#content ul li, .sidebar ul li {
list-style-type: none;
background: url(bullet.png) no-repeat;
margin: 0 0 0 0;
padding: 0 0 4px 25px;
line-height: 1.5em;
}
#footer {
width: 100%;
font-family:'trebuchet ms', sans-serif;
font-size: 100%;
height: 80px;
padding: 28px 0 5px 0;
text-align: center;
background: #3B3939 url(footer.png) repeat-x;
color: #A8AA94;
}
#footer p {
line-height: 1.7em;
padding: 0 0 10px 0;
}
#footer a {
color: #A8AA94;
text-decoration: none;
}
#footer a:hover {
color: #FFF;
text-decoration: none;
}
.search {
color: #5D5D5D;
border: 1px solid #BBB;
width: 134px;
padding: 4px;
font: 100% arial, sans-serif;
}
.form_settings {
margin: 15px 0 0 0;
}
.form_settings p {
padding: 0 0 4px 0;
}
.form_settings span {
float: left;
width: 200px;
text-align: left;
}
.form_settings input {
padding: 5px;
width: 225px;
font: 100% arial;
border: 1px solid #E5E5DB;
background: #FFF;
color: #47433F;
}
.form_settings .submit:hover {
background: #00CAEE;
color: #E4EC04;
}
.form_settings .submit {
font: 100% arial;
border: 0;
width: 99px;
margin: 0 0 0 212px;
height: 33px;
padding: 2px 0 3px 0;
cursor: pointer;
background: #3B3B3B;
color: #FFF;
-o-transition:color .2s ease-out, background .5s ease-in;
-ms-transition:color .2s ease-out, background .5s ease-in;
-moz-transition:color .2s ease-out, background .5s ease-in;
-webkit-transition:color .2s ease-out, background .5s ease-in;
/* ...and now for the proper property */
transition:color .2s ease-out, background .5s ease-in;
}
.important-btn:hover {
background: #8C1717;
}
.important-btn {
font: 100% arial;
border: 0;
width: 200px;
margin: 5px 0px 5px 215px;
height: 25px;
padding: 2px 0 3px 0;
cursor: pointer;
background: #52514F;
color: #FFF;
-o-transition:color .2s ease-out, background .5s ease-in;
-ms-transition:color .2s ease-out, background .5s ease-in;
-moz-transition:color .2s ease-out, background .5s ease-in;
-webkit-transition:color .2s ease-out, background .5s ease-in;
/* ...and now for the proper property */
transition:color .2s ease-out, background .5s ease-in;
}
.regularbutton:hover {
background: #00CAEE;
color: #E4EC04;
}
.regularbutton {
font: 100% arial;
border: 0;
width: 200px;
margin: 0px 0px 0px 212px;
height: 25px;
padding: 2px 0 3px 0;
cursor: pointer;
background: #52514F;
color: #FFF;
-o-transition:color .2s ease-out, background .5s ease-in;
-ms-transition:color .2s ease-out, background .5s ease-in;
-moz-transition:color .2s ease-out, background .5s ease-in;
-webkit-transition:color .2s ease-out, background .5s ease-in;
/* ...and now for the proper property */
transition:color .2s ease-out, background .5s ease-in;
}
.whattoput:hover {
background: #00CAEE;
color: #E4EC04;
}
.whattoput {
font: 100% arial;
border: 0;
width: 100px;
margin: 0px 0px 0px 5px;
height: 25px;
padding: 0px 0 0px 0px;
cursor: pointer;
background: #52514F;
color: #FFF;
-o-transition:color .2s ease-out, background .5s ease-in;
-ms-transition:color .2s ease-out, background .5s ease-in;
-moz-transition:color .2s ease-out, background .5s ease-in;
-webkit-transition:color .2s ease-out, background .5s ease-in;
/* ...and now for the proper property */
transition:color .2s ease-out, background .5s ease-in;
}
.form_settings option {
font: 100% arial;
border: 0;
width: 10px;
margin: 5px 0 0 212px;
height: 33px;
padding: 2px 0 3px 0;
cursor: pointer;
background: #52514F;
color: #FFF;
}
.form_settings select {
font: 100% arial;
margin: 0px 0px 0px 5px;
width: 140px;
}
.form_settings textarea {
font: 100% arial;
width: 225px;
}
.form_settings .checkbox {
margin: 4px 0;
padding: 0;
width: 14px;
border: 0;
background: none;
}
.separator {
width: 100%;
height: 0;
border-top: 1px solid #D9D5CF;
border-bottom: 1px solid #FFF;
margin: 0 0 20px 0;
}
table {
margin: 10px 0 30px 0;
}
table tr th, table tr td {
background: #3B3B3B;
color: #FFF;
padding: 7px 4px;
text-align: left;
}
table tr td {
background: #E5E5DB;
color: #47433F;
border-top: 1px solid #FFF;
}
.hideother {
display: none;
}
#banner {
width: 100%;
background: orange;
height: 25px;
position: fixed;
top: 0;
display: none;
left: 0;
text-align: center;
line-height: 25px;
font-weight: bold;
color:#4F0002;
}

.form_settings option {
...
width: 10px;
...
}
is your culprit.
Chrome and IE don't honor most option styling (dag blast them), so it renders as the browser intends it to, but Firefox (it would seem) lets you mess it up all you want. And you have definitely messed it up with the width: 10px;. I would just recommend losing all of your option styles, but that's just my opinion.

making a.active work with background image slide

I am having some troubles trying to get this to work, I'm new to javascript, and am pretty sure I'd need it for this. I'd like to have my background image slide upon hover and stay active on its correct div when selected. What I currently have html, css, and javascript wise works perfectly...javascript part is when user clicks on the div, a container opens up below it - that works as it should, however, I have no idea how to integrate giving the initial div a.active to stay active on that div rather than always going back into the center. Any ideas, suggestions, and/or help would be much appreciated.
UPDATE:
Here is a jsfiddle of what is provided below: http://jsfiddle.net/mGQ8w/4/
This is what I got so far:
HTML
<div id="profile_selection">
<a href="#nos_profiles" class="profile_selection">
{ÑØ§}<br />Members
</a>
<a href="#registered_profiles" class="profile_selection">
Registered<br />Members
</a>
<a href="#team_profiles" class="profile_selection">
Team<br />Profiles
</a>
<div id="profile_selection_slider"></div>
</div>
<div id="nos_profiles" class="selection"></div>
<div id="registered_profiles" class="selection"></div>
<div id="team_profiles" class="selection"></div>
CSS
#profile_selection {
width: 612px;
height: 152px;
padding: 0;
margin: 15px auto;
position: relative;
}
#profile_selection a {
width: 200px;
height: 105px;
padding: 45px 0 0 0;
margin: 0;
background: #333;
border: 2px solid #444;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
-moz-box-shadow: inset 0 -0.3em 0.9em 0.3em #000, 0 28px 24px -24px #000;
-webkit-box-shadow: inset 0 -0.3em 0.9em 0.3em #000, 0 28px 24px -24px #000;
box-shadow: inset 0 -0.3em 0.9em 0.3em #000, 0 28px 24px -24px #000;
float: left;
-moz-transition: all .2s ease;
-webkit-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
color: #FFF;
font: 24px Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
position: relative;
z-index: 4;
}
#profile_selection a:hover, #profile_selection a.active {
height: 100px;
padding: 50px 0 0 0;
background: #222;
-moz-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
-webkit-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
box-shadow: inset 0 0.3em 0.9em 0.3em #000;
color: #DF7401;
}
#profile_selection_slider {
width: 64px;
height: 16px;
background: url(http://www.nosclan.net/images/Home/menu_bg_hover.png) no-repeat 0 0 transparent;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
position: absolute;
top: 152px;
left: 275px;
z-index: 4;
}
#profile_selection a:nth-of-type(1):hover ~ #profile_selection_slider {
left: 71px;
}
#profile_selection a:nth-of-type(2):hover ~ #profile_selection_slider {
left: 275px;
}
#profile_selection a:nth-of-type(3):hover ~ #profile_selection_slider {
left: 480px;
}
#nos_profiles {
width: 950px;
height: 500px;
padding: 0;
margin: 0 auto;
background: #222;
border: 2px solid #444;
border-bottom: none;
-moz-border-radius: 12px 12px 0 0;
-webkit-border-radius: 12px 12px 0 0;
border-radius: 12px 12px 0 0;
-moz-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
-webkit-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
box-shadow: inset 0 0.3em 0.9em 0.3em #000;
display: none;
position: relative;
top: -10px;
z-index: 1;
}
#registered_profiles {
width: 950px;
height: 500px;
padding: 0;
margin: 0 auto;
background: #222;
border: 2px solid #444;
border-bottom: none;
-moz-border-radius: 12px 12px 0 0;
-webkit-border-radius: 12px 12px 0 0;
border-radius: 12px 12px 0 0;
-moz-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
-webkit-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
box-shadow: inset 0 0.3em 0.9em 0.3em #000;
display: none;
position: relative;
top: -10px;
z-index: 1;
}
#team_profiles {
width: 950px;
height: 500px;
padding: 0;
margin: 0 auto;
background: #222;
border: 2px solid #444;
border-bottom: none;
-moz-border-radius: 12px 12px 0 0;
-webkit-border-radius: 12px 12px 0 0;
border-radius: 12px 12px 0 0;
-moz-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
-webkit-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
box-shadow: inset 0 0.3em 0.9em 0.3em #000;
display: none;
position: relative;
top: -10px;
z-index: 1;
}
JAVASCRIPT
$(document).ready(function () {
$('a.profile_selection').click(function () {
var a = $(this);
var selection = $(a.attr('href'));
selection.removeClass('selection');
$('.selection').hide();
selection.addClass('selection');
if (selection.is(':visible')) {
selection.slideToggle(400)
} else {
selection.slideToggle(400)
};
});
});
LATEST UPDATE:::::
http://jsfiddle.net/mGQ8w/13/
Is it possible to make it where once a user decides to click a different div, the active class goes back to normal while the new selected div becomes active? The way it is now, is that if you click on all 3, they all become active....I'd like it where only 1 is active - the one that a user clicks on....so if a user clicks on the NOS Members div, it becomes active, then if the user clicks on Registered Members, the NOS members is no longer active, but the Registered Members div is...

You need to add the active class using addClass& can remove the remove the active class from previous selection using removeClass.
$(document).ready(function(){
$('a.profile_selection').click( function(){
var a = $(this) ;
$('a.profile_selection').removeClass('active');
$(this).addClass('active');
var selection = $( a.attr('href') );
selection.removeClass('selection');
$('.selection').hide();
selection.addClass('selection');
if( selection.is(':visible') ){
selection.slideToggle(400)
}else{
selection.slideToggle(400)
};
});
});
This need to be used along with the css changes provided by #N1ck as below
#profile_selection a:nth-of-type(1):hover ~ #profile_selection_slider,
#profile_selection a:nth-of-type(1).active ~ #profile_selection_slider {
left: 71px;
}
#profile_selection a:nth-of-type(2):hover ~ #profile_selection_slider,
#profile_selection a:nth-of-type(2).active ~ #profile_selection_slider {
left: 275px;
}
#profile_selection a:nth-of-type(3):hover ~ #profile_selection_slider,
#profile_selection a:nth-of-type(3).active ~ #profile_selection_slider {
left: 480px;
}
Check this http://jsfiddle.net/mGQ8w/14/

Give same rule to .active as you do for :hover e.g:
#profile_selection a:nth-of-type(1):hover ~ #profile_selection_slider{
left: 71px;
}
becomes
#profile_selection a:nth-of-type(1):hover ~ #profile_selection_slider,
#profile_selection a:nth-of-type(1).active ~ #profile_selection_slider{
left: 71px;
}
Then toggle the selected menu item with an .active class.
var menuItems = $('a.profile_selection');
menuItems.on('click', function () {
var a = $(this),
selection = $(a.attr('href'));
menuItems.removeClass('active');
a.toggleClass('active');
...etc
});
Here's a fiddle as an example: http://jsfiddle.net/n1ck/FbeFU/

We Keep Coding

JavaScript is the programming language of the Web.

CSS continue animation after mouseleave - javascript

Related

Using 'class="select-chosen"'

How may I stack multiple html/css buttons vertically along the center of the page?

Convert button to on hover transition

Select Box squished and elongated in Firefox

making a.active work with background image slide

Categories

Resources