I have my button where after clicking i am giving it a box-shadow just say in the active property like
.thankyou_button_active {
background-color: #ff9d72;
color: white;
border: 1px solid #ff9d72;
width: 120px;
outline: none;
height: 31px;
font-weight: 700;
border-radius: 30px;
transition: transform 1s all;
font-size: 15px;
padding: 6px 10px;
margin-bottom: 1rem;
}
.thankyou_button_active:active {
transition: transform 1s all;
box-shadow:0 0 10px #ff9d72;
}
so in the 'active' property i tried to apply transition property but it doesnt work out...does transtion in
class:active
works in a different manner ??
transition: transform 1s all is not a legit shorthand value, see transition for more information.
You need to put transition to main class(in this case, .thankyou_button_active), and put the changed properties to property selector class: .thankyou_button_active:active. Unless you want to set the duration separately, check this for example:
.thankyou_button_active {
background-color: #ff9d72;
color: white;
border: 1px solid #ff9d72;
width: 120px;
outline: none;
height: 31px;
font-weight: 700;
border-radius: 30px;
transition: box-shadow 1s;
font-size: 15px;
padding: 6px 10px;
margin-bottom: 1rem;
box-shadow:0 0 0px #ff9d72;
}
.thankyou_button_active:active {
box-shadow:0 0 10px #ff9d72;
transition-duration: 0.05s;
}
<button class="thankyou_button_active">Thank You</button>
Related
I want to make different color transitions when someone clicks the button and releases again.
As you can see below, when you click the button, the color is instant but when you release it, it's not instant. How can I do this?
.submitBtn {
position: absolute;
display: block;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 225px;
height: 40px;
border: 3px solid #1c215e;
border-radius: 5px;
color: #9fa6fc;
background-color: #1c215e;
font-size: 16px;
margin-top: 150px;
transition: color 1s, background-color 1s;
}
.submitBtn:hover {
color: black;
background-color: #4a53c2;
}
.submitBtn:active {
color: #3e46a8;
border-color: #3e46a8;
transition: 0s;
}
<button class="submitBtn" type="submit">Login</button>
Here is a trick using text-shadow that will replace the main color on hover and default state and for the active you use color with no transition:
.submitBtn {
display: block;
margin: auto;
border-radius: 5px;
font-size: 20px;
padding: 10px 50px;
border: 3px solid #1c215e;
color: #0000;
text-shadow: 0 0 #9fa6fc;
background-color: #1c215e;
cursor: pointer;
transition: text-shadow 1s, background-color 1s;
}
.submitBtn:hover {
background-color: #4a53c2;
text-shadow: 0 0 black;
}
.submitBtn:active {
color: red;
border-color: #3e46a8;
}
<button class="submitBtn" type="submit">Login</button>
I'm working on some buttons that fill with a color when you hover over the button. The transition works perfectly on safari that runs on a MacBook. But when I do the animation on my windows device with Chrome, it has a hiccup on the end with multiple flashes. I have searched around for a solution but I couldn't find any.
.button_slide {
color: black;
border: 2px solid #ffffff;
border-radius: 0px;
padding: 18px 45px;
display: inline-block;
font-family: "Lucida Console", Monaco, monospace;
font-size: 14px;
letter-spacing: 5px;
cursor: pointer;
box-shadow: inset 0 0 0 0 #ffffff;
/* -webkit-transition: ease-out 0.4s !important;
-moz-transition: ease-out 0.4s !important; */
transition: ease-out 0.4s;
}
.slide_diagonal:hover {
box-shadow: inset 400px 50px 0 0 #007ACC;
border: 2px solid #007ACC;
}
#outer {
position: relative;
top: 60%;
left: 50%;
transform: translate(-50%,-50%);
width: 364px;
/*margin: 50px auto 0 auto;*/
text-align: center;
}
<div id="outer">
<div class="button_slide slide_diagonal">KLIK HIER</div>
</div>
Reason of hiccup
The answer from DreamTeK helped out to point out the issue. It looks like that when a transform transform: translate(-50%,-50%); is applied to #outer, Chrome will hiccup the animation. The only question that will be left is, why does this cause the issue?
edit: typos, extra information
I wasn't able to pinpoint the exact reason Chrome has issues with the box-transition however I used a differant method that creates the same effect much smoother.
#outer {
width: 220px;
margin: 50px auto;
text-align: center;
}
.button_slide {
position: relative;
color: black;
border: 2px solid #ffffff;
padding: 18px 45px;
display: block;
font: 14px "Lucida Console", Monaco, monospace;
letter-spacing: 5px;
text-decoration: none;
cursor: pointer;
transition: ease-out 0.4s;
width: 100%;
box-sizing: border-box;
}
.button_slide::before {
content: '';
box-shadow: inset 0 0 0 0 #fff;
transition: ease-in-out 0.4s;
border: 2px solid #fff;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
z-index: -1;
}
.slide_diagonal:hover::before {
box-shadow: inset 300px 50px 0 0 #007ACC;
border-color: #007ACC;
}
<div id="outer">
<a class="button_slide slide_diagonal">KLIK HIER</a>
</div>
So I have a tooltip on tumblr and everything about the code is working except the max width, it's stuck at 75px. I've changed it to 250px and 300px and it refuses to stretch with the words in the tooltip.
Code:
a[tooltip]:hover:after {
position: absolute;
z-index: 99999999;
max-width: 300px;
min-width: 60px;
border: 1px solid #bababa;
padding: 6px;
margin: -27px 0px 0px 28px;
background-color: #ffffff;
color: #1a2242;
font-family: arial;
font-size: 7px;
line-height: 12px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: none;
text-align: center;
box-shadow: rgba(0, 0, 0, 0.04)0 2px 4px;
opacity: 1;
content: attr(tooltip);
transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
-webkit-transition-duration: 0.6s;
-o-transition-duration: 0.6s;
}
#s-m-t-tooltip {
position: absolute;
z-index: 99999999;
max-width: 300px;
min-width: 60px;
border: 1px solid #bababa;
padding: 6px;
margin: -27px 0px 0px 28px;
background-color: #ffffff;
color: #1a2242;
font-family: arial;
font-size: 7px;
line-height: 12px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: none;
text-align: center;
box-shadow: rgba(0, 0, 0, 0.04)0 2px 4px;
opacity: 1;
outline: 0px solid #ddd;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
}
Link
Any help is appreciated and if you need more information, let me know.
add width: 100%; for your pseudo element, also you can use box-sizing so that the width and height properties set the dimensions of the content rather than the content.
`
a[tooltip]:hover:after {
width: 100%;
box-sizing: border-box;
position: absolute;
z-index: 99999999;
max-width: 300px;
min-width: 60px;
border: 1px solid #bababa;
padding: 6px;
margin: -5px 0 0 28px;
background-color: #ffffff;
color: #1a2242;
font-family: arial;
font-size: 7px;
line-height: 12px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: none;
text-align: center;
box-shadow: rgba(0, 0, 0, 0.04)0 2px 4px;
opacity: 1;
content: attr(tooltip);
transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
-webkit-transition-duration: 0.6s;
-o-transition-duration: 0.6s;
}
#s-m-t-tooltip {
position: absolute;
z-index: 99999999;
width: 300px;
max-width: 200px;
min-width: 60px;
border: 1px solid #bababa;
padding: 6px;
margin: -27 0 0 28px;
background-color: #ffffff;
color: #1a2242;
font-family: arial;
font-size: 7px;
line-height: 12px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: none;
text-align: center;
box-shadow: rgba(0, 0, 0, 0.04)0 2px 4px;
opacity: 1;
outline: 0px solid #ddd;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
}
Link
The reason it's not working is because you have a width:100% set on the a:after pseudo-element. That property will set the width of the element to that of it's parent, in this case your a is a child of your <div class="markericon1">. You can see that if you change just the width of <div class="markericon1"> to something higher you will get the result you want.
.markericon1 {
width:300px;
}
I've created div element, and I also added a border-radius attribute to make the div more aesthetically pleasing. I also added a -webkit-transition: opacity .25s ease attribute to the div to create a transition to a dark overlay when the user hovers over the div. Then, I run into a problem which can be explained by these images.
Cursor outside the div element:
Moving the cursor inside the div element:
The cursor is fully inside the div element:
So, I guess this is a problem with the transition and it's caused by the rounded border of the image. It's kind of annoying and I'd like to remove it but I don't know how to. I've attached the code here:
Note: .memX (where X is a number) refers to each div element. There are like 10 .mem elements.
mem1, .mem2, .mem3, .mem4, .mem5, .mem6, .mem7, .mem8, .mem9, .mem10 {
height: 200px;
width: 200px;
margin: 0px 31px;
display: inline-block;
border-radius: 10px;
border: solid;
border-width: thin;
border-color: #d6d6d6;
overflow: hidden;
}
.overlay {
background: rgba(0,0,0,.4);
text-align: center;
height: 100px;
width: 100%;
padding: 45px 0px 66px 0px;
opacity: 0;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
}
.insidetext {
font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
font-weight: lighter;
color: rgba(255,255,255,.85);
font-size: 1.5em;
margin-top: 35px;
}
.mem1:hover .overlay, .mem2:hover .overlay, .mem3:hover .overlay, .mem4:hover .overlay, .mem5:hover .overlay, .mem6:hover .overlay, .mem7:hover .overlay, .mem8:hover .overlay, .mem9:hover .overlay {
border-radius: 10px;
opacity: 1;
}
.mem1 {
background-image: url(members/giles.png);
}
This seems to be a problem in general. You can see this particular problem in action on this CodePen: http://codepen.io/ianfarb/pen/ikeAf
Try using this..
body {
background: #e7e7e7;
}
#box {
width: 300px;
height: 200px;
box-shadow: inset 1px 1px 40px 0 rgba(0, 0, 0, .45);
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
margin: 5% auto 0 auto;
background: url(http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg);
background-size: cover;
border-radius: 5px;
overflow: hidden;
position: relative;
}
#overlay {
background: rgba(0, 0, 0, .75);
text-align: center;
/*padding: 45px 0 66px 0;*/
display: table;
width: 100%;
height: 100%;
opacity: 0;
border-radius: 5px;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
}
#box:hover #overlay {
opacity: 1;
}
#plus {
font-family: Helvetica;
font-weight: 900;
color: rgba(255, 255, 255, .85);
font-size: 96px;
display: table-cell;
vertical-align: middle;
}
http://codepen.io/anon/pen/VLBqvE
Hmm I'm confused as to why you've got so many mem classes. Class names can be reused, ID selectors cannot. So why have .mem1 and so on when you could simply have .mem?
Anyway, to fix your problem all you need to do is add border-radius:5px; to #overlay and that should give you your desired effect.
I your example you have two div one is parent (box) and another is chilled(overlay) and you apply border to parent and your hover effect is on chilled so when you hover it will apply transition on chilled. and chilled has no border-radius: 5px; so apply border-radius: 5px; to your chilled id also. so i think its an overflow issue
But you can try this soluttion:
solution is remove delay from transition then it works because of delay it will give you problem.
See this example for removed delay from transition :http://jsfiddle.net/9phk87x8/ i think it will work for you.
#overlay {
background: rgba(0, 0, 0, .75);
text-align: center;
padding: 45px 0 66px 0;
opacity: 0;
-webkit-transition: opacity ease;
-moz-transition: opacity ease;
}
I want text which is written "This text needs to be in middle" to be positioned in the center.
You can view the problem in more detail by clicking the link below:
http://dabblet.com/gist/aadbfca153ec45c6633f
I tried to solve it with <span> tags.
You can use position: absolute; to achieve this. First set the container .option-header to position: relative;, and then the text on the right to position: absolute;. Then all you have to do is move it to the right with right: 0;. You can remove the float.
See the following snippet or your adjusted dabblet.
.option-header{
height: 76px;
width: 591px;
margin: 0 0 14px;
font-size: 32px;
/* padding-bottom: 8px; */
padding: 1px 0px;
text-align: center;
color: white;
font-size: 30px;
font-weight: 600;
padding: 20px 8px;
height: auto;
/* display: inline-block; */
-o-transition: .4s;
-ms-transition: .4s;
-moz-transition: .4s;
-webkit-transition: .4s;
/* transition: .4s; */
font-family: 'Alegreya SC',serif;
color: #fefefe;
border-radius: 0 0 6px 6px;
overflow: hidden;
border: 2px solid #e2e2e2!important;
background: #D85D1E;
position: relative;
}
.najjeftinija{
height: 39px;
background: rgb(110, 165, 38);
padding: 1px 0px;
}
.najjeftinija span{
padding-right: 5px;
font-size: 23px;
padding-top: 5px;
font-family: cursive;
}
.cijenadesno{
position: absolute;
right: 0;
}
<div class="option-header najjeftinija width-100"><span>This needs to be in middle </span><span class="cijenadesno">4.95 KM</span></div>
Just change the margin from margin: 0 0 14px; to margin: auto;
Full code
.option-header{
height: 76px;
width: 591px;
margin: auto; /* <-- Change here */
font-size: 32px;
/* padding-bottom: 8px; */
padding: 1px 0px;
text-align: center;
color: white;
font-size: 30px;
font-weight: 600;
padding: 20px 8px;
height: auto;
/* display: inline-block; */
-o-transition: .4s;
-ms-transition: .4s;
-moz-transition: .4s;
-webkit-transition: .4s;
/* transition: .4s; */
font-family: 'Alegreya SC',serif;
color: #fefefe;
border-radius: 0 0 6px 6px;
overflow: hidden;
border: 2px solid #e2e2e2!important;
background: #D85D1E;
}