I am pretty new in web development and I am trying to make an affect on a left button that when you hover over it there is a smaller arrow appearing and the whole button expand into the left side of the screen, but for some reason it doesn't look as smooth as I want it too look and I can't find a way to make it that way, can someone help me? :)
PS:Rmain is the arrow always displayed on the button, Rside is the arrow that appearing when you hover over the button.
html:
<button class="right">
<span class="Rmain"></span>
<span class="Rside"></span>
</button>
css:
.left {
background-color: rgba(255, 255, 255, 0.863);
border: 4px solid rgb(60, 57, 238);
color: rgb(0, 0, 0);
padding: 145px 10px;
margin: 50px;
width: 55px;
text-align: right;
border-radius: 10%;
position: absolute;
transition: 0.6s;
}
.left:hover {
box-shadow: 5px 12px 16px 0 rgba(0, 0, 0, 0.4);
background-color: rgb(60, 57, 238);
color: rgb(255, 255, 255);
opacity: 75%;
cursor: pointer;
border-left-width: 95px;
transition: 0.6s;
}
.Lmain {
position: absolute;
height: 0px;
width: 0px;
top: 40%;
right: 86%;
font-size: 40px;
}
.Lmain::after {
content: '\290C';
}
.Lside {
position: absolute;
color: white;
height: 0px;
opacity: 0;
top: 40%;
right: 58%;
font-size: 39px;
transition: 0.4s;
}
.Lside::after {
content: '\2039';
}
.left:hover .Lside {
right: 72%;
transition: 1s;
opacity: 1;
}
button:focus {
outline: 0;
}
I'm not sure if this is what you're looking for, but it looks better this way:
add border-right-width:20px; into .left:hover section of css
Related
Do you guys know how I can get my tooltip to show up if I hover my mouse over the span icon I created only using css?
HTML
<div>
<div class="t-hover-block">
This is the tooltip!
</div>
<span class="i-q-mark"></span>
</div>
CSS
.t-hover-block {
opacity: 0;
position: absolute;
background: rgba(0, 0, 0, 0.3);
border-radius: 1.429em;
font-size: 10pt;
padding: 0.929em;
width: 16em;
top: 40.4%;
left: 61%;
text-align: left;
background: rgba(255, 255, 255, 1);
box-shadow: 4px 3px 34px -3px rgba(245, 188, 223, 1);
&:hover {
opacity: 1;
}
}
.t-hover-block::after {
background-color: rgba(255, 255, 255, 1);
content: '\00a0';
height: 0.857em;
width: 1.071em;
position: absolute;
top: 40%;
left: 97%;
transform: rotate(29deg) skew(-35deg);
border: solid 1px rgba(181, 49, 134, 0.3);
border-left: none;
border-bottom: none;
}
.i-q-mark {
display: inline-block;
width: 2em;
height: 2em;
background-color: $color-brand;
border-radius: 50%;
text-align: center;
margin-top: 0.643em;
margin-left: 0.714em;
line-height: 2.071em;
&:after {
font-family: 'Raleway';
content: '\3F'; // Hex value for question mark
color: #ffffff;
font-size: 16pt;
font-weight: 700;
}
}
I can get this to work but only if it hovers over the div and that's not the behavior needed. As a side question is this structure the best way of doing that I want to achieve?
If you flip the order of the div and span, and use this css for the hover state, you can get what you are looking for:
.i-q-mark:hover + .t-hover-block {
opacity: 1;
}
the HTML:
<div>
<span class="i-q-mark">Span</span>
<div class="t-hover-block">
This is the tooltip!
</div>
</div>
Using the adjacentsibling selector + you can target the next element
I have made this button by editing "Simple Hover Effect by Vincent Durand". But the problem is that some css in my blog is overlapping. So it is not aligning to middle correctly. I cant find which one it may be. I tried using !important tag in some places. But I guess it didn't work out. What I need to know where should I use !important in this code to align the button to middle? Or will I need a new css element to do that?
<!-- Awesome button css Start -->
.btn-margin {
margin-top: 1.6rem;
box-sizing: inherit;
text-align: center;
}
.btn {
-webkit-tap-high!importantr: transparent;
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.14) 0 3px 3px 0, rgba(0, 0, 0, 0.12) 0 1px 7px 0, rgba(0, 0, 0, 0.2) 0 3px 1px -1px;
box-sizing: inherit;
color: white !important;
cursor: pointer;
display: inline-block;
height: auto;
letter-spacing: 0.5px;
line-height: 42px;
pointer-events: all;
position: relative;
text-decoration-line: none;
vertical-align: middle;
font-size: 1.6em;
padding: 0 2em;
transition: 800ms ease all;
}
.btn-green {
background-color: #1AAB8A;
}
.btn-green:hover {
background-color: #fff;
color: #1AAB8A !important;
}
.btn:before,.btn:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 2px;
width: 0;
transition: 400ms ease all;
}
.btn:after {
right: inherit;
top: inherit;
left: 0;
bottom: 0;
}
.btn-green:before,.btn-green:after {
background: #1AAB8A;
}
.btn:hover:before,.btn:hover:after {
width: 100%;
transition: 800ms ease all;
}
<!-- Awesome button css End -->
<div class="btn-margin">
<a class="btn btn-green" href="#">
Click Here To See Answers
</a>
</div>
Add *{box-sizing:border-box;} to ur css
<!-- Awesome button css Start -->
*{box-sizing:border-box;}
.btn-margin {
margin-top: 1.6rem;
box-sizing: inherit;
text-align: center;
}
.btn {
-webkit-tap-high!importantr: transparent;
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.14) 0 3px 3px 0, rgba(0, 0, 0, 0.12) 0 1px 7px 0, rgba(0, 0, 0, 0.2) 0 3px 1px -1px;
box-sizing: inherit;
color: white !important;
cursor: pointer;
display: inline-block;
height: auto;
letter-spacing: 0.5px;
line-height: 42px;
pointer-events: all;
position: relative;
text-decoration-line: none;
vertical-align: middle;
font-size: 1.6em;
padding: 0 2em;
transition: 800ms ease all;
}
.btn-green {
background-color: #1AAB8A;
}
.btn-green:hover {
background-color: #fff;
color: #1AAB8A !important;
}
.btn:before,.btn:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 2px;
width: 0;
transition: 400ms ease all;
}
.btn:after {
right: inherit;
top: inherit;
left: 0;
bottom: 0;
}
.btn-green:before,.btn-green:after {
background: #1AAB8A;
}
.btn:hover:before,.btn:hover:after {
width: 100%;
transition: 800ms ease all;
}
<!-- Awesome button css End -->
<div class="btn-margin">
<a class="btn btn-green" href="#">
Click Here To See Answers
</a>
</div>
Use this CSS to center align the button
.btn-green {
background-color: #1AAB8A;
position: relative;
left: 50%;
transform: translateX(-50%);
}
<!-- Awesome button css Start -->.btn-margin {
margin-top: 1.6rem;
box-sizing: inherit;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.btn {
-webkit-tap-high!importantr: transparent;
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.14) 0 3px 3px 0, rgba(0, 0, 0, 0.12) 0 1px 7px 0, rgba(0, 0, 0, 0.2) 0 3px 1px -1px;
box-sizing: inherit;
color: white !important;
cursor: pointer;
display: inline-block;
height: auto;
letter-spacing: 0.5px;
line-height: 42px;
pointer-events: all;
position: relative;
text-decoration-line: none;
vertical-align: middle;
font-size: 1.6em;
padding: 0 2em;
transition: 800ms ease all;
}
.btn-green {
background-color: #1AAB8A;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.btn-green:hover {
background-color: #fff;
color: #1AAB8A !important;
}
.btn:before,
.btn:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 2px;
width: 0;
transition: 400ms ease all;
}
.btn:after {
right: inherit;
top: inherit;
left: 0;
bottom: 0;
}
.btn-green:before,
.btn-green:after {
background: #1AAB8A;
}
.btn:hover:before,
.btn:hover:after {
width: 100%;
transition: 800ms ease all;
}
<!-- Awesome button css End -->.btn-green {}
<div class="btn-margin">
<a class="btn btn-green" href="https://myneobuxportal.blogspot.com/p/answer-gamer-quiz-v2.html">
Click Here To See Answers
</a>
</div>
add one parent div and set this div text-align: center;
<!-- Awesome button css Start -->
.demo{
text-align: center;
}
.btn-margin {
margin-top: 1.6rem;
box-sizing: inherit;
text-align: center;
}
.btn {
-webkit-tap-high!importantr: transparent;
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.14) 0 3px 3px 0, rgba(0, 0, 0, 0.12) 0 1px 7px 0, rgba(0, 0, 0, 0.2) 0 3px 1px -1px;
box-sizing: inherit;
color: white !important;
cursor: pointer;
display: inline-block;
height: auto;
letter-spacing: 0.5px;
line-height: 42px;
pointer-events: all;
position: relative;
text-decoration-line: none;
vertical-align: middle;
font-size: 1.6em;
padding: 0 2em;
transition: 800ms ease all;
}
.btn-green {
background-color: #1AAB8A;
}
.btn-green:hover {
background-color: #fff;
color: #1AAB8A !important;
}
.btn:before,.btn:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 2px;
width: 0;
transition: 400ms ease all;
}
.btn:after {
right: inherit;
top: inherit;
left: 0;
bottom: 0;
}
.btn-green:before,.btn-green:after {
background: #1AAB8A;
}
.btn:hover:before,.btn:hover:after {
width: 100%;
transition: 800ms ease all;
}
<!-- Awesome button css End -->
<div class="Demo">
<div class="btn-margin">
<a class="btn btn-green" href="#">
Click Here To See Answers
</a>
</div>
</div>
In the end the problem was with the comment :(
I used html comment in css. That's why this happened. Thanks #CharuMaheshwari for mentioning that out. Also another thanks for other 3 answers. All of them worked.
With #CharuMaheshwari help this is the code I decided to use.
/* Awesome button css Start */
.btn-margin {
margin-top: 1.6rem;
box-sizing: inherit;
text-align: center;
}
.btn {
-webkit-tap-high!importantr: transparent;
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.14) 0 3px 3px 0, rgba(0, 0, 0, 0.12) 0 1px 7px 0, rgba(0, 0, 0, 0.2) 0 3px 1px -1px;
box-sizing: inherit;
color: white !important;
cursor: pointer;
display: inline-block;
height: auto;
letter-spacing: 0.5px;
line-height: 42px;
pointer-events: all;
position: relative;
text-decoration-line: none;
vertical-align: middle;
font-size: 1.6em;
padding: 0 2em;
transition: 800ms ease all;
}
.btn-green {
background-color: #1AAB8A;
}
.btn-green:hover {
background-color: #fff;
color: #1AAB8A !important;
}
.btn:before,.btn:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 2px;
width: 0;
transition: 400ms ease all;
}
.btn:after {
right: inherit;
top: inherit;
left: 0;
bottom: 0;
}
.btn-green:before,.btn-green:after {
background: #1AAB8A;
}
.btn:hover:before,.btn:hover:after {
width: 100%;
transition: 800ms ease all;
}
/* Awesome button css End */
<div class="btn-margin">
<a class="btn btn-green" href="#">
Click Here To See Answers
</a>
</div>
I've got an issue with menu styling.
Menu looks like this:
And each element is styled as follows:
.gallery-navi-element {
position: relative;
float: left;
text-align: center;
font-size: 1.7em;
padding: 0px 60px 0px 60px;
margin-top: 10px;
transition: height .8s ease;
}
.gallery-navi-element:hover:after {
content: " ";
position: absolute;
left: 50%;
/* top: 50%; */
transform: translate(-50%,0%);
top: 40px;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 25px 0 25px;
border-color: rgb(74, 125, 51) transparent transparent transparent;
transition: 0.5s all;
}
In this way i can achieve such effect:
Still i'm having serious issues making this triangle stay there after a click. Creating jQuery handlers adding classes seems not to work at all since the new class overwrites navi buttons. Have tried playing with :target but without luck. Any ideas?
EDIT:
Added a fiddle: https://jsfiddle.net/a7zs3z6o/
Add a tabindex to each gallery-navi-element element:
<div class="gallery-navi-element" id="gallery-show-wszystkie" tabindex="1">Wszystkie</div>
That will allow them to be focused when clicked.
You'll then want to remove the default outline that appears on focused elements, which you can do with:
.gallery-navi-element:focus {
outline: none;
}
Updated Fiddle
Instead of changing the navi links' class, just add a new .hover class that has the same styles as :hover. Then you won't have a problem with lots of overwriting styles.
You would probably have less trouble doing this if you simplified the CSS to only include the transitioned styles in the hover state/added-class state.
.gallery-navi-element:after {
content: " ";
position: absolute;
left: 50%;
transform: translate(-50%, 0%);
top: 30px;
width: 0;
height: 0;
border-style: solid;
/* border-width: 0px 25px 0 25px; */
border-width: 10px 25px 0 25px;
border-color: rgb(74, 125, 51) transparent transparent transparent;
transition: 0.5s all;
}
.gallery-navi-element:hover:after,
.gallery-navi-element.hover:after {
top: 40px;
border-top-width: 20px;
}
Note that the only reason for the border-top-width transition is so that your triangle doesn't cover up the bottom of the Y in the first couple links.
Example:
var navLinks = document.getElementsByClassName('gallery-navi-element');
for(var i=0,l=navLinks.length;i<l;i++) {
navLinks[i].addEventListener('click', function(){
for(var i=0,l=navLinks.length;i<l;i++) {
navLinks[i].classList.remove('hover');
}
this.classList.add('hover');
}, false);
}
.gallery-navi {
border-radius: 28px;
width: 950px;
height: 55px;
background-color: rgb(74, 125, 51);
margin: 0px auto 20px auto;
}
.gallery-navi-wrapper {
margin: 0 auto;
width: 870px;
}
.gallery-navi-separator {
width: 2px;
background-color: rgba(255, 255, 255, 0.2);
height: 36px;
float: left;
margin-top: 10px;
}
.gallery-navi-element {
position: relative;
float: left;
text-align: center;
font-size: 1.7em;
padding: 0px 60px 0px 60px;
margin-top: 10px;
transition: height .8s ease;
}
.gallery-navi-element:after {
content: " ";
position: absolute;
left: 50%;
transform: translate(-50%, 0%);
top: 30px;
width: 0;
height: 0;
border-style: solid;
/* border-width: 0px 25px 0 25px; */
border-width: 10px 25px 0 25px;
border-color: rgb(74, 125, 51) transparent transparent transparent;
transition: 0.5s all;
}
.gallery-navi-element:hover:after,
.gallery-navi-element.hover:after {
top: 40px;
border-top-width: 20px;
}
<div class="gallery-navi">
<div class="gallery-navi-wrapper">
<div class="gallery-navi-element" id="gallery-show-wszystkie">Wszystkie</div>
<div class="gallery-navi-separator"></div>
<div class="gallery-navi-element" id="gallery-show-produkty">Produkty</div>
<div class="gallery-navi-separator"></div>
<div class="gallery-navi-element" id="gallery-show-tartak">Tartak</div>
<div class="gallery-navi-separator"></div>
<div class="gallery-navi-element" id="gallery-show-sklad">Skład</div>
</div>
</div>
http://jsfiddle.net/93bphr4f/
html:
<button type="button" onClick="location.href='#'" class="buttonpink2">Claim 10 Free Student Accounts for Your School</button>
css:
/* PINK BUTTON 2 */
.buttonpink2 {
font-weight: bold;
font-size: 30px;
color: white;
cursor: pointer;
cursor: hand;
border-radius: 5px !important;
box-shadow: 4px 4px 4px #b5bcc2;
border: 0;
background-repeat: no-repeat;
background: #e57780;
height: 75px;
width: 100%;
position: relative;
}
.buttonpink2:after {
border-radius: 5px !important;
content: "Claim 10 Free Student Accounts for Your School";
display: block;
height: 100%;
width: 100%;
opacity: 0;
background: #c24e57;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
top: 0;
left: 0;
position: absolute;
}
.buttonpink2:hover:after {
opacity: 1;
}
.buttonpink2 p {
color: #fff;
z-index: 1;
position: relative;
}
look at it,
I dont know why when I hover mouse on button, text move to top..
I want to text be still on center of button.
What i doing wrong?
Anyone can help?
Don't know why you complicated it too much but you simple use line-height equal of element height:
/* PINK BUTTON 2 */
.buttonpink2 {
font-weight: bold;
font-size: 30px;
color: white;
cursor: pointer;
cursor: hand;
border-radius: 5px !important;
box-shadow: 4px 4px 4px #b5bcc2;
border: 0;
background-repeat: no-repeat;
background: #e57780;
height: 75px;
width: 100%;
position: relative;
}
.buttonpink2:after {
border-radius: 5px !important;
content: "Claim 10 Free Student Accounts for Your School";
display: block;
height: 100%;
width: 100%;
opacity: 0;
background: #c24e57;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
top: 0;
left: 0;
position: absolute;
line-height: 75px;/*add line height equal of element height*/
}
.buttonpink2:hover:after {
opacity: 1;
}
.buttonpink2 p {
color: #fff;
z-index: 1;
position: relative;
}
<button type="button" onClick="location.href='./freeaccess'" class="buttonpink2">Claim 10 Free Student Accounts for Your School</button>
You shouldn't use the :after tag at all in this situation.
// All the positioning made the button go crazy.
You should do it this way:
Use .buttonClass { } to set the basic button styling, and use .buttonClass:hover { } to only change the background of the button. You don't have to duplicate every item in the :hover part.
/* PINK BUTTON 2 */
.buttonpink2 {
font-weight: bold;
font-size: 30px;
color: white;
cursor: pointer;
border-radius: 5px;
box-shadow: 4px 4px 4px #b5bcc2;
border: 0;
height: 75px;
width: 100%;
background: #e57780;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
}
.buttonpink2:hover {
background: #c24e57;
}
.buttonpink2 p {
color: #fff;
z-index: 1;
}
Strange way to do, why are you using pseudo-elements just in order to change background-color ?
.buttonpink2:after {
height: 75px;
line-height:75px;
...
}
will solve your problem, but I suggest you to remove the .buttonpink2:after element and just change the background-color of the button
If you would rather using padding instead of line-height, you can do this:
.buttonpink2:after {
height: 50%;
padding: 20px 0;
}
You can add some letter-spacing on :after to solve it, I just added 0.3px, you can try other values to make it better.
/* PINK BUTTON 2 */
.buttonpink2 {
font-weight: bold;
font-size: 30px;
color: white;
cursor: pointer;
cursor: hand;
border-radius: 5px !important;
box-shadow: 4px 4px 4px #b5bcc2;
border: 0;
background-repeat: no-repeat;
background: #e57780;
height: 75px;
width: 100%;
position: relative;
}
.buttonpink2:after {
border-radius: 5px !important;
content: "Claim 10 Free Student Accounts for Your School";
display: block;
height: 100%;
width: 100%;
opacity: 0;
background: #c24e57;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
top: 0;
left: 0;
position: absolute;
letter-spacing: 0.3px
}
.buttonpink2:hover:after {
opacity: 1;
}
.buttonpink2 p {
color: #fff;
z-index: 1;
position: relative;
}
<button type="button" onClick="location.href='#'" class="buttonpink2">Claim 10 Free Student Accounts for Your School</button>
I'm not new to CSS but for some reason I've not played with animations or transitions up to this point. I want to learn how to apply any form of transition to a tooltip that I've made, but every time I read code and then try I seem to fail. I have a quick example of code I put together and maybe someone can quickly show me what I'm doing wrong.
Note: This is only an example, I don't plan to use a 2 second transition, makes it clear that it's working.
Following is the key code, please see the jsfiddle here.
label[data-tooltip] {
border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
padding-bottom: 2px;
position: relative;
cursor: pointer;
&:hover:after {
transition: all 2s ease-in-out;
.borderRadius(3px);
content: attr(data-tooltip);
background: rgba(83, 83, 83, 0.95);
text-transform: none;
position: absolute;
line-height: 18px;
padding: 5px 10px;
font-size: 13px;
width: 100px;
z-index: 99;
color: #fff;
bottom: 120%;
left: -5px;
}
&:after {
display: none;
}
&:hover:after {
display: block;
}
}
Try this solution
you should assign all the styles to the after
and to the hover status just the attribute you want to animate
label[data-tooltip] {
border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
padding-bottom: 2px;
position: relative;
cursor: pointer;
&:after {
transition: all ease 5s;
content: attr(data-tooltip);
background: rgba(83, 83, 83, 0.95);
text-transform: none;
position: absolute;
line-height: 18px;
padding: 5px 10px;
font-size: 13px;
width: 100px;
z-index: 99;
color: #fff;
bottom: 120%;
left: -5px;
opacity: 0;
}
&:hover:after {
opacity: 1;
}
}
.formRow {
background: #EFEFEF;
margin: 50px auto;
padding: 10px;
width: 50%;
}
.formRow-label {
display: inline-block;
margin-right: 20px;
}
.formRow-input {
display: inline-block;
}