CSS Tranistion Button Background Color - css

Trying to create a slide right transition on a button. If I remove the .container background color the transition works. But I want the button to start black and change to yellow while keeping the container color as default. But the output seems different. It will only transition to yellow if the button background is transparent. Any help is appreciated, been racking my brain way too long on this.
.container {
background: #F0F0F0;
margin: 20px 20%
}
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size: 14px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button:link:after, a.animated-button:visited:after {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 50%;
width: 150%;
z-index: -1;
-webkit-transition: all 0.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
}
a.animated-button:link:hover, a.animated-button:visited:hover {
color: #FFF;
}
a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
height: 450%;
}
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size: 14px;
border-radius: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button.thar-three {
color: #fff;
cursor: pointer;
display: block;
position: relative;
border: 2px solid #F7CA18;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}
a.animated-button.thar-three:hover {
color: #000 !important;
}
a.animated-button.thar-three:hover:before {
left: 0%;
right: auto;
width: 100%;
}
a.animated-button.thar-three:before {
display: block;
position: absolute;
top: 0px;
right: 0px;
height: 100%;
width: 0px;
z-index: -1;
content: '';
color: #000 !important;
background: #F7CA18;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}
<div class="container">
<p>Register</p>
</div>

I adjust the code a bit and now the container is working well even with black background set. Its now animating from black to yellow. Additionally, I have also removed yellow border to create slick animation look.
Here is the working snippet.
.container {
background: #F0F0F0;
margin: 20px 20%
}
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size: 14px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button:link:after, a.animated-button:visited:after {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 50%;
width: 150%;
z-index: -1;
-webkit-transition: all 0.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
}
a.animated-button:link:hover, a.animated-button:visited:hover {
color: #FFF;
}
a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
height: 450%;
}
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size: 14px;
border-radius: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
z-index: 1;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button.thar-three {
color: #fff;
cursor: pointer;
display: block;
position: relative;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
background-color: black;
}
a.animated-button.thar-three:hover {
color: #000 !important;
}
a.animated-button.thar-three:hover:before {
left: 0%;
right: auto;
width: 100%;
}
a.animated-button.thar-three:before {
display: block;
position: absolute;
top: 0px;
right: 0px;
height: 100%;
width: 0px;
z-index: -1;
content: '';
color: #000 !important;
background: #F7CA18;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}
<div class="container">
<p>Register</p>
</div>

As you've written it, your ::before pseudo-element is below the .container element, because both the .container and the anchor (a) are on the same z-index.
To place it in-between the anchor and the container, you need to make your anchor being above the container on the z-axis, i.e, set its z-index.
a.animated-button.thar-three {
color: #fff;
cursor: pointer;
display: block;
position: relative;
border: 2px solid #F7CA18;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
/* place it at a higher z-index than its parent ... */
z-index: 1;
}
a.animated-button.thar-three:before {
display: block;
position: absolute;
top: 0px;
right: 0px;
height: 100%;
width: 0px;
/* ... to make this be in-between .container and the a */
z-index: -1;
content: '';
color: #000 !important;
background: #F7CA18;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}
.container {
background: #F0F0F0;
margin: 20px 20%
}
a.animated-button:link,
a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size: 14px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button:link:after,
a.animated-button:visited:after {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 50%;
width: 150%;
z-index: -1;
-webkit-transition: all 0.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
}
a.animated-button:link:hover,
a.animated-button:visited:hover {
color: #FFF;
}
a.animated-button:link:hover:after,
a.animated-button:visited:hover:after {
height: 450%;
}
a.animated-button:link,
a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size: 14px;
border-radius: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button.thar-three:hover {
color: #000 !important;
}
a.animated-button.thar-three:hover:before {
left: 0%;
right: auto;
width: 100%;
}
<div class="container">
<p>Register</p>
</div>

Related

image height inside div container

I have a problem with my image which is inside a div.
This div with swiper__content class gives kind of bottom padding to the image and I can't see what cause this effect. I have a 100% height with no padding or margin so it might fit in the div
.no-padding{
padding: 0px 0px !important;
}
.swiper {
margin: 0 auto 50px;
width: 40%;
text-align: center;
padding: 10px 20px;
font-size: 10vw;
line-height: 1;
position: relative;
overflow: hidden;
text-transform: uppercase;
font-family: "Impact";
cursor: pointer;
}
.swiper__content {
color: transparent;
display: block;
}
.swiper .swiper__content img{
opacity: 0;
width: 100%;
height: 100%;
transition: opacity 0s ease-in 0.5s;
-moz-transition: opacity 0s ease-in 0.5s;
-webkit-transition: opacity 0s ease-in 0.5s;
-o-transition: opacity 0s ease-in 0.5s;
}
.swiper__bar, .swiper__bar--right {
width: 100%;
height: 100%;
background: orange;
display: block;
position: absolute;
top: 0;
left: 0;
transform: translateX(-100%);
transition: 1s ease-in-out;
}
.swiper__bar--right {
transform: translateX(100%);
}
.swiper.revealed .swiper__content {
animation-name: kf-font-reveal;
animation-duration: 1s;
color: orange;
}
.swiper.revealed .swiper__content img{
opacity: 1;
}
<div class="swiper no-padding revealed">
<div class="swiper__content">
<img src="http://lorempicsum.com/futurama/350/200/1">
</div>
<span class="swiper__bar--right"></span>
</div>
Is there a way to remove that ?
Set line-height: 0 for your swiper class.
.no-padding{
padding: 0px 0px !important;
}
.swiper {
margin: 0 auto 50px;
width: 40%;
text-align: center;
padding: 10px 20px;
font-size: 10vw;
line-height: 0;
position: relative;
overflow: hidden;
text-transform: uppercase;
font-family: "Impact";
cursor: pointer;
}
.swiper__content {
color: transparent;
display: block;
}
.swiper .swiper__content img{
opacity: 0;
width: 100%;
height: 100%;
transition: opacity 0s ease-in 0.5s;
-moz-transition: opacity 0s ease-in 0.5s;
-webkit-transition: opacity 0s ease-in 0.5s;
-o-transition: opacity 0s ease-in 0.5s;
}
.swiper__bar, .swiper__bar--right {
width: 100%;
height: 100%;
background: orange;
display: block;
position: absolute;
top: 0;
left: 0;
transform: translateX(-100%);
transition: 1s ease-in-out;
}
.swiper__bar--right {
transform: translateX(100%);
}
.swiper.revealed .swiper__content {
animation-name: kf-font-reveal;
animation-duration: 1s;
color: orange;
}
.swiper.revealed .swiper__content img{
opacity: 1;
}
<div class="swiper no-padding revealed">
<div class="swiper__content">
<img src="http://lorempicsum.com/futurama/350/200/1">
</div>
<span class="swiper__bar--right"></span>
</div>

CSS3 Style button: how can I make a button fades away while playing

I have been trying to style a CSS3 button that currently activates on hover and each time it gets stopped/started it fades. I am trying to modify the current code in order for the play button to fade away only on click (play/pause action)
Here is the code:
.play-button {
background-color: rgb(80,80,80);
border: 2px solid rgb(136,136,136);
width: 60px;
height: 60px;
position: absolute;
border-radius: 30px;
top: 50%;
left: 50%;
margin: -30px;
cursor: pointer;
opacity: 0;
transition: opacity 0.25s ease-in-out;
-moz-transition: opacity 0.25s ease-in-out;
-webkit-transition: opacity 0.25s ease-in-out;
-o-transition: opacity 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out;
&:hover {
opacity: 3;
}
}
.play-button:before {
content: "";
position: absolute;
background: transparent;
border: 14px solid transparent;
top: 16px;
left: 25px;
height: 0;
border-right-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;
border-right: 0;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
.play-button:after {
content: "";
position: absolute;
border: 14px solid white;
top: 15px;
left: 24px;
height: 0;
border-right-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;
border-right: 0;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
.play-button.pause:before {
border: 4px solid white;
top: 18px;
left: 18px;
height: 16px;
}
.play-button.pause:after {
content: "";
position: absolute;
border: 4px solid white;
top: 18px;
left: 33px;
height: 16px;
}
If I modify .play-button as follows, the button will be fixed, but then it does not fade away on click, meaning that it stays over the animated gif while it is playing:
.play-button {
background-color: rgb(80,80,80);
border: 2px solid rgb(136,136,136);
width: 60px;
height: 60px;
position: absolute;
border-radius: 30px;
top: 50%;
left: 50%;
margin: -30px;
cursor: pointer;
}
How can I change my current to achieve what I want?
Thank you for your help

how to change font color in cycle2 cycle-overlay

I'm using Clycle2 image slider in my web site. I want to change style in cycle-overlay . I can change font size. But by using CSS I can't change font color. It always gives me gray color. please help me with this.
#us-img-container{
margin: 0px;
padding: 0px;
cursor: pointer;
}
#us-container{
width: 100%;
height: auto;
position: relative;
overflow: hidden;
background: #fff;
}
#us-slideshow{
width: 100%;
}
#us-slideshow img{
width: 100%;
}
#us-pager{
height: 70px;
width: 100%;
position: absolute;
bottom: 0px;
background: rgba(0, 0, 0, 0.9);
z-index: 10000;
opacity: 0;
text-align: center;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
#us-slideshow:hover + #us-pager{
opacity: 1;
}
#us-pager:hover {
opacity: 1;
}
#us-prev{
height: 20px;
width: 20px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto 15px;
z-index: 1000;
opacity: 0.6;
cursor: pointer;
}
#us-next{
height: 20px;
width: 20px;
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto 10px;
z-index: 1000;
opacity: 0.6;
cursor: pointer;
}
#us-pager img{
height: 60px;
width: 95px;
margin: 5px 5px;
opacity: 0.5;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
#us-pager img:hover{
opacity: 1;
transform: scale(1.05);
z-index: 100;
}
/* overlay */
.cycle-overlay {
font-family: NotoSans-Regular !important;
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
z-index: 600;
padding: 7px 7px 7px 10px;
background-color: rgba(0, 0, 0, 0.1) !important;
font-size: 16px;
color: rgba(255, 255, 255,1) !important;
text-align: center;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.cycle-slideshow:hover .cycle-overlay{
bottom: 70px !important;
}
/*
media queries
some style overrides to make things more pleasant on mobile devices
*/
#media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
.cycle-slideshow { width: 200px;}
.cycle-overlay { padding: 4px }
.cycle-caption { bottom: 4px; right: 4px }
}
<div class="col-md-12 col-sm-12 col-xs-12 hide" id="us-img-container">
<div id="us-container" style="">
<div id="us-slideshow" class="cycle-slideshow"
data-cycle-fx = "fade"
data-cycle-speed = "600"
data-cycle-timeout = "3000"
data-cycle-pager = "#us-pager"
data-cycle-pager-template = "<a herf= '#'><img src='{{src}}' height= 100 width=150 />"
data-cycle-next = "#us-next"
data-cycle-prev = "#us-prev"
data-cycle-manual-fx = "scrollHorz"
data-cycle-manual-speed = "400"
data-cycle-pager-fx = "fade"
data-cycle-caption-plugin=caption2
data-cycle-overlay-fx-out="slideUp"
accesskey=""data-cycle-overlay-fx-in="fadeOut"
>
<?php
$x = 1;
while ($x < 8) {
?>
<script>
$.ajax({
url: '<?php echo IMG_PATH_SONGS; ?>/ori/<?php echo $slider_json[$x]['dn_id']; ?>.jpg', //or your url
success: function (data) {
document.getElementById('slider_<?php echo $x; ?>').src = '<?php echo IMG_PATH_SONGS; ?>/ori/<?php echo $slider_json[$x]['dn_id']; ?>.jpg';
},
error: function (data) {
document.getElementById('slider_<?php echo $x; ?>').src = '<?php echo IMG_DEFAULT; ?>';
}
});
</script>
<img src="" id="slider_<?php echo $x; ?>" onclick="goToDownloads(<?php echo $slider_json[$x]['dn_id']; ?>)"
data-cycle-desc="<?php echo $recent_json[$x]['dn_title']; ?> - <?php echo $slider_json[$x]['artist_name']; ?>" >
<div class="cycle-overlay" style="color: red; "></div>
<?php
$x++;
}
?>
</div>
<div id="us-pager"></div>
<div id="us-prev"><i class="fa fa-angle-left" aria-hidden="true" style="font-size: 26px; color: #000;"></i></div>
<div id="us-next"><i class="fa fa-angle-right" aria-hidden="true" style="font-size: 26px; float: right; color: #000;"></i></div>
</div>
</div>
I think, i have found the solution. I have commented it in the CSS below.
.cycle-overlay {
font-family: NotoSans-Regular !important;
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
z-index: 600;
padding: 7px 7px 7px 10px;
background-color: rgba(0, 0, 0, 0.1) !important;
font-size: 16px;
color: rgba(255, 255, 255,1) !important; /* <-- remove !important */
text-align: center;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
You can also add this line to your code:
.cycle-overlay {
color: red !important;
}

How I can make Pure CSS3 Smooth Drop-Down Menu in wordpress?

I am making a bootstrap wordpress theme and I have a problem about adding pure smooth drop-down menu effect for primary menu like this example such as it does not seem to work properly after clicked "M logo" to open drop-down menu. You can check out my theme on this link for more detail
Here are my CSS classes at the moment:
.navbar-nav>li>.dropdown-menu {
margin: -1px 0 0 45%;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.dropdown-menu {
/* background: url(img/submenu.png) no-repeat scroll right/ 91% 100%; */
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 153px;
padding: 1px 0;
margin: 2px 0 0 0;
list-style: none;
font-size: 14px;
text-align: center;
background-color: #5c4d4a;
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;
}
.dropdown-menu li a {
display: block;
background: url(img/submenu.png) no-repeat scroll right/ 104% 108%;
padding: 10px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571;
color: #fff;
white-space: nowrap;
}
.dropdown-menu li a:hover,
.dropdown-menu li a:focus {
background: url(img/submenu.png) no-repeat scroll right/ 104% 108%;
color: #ccc;
text-decoration: none;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.dropdown-menu ul {
list-style: none;
}
The salient features required are:
.dropdown-menu {
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
nav li:hover .dropdown-menu {
opacity: 1;
top: 50px;
visibility: visible;
}
The float:left is a furfy, it is over-ridden by position:absolute;

Search tool bar hide effect

I'm working on my search toolbar for my website. Everything is running ok, except for the hide effect of the toolbar that has a weird behaviour. The transition works fine to display the writting bar, when I clock again in the search icon its suppose to hide the full bar, but instead hides only about half. If I click outside the search toolbar the bar hides correctly. Here is my code: Jsfiddle. And the relevant code:
#input {
position: absolute;
top: 0;
right: 30px;
width: 200px;
height: 30px;
z-index: 5;
overflow: hidden;}
#input input {
display: block;
position: absolute;
top: 0;
right: -200px;
width: 200px;
height: 100%;
margin: 0;
padding: 0 10px;
border: none;
background-color: #ededed;
color: #000;
font-size: 12px;
-webkit-backface-visibility: none;
-moz-backface-visibility: none;
-ms-backface-visibility: none;
backface-visibility: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-transition: right 0;
-moz-transition: right 0;
-ms-transition: right 0;
-o-transition: right 0;
transition: right 0;}
#input input:focus {
outline: none;}
#input.focus {
z-index: 20;}
#input.focus input {
right: 0;
-webkit-transition: right 0.3s;
-moz-transition: right 0.3s;
-ms-transition: right 0.3s;
-o-transition: right 0.3s;
transition: right 0.3s;}
Thanks in advance!
Its seems the reason input box not hidding completely due to padding given for input element
.input input { padding: 0 10px;
The actual width is calculated by browser for input box is
width:200px + padding-left:10px + padding-right:10px = Actual width goes to 220px;
Solution for this is by adding
.input input { box-sizing:border-box;
property to input element class
Sample code can be seen here
.input {
position: absolute;
top: 0;
right: 30px;
width: 200px;
height: 30px;
line-height: 30px;
z-index: 5;
overflow: hidden;
border:1px solid #ccc;
background-color:#fff;
}
.input input {
box-sizing:border-box;
display: block;
position: absolute;
top: 0;
right: -200px;
width: 200px;
height: 100%;
margin: 0;
padding: 0 10px;
border: none;
background-color: #fff;
color: #000;
font-size: 12px;
-webkit-backface-visibility: none;
-moz-backface-visibility: none;
-ms-backface-visibility: none;
backface-visibility: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-transition: right -200px;
-moz-transition: right -200px;
-ms-transition: right -200px;
-o-transition: right -200px;
transition: right -200px;
}
.input input:focus { outline: none; }
.input.focus { z-index: 20; }
.input:hover input{
right:0px;
-webkit-transition: right 0px 0.3s;
-moz-transition: right 0.3s;
-ms-transition: right 0.3s;
-o-transition: right 0.3s;
transition: right 0px 0.3s;
}
.input.focus input {
right:0px;
-webkit-transition: right 0px 0.3s;
-moz-transition: right 0.3s;
-ms-transition: right 0.3s;
-o-transition: right 0.3s;
transition: right 0px 0.3s;
}
body { font:13px 'arial'; }
https://jsfiddle.net/ShirishDhotre/9gqa2bum/
I added hover effect for demo you can remove class
.input:hover input{

Resources