I am trying to change the background and text color with the css3 transition effects when hovering over a button, but only the text color is changing and not the background color. Here is my jsfiddle code and here is my css :
.input-submit
{
margin: 12px 0 2px
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(255, 255, 255)), to(rgb(224, 224, 224)));
background-image: -webkit-linear-gradient(top, rgb(255, 255, 255), rgb(224, 224, 224));
background-image: -moz-linear-gradient(top, rgb(255, 255, 255), rgb(224, 224, 224));
background-image: -o-linear-gradient(top, rgb(255, 255, 255), rgb(224, 224, 224));
background-image: linear-gradient(top, rgb(255, 255, 255), rgb(224, 224, 224));
-webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.5);
-moz-box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.5);
box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.5);
border: 0;
font-weight: normal;
color: #333;
text-shadow: 0 1px 0 white;
border-radius: 5px;
-moz-border-radius: 5px;
padding: 5px;
width: 60px;
border-image: initial;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.input-submit:hover
{
cursor:pointer;
margin: 12px 0 2px;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(145, 191, 1)), to(rgb(111, 149, 1)));
background-image: -webkit-linear-gradient(top, rgb(145, 191, 1), rgb(111, 149, 1));
background-image: -moz-linear-gradient(top, rgb(145, 191, 1), rgb(111, 149, 1));
background-image: -o-linear-gradient(top, rgb(145, 191, 1), rgb(111, 149, 1));
background-image: linear-gradient(top, rgb(145, 191, 1), rgb(111, 149, 1));
-webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.5);
-moz-box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.5);
box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.5);
border: 0;
font-weight: normal;
color: #fff;
text-shadow: 0 1px 0 white;
border-radius: 5px;
-moz-border-radius: 5px;
padding: 5px;
width: 60px;
border-image: initial;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
That's quite a block of CSS you've got there! As far as I'm aware, no browsers allow transitions of css gradients yet. Since your backgrounds aren't solid colors, you can't transition them.
Related
I am trying to use boostrap mixin for box-shadow and transition as below in my less file:
.service-box {
.box-shadow(3px 3px 1px rgba(195, 195, 195, 0.4));
.transition(0.4s);
}
Lets look at its compiled css:
.service-box {
-webkit-box-shadow: 3px 3px 1px rgba(195, 195, 195, 0.4);
box-shadow: 3px 3px 1px rgba(195, 195, 195, 0.4);
-webkit-box-shadow: '' 3px 3px 1px rgba(195, 195, 195, 0.4) 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: '' 3px 3px 1px rgba(195, 195, 195, 0.4) 1px 2px rgba(0, 0, 0, 0.2);
-o-box-shadow: '' 3px 3px 1px rgba(195, 195, 195, 0.4) 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: '' 3px 3px 1px rgba(195, 195, 195, 0.4) 1px 2px rgba(0, 0, 0, 0.2);
-webkit-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
You can see above mixin not compiling properly, isn't it?
Can anybody tell what the reason for this? Thank you.
Here is what worked for me for Bootstrap v5
#include transition(bottom .5s cubic-bezier(0, 1, 0, 1), background-color .25s ease-in);
I want to a button with the same hover effect as in foxmovies.com
these are the buttons.
I didn't manage to find an example online, with the arrow moving effect.
any help would be great, thanks.
Created the base hover effect, tweak it for extra efffect
.btn span {
display: inline-block;
font-family: sans-serif;
font-weight: bold;
text-transform: uppercase;
font-size: 14px;
color: #fff;
cursor: pointer;
margin-right: 4px;
height: 48px;
line-height: 48px;
vertical-align: top;
padding: 0 24px;
background-color: #B08A43;
background: -webkit-linear-gradient(right, #B08A43 50%, #CA9E4D 50%);
background: -moz-linear-gradient(right, #B08A43 50%, #CA9E4D 50%);
background: -o-linear-gradient(right, #B08A43 50%, #CA9E4D 50%);
background: linear-gradient(to left, #B08A43 50%, #CA9E4D 50%);
background-size: 200% 100%;
background-position: right bottom;
-webkit-transition: background-position 100ms ease;
-moz-transition: background-position 100ms ease;
transition: background-position 100ms ease;
-moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.13);
-webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.13);
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.13);
}
span.arrow {
background-color: #B08A43;
background: -webkit-linear-gradient(right, #B08A43 50%, #CA9E4D 50%);
background: -moz-linear-gradient(right, #B08A43 50%, #CA9E4D 50%);
background: -o-linear-gradient(right, #B08A43 50%, #CA9E4D 50%);
background: linear-gradient(to left, #B08A43 50%, #CA9E4D 50%);
background-repeat: no-repeat;
background-position: right;
float: none;
line-height: 48px;
background-color: #B08A43;
background-size: 200% 100%;
background-position: right bottom;
-webkit-transition: background-position 200ms ease;
-moz-transition: background-position 200ms ease;
transition: background-position 200ms ease;
-moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.13);
-webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.13);
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.13);
}
a:hover span {
background-position: left bottom;
}
<a class="btn">
<span>Watch the Trailer</span>
<span class="arrow">></span>
</a>
I have one problem about visibility. I have to create this DEMO from fiddle.
If you click my demo you can see there is a one image. When you hoverover mouse this image then bubble will open. But if you come with the mouse to the left of the image blank bubble opens again. How can I fix this problem ?
.balon
{
position: absolute;
width: 345px;
height: auto;
padding: 3px;
background: #FFFFFF;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: #d8dbdf solid 1px;
-webkit-box-shadow: -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
-moz-box-shadow: -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
box-shadow: -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
visiblility: hidden;
opacity:0;
margin-left: -345px;
z-index:5;
-webkit-transition: all .3s ;
-moz-transition: all .3s ;
-ms-transition: all .3s ;
-o-transition: all .3s ;
transition: all .3s ;
}
.balon:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 10px 0 10px 10px;
border-color: transparent #fff;
display: block;
width: 0;
z-index: 1;
right: -10px;
top: 16px;
}
.vizyon_bg:hover .balon
{
opacity:1;
visibility:visible;
z-index:5;
transition: opacity .5s linear .5s;
-webkit-transition: opacity .5s linear .5s;
-moz-transition: opacity .5s linear .5s;
-ms-transition: opacity .5s linear .5s;
}
Dude i found the solution! just replace your balon's CSS and you're done! you have wrong z-index :}
I've created JSFiddle for you! http://jsfiddle.net/9pgqc24c/
.balon
{
position: absolute;
width: 345px;
z-index:-99999;
height: auto;
padding: 3px;
background: #FFFFFF;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: #d8dbdf solid 1px;
-webkit-box-shadow: -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
-moz-box-shadow: -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
box-shadow: -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
visiblility:hidden;
opacity:0;
margin-left:-345px;
z-index:-1;
-webkit-transition: all .3s ;
-moz-transition: all .3s ;
-ms-transition: all .3s ;
-o-transition: all .3s ;
transition: all .3s ;
}
I'm helping a friend out with a website and she has pretty specific type of button in mind:
"I would like the buttons to be hexagon shape, with a photo in the middle and actually depress as clicked before moving to the portfolio page."
I've managed to create a rounded square that depresses using CSS and HTML pretty easily, however I can't work out a hexagon. Anyone offer some help here?
Fiddle
HTML:
<a href="#" class="button">
<span>
<p> Jorgie</p></span>
</a>
CSS:
.button {
display: inline-block;
margin: 30px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 8px 0 #463E3F, 0 15px 20px rgba(0, 0, 0, .35);
-moz-box-shadow: 0 8px 0 #463E3F, 0 15px 20px rgba(0, 0, 0, .35);
box-shadow: 0 8px 0 #463E3F, 0 15px 20px rgba(0, 0, 0, .35);
-webkit-transition: -webkit-box-shadow .1s ease-in-out;
-moz-transition: -moz-box-shadow .1s ease-in-out;
-o-transition: -o-box-shadow .1s ease-in-out;
transition: box-shadow .1s ease-in-out;
font-size: 20px;
color: #fff;
}
.button span {
display: inline-block;
background-color: black;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15);
-moz-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15);
box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15);
font-family: 'Pacifico', Arial, sans-serif;
line-height: 1;
text-shadow: 0 -1px 1px rgba(175, 49, 95, .7);
-webkit-transition: background-color .2s ease-in-out, -webkit-transform .1s ease-in- out;
-moz-transition: background-color .2s ease-in-out, -moz-transform .1s ease-in-out;
-o-transition: background-color .2s ease-in-out, -o-transform .1s ease-in-out;
transition: background-color .2s ease-in-out, transform .1s ease-in-out;
}
.button:hover span {
background-image:url(jorgie.jpg);
background-repeat:no-repeat;
background-position:center;
text-shadow: 0 -1px 1px rgba(175, 49, 95, .9), 0 0 5px rgba(255, 255, 255, .8);
}
.button:active, .button:focus {
-webkit-box-shadow: 0 8px 0 #463E3F, 0 12px 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 8px 0 #463E3F, 0 12px 10px rgba(0, 0, 0, .3);
box-shadow: 0 8px 0 #463E3F, 0 12px 10px rgba(0, 0, 0, .3);
}
.button:active span {
-webkit-transform: translate(0, 4px);
-moz-transform: translate(0, 4px);
-o-transform: translate(0, 4px);
transform: translate(0, 4px);
}
Here is a hexagon shaped button adapted from the soluion described in this question : Button with pointed edges and shadow :
The hexagon is made with skewed pseudo elements the shadow is made with box-shadows and the transition on the click event is made with CSS:
DEMO
HTML :
<div class="button top">
<div class="button bottom"></div>
</div>
CSS :
.top{
position:relative;
top:0;
margin-left:150px;
width: 45px;
height: 60px;
-webkit-transition: top .1s;
-ms-transition: top .1s;
transition: top .1s;
}
.button:before, .button:after{
position: absolute;
width:70%; height:50%;
content: "";
z-index:-1;
}
.top:before {
left:0; top:0;
-webkit-transform:skewX(-20deg);
-ms-transform:skewX(-20deg);
transform:skewX(-20deg);
background: #469BF9;
box-shadow: -5px 10px 0px -5px #104f96;
z-index:-2;
}
.top:after {
right:0; top:0;
-webkit-transform:skewX(20deg);
-ms-transform:skewX(20deg);
transform:skewX(20deg);
background: #469BF9;
box-shadow: 5px 10px 0px -5px #104f96;
z-index:-2;
}
.bottom:before{
left:0; top:50%; transitions.
-webkit-transform:skewX(20deg);
-ms-transform:skewX(20deg);
transform:skewX(20deg);
background: #1E80F7;
box-shadow: -4px 5px 0px 0px #104f96;
}
.bottom:after{
right:0; top:50%;
-webkit-transform:skewX(-20deg);
-ms-transform:skewX(-20deg);
transform:skewX(-20deg);
background: #1E80F7;
box-shadow: 4px 5px 0px 0px #104f96;
}
.button:after, .button:before{
-webkit-transition: box-shadow .1s;
-ms-transition: box-shadow .1s;
transition: box-shadow .1s;
}
.top:active{
top:5px;
}
.button:active:after, .button:active:before, .button:active .button:before, .button:active .button:after {
box-shadow: 0px 0px 0px 0px #104f96;
}
To my knowledge,a hexagon with full image requires multiple divs as follows
JSfiddle Demo
HMTL
<div class="hexagon">
<div class="hexagon-in1">
<div class="hexagon-in2">
</div>
</div>
</div>
CSS
.hexagon {
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
cursor: pointer;
width: 400px;
height: 200px;
margin: 25px;
visibility: hidden;
overflow: hidden;
}
.hexagon-in1 {
width: 100%;
height: 100%;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
overflow: hidden;
}
.hexagon-in2 {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 50%;
background-image: url(http://placekitten.com/241/241);
visibility: visible;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hexagon-in2 a {
display: block;
}
Actual 'button down' effects might a little harder.
Frankly, I'd be looking to use an actual image here..rather than unsemantic 'styling' divs for this button.
For hexagon button, here's a FIDDLE
<div id="hexagon"></div>
#hexagon {
width: 100px;
height: 55px;
background: red;
position: relative;
}
#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
}
This transition works in Safari & Chrome (= Webkit browsers), but not in Firefox (= Mozilla). Why?
a.lorem {
width: 100px;
padding: 20px;
display: block;
color: white;
text-align: center;
background: rgb(191,210,85);
background: -moz-linear-gradient(top, rgb(191,210,85) 0%, rgb(142,185,42) 50%, rgb(114,170,0) 51%, rgb(158,203,45) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(191,210,85)), color-stop(50%,rgb(142,185,42)), color-stop(51%,rgb(114,170,0)), color-stop(100%,rgb(158,203,45)));
background: -webkit-linear-gradient(top, rgb(191,210,85) 0%,rgb(142,185,42) 50%,rgb(114,170,0) 51%,rgb(158,203,45) 100%);
background: -o-linear-gradient(top, rgb(191,210,85) 0%,rgb(142,185,42) 50%,rgb(114,170,0) 51%,rgb(158,203,45) 100%);
background: -ms-linear-gradient(top, rgb(191,210,85) 0%,rgb(142,185,42) 50%,rgb(114,170,0) 51%,rgb(158,203,45) 100%);
background: linear-gradient(to bottom, rgb(191,210,85) 0%,rgb(142,185,42) 50%,rgb(114,170,0) 51%,rgb(158,203,45) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 );
box-shadow: inset 0 -3px 0 #A9A9A9,
0 3px 0 #EFEFED;
-webkit-transition: box-shadow .5s linear;
-moz-transition: box-shadow .5s linear;
-o-transition: box-shadow .5s linear;
-ms-transition: box-shadow .5s linear;
transition: box-shadow .5s linear;
}
a:hover.lorem {
box-shadow: 0 3px 0 rgba(0, 0, 0, .1),
inset 0 -3px 0 rgba(0, 0, 0, .1),
inset 0 0 100px rgba(255, 255,255 , .3);
}
Fiddle
first, you need to write a.lorem:hover and not a:hover.lorem
after, border-shadow multi values need to be corresponding to their ":hover" pair.
"inset" border-shadow can't transit to "outset" border-shadow.
exemple :
a.lorem{
box-shadow:
inset 0 -3px 0 #A9A9A9,
0 3px 0 #EFEFED,
inset 0 0 0 rgba(0,0,0,0); /* for third ":hover" value */
transition:box-shadow .5s linear; /* add prefixed verison (-moz-, -webkit-, ...*/
}
a.lorem:hover{
box-shadow:
inset 0 -3px 0 rgba(0, 0, 0, .1),
0 3px 0 rgba(0, 0, 0, .1),
inset 0 0 100px rgba(255, 255,255 , .3);
}