I'm making a menu that looks like this one http://exclusivelyhistailoring.com/ Notice how when a link is hovered, the text moves its way to the right and changes colors too.
Unhovered State
Hovered State
Here's what I have so far :
.text-glow {
font-size:4em;
color: #FFFFFF;
font-family:Arial!important;
-webkit-stroke-width: 6.3px;
-webkit-stroke-color: #FFFFFF;
-webkit-fill-color: #FFFFFF;
text-shadow: 1px 0px 20px white;
-webkit-transition: width 0.9s;
/*Safari & Chrome*/
transition: width 0.9s;
-moz-transition: width 0.9s;
/* Firefox 4 */
-o-transition: width 0.9s;
/* Opera */
}
.text-glow:hover, .text-glow:focus .text-glow:active {
color: transparent;
text-shadow: 0 0 5px #000;
}
Any ideas?
That's a flash file, so to create something similar to that using CSS, what you will need is text-indent property or padding-left, whatever you are fine with..
I've made the below demo from scratch..
Demo
html, body {
height: 100%;
background: #FF9000;
}
ul {
margin: 20px;
font-family: Arial;
font-size: 15px;
font-weight: bold;
}
ul li {
margin-bottom: 5px;
text-shadow: 0 0 10px #fff;
color #000;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
}
ul li:hover {
color: #fff;
text-indent: 15px;
}
a {
color: inherit;
text-decoration: none;
}
Related
I'm working to build a button styling where when the user hovers over a button, the button moves up 2 pixels. I have that working with the following on hover:
`transform: translateY(-2px);`
The problem is, if you move your mouse right under the button, the button starts to move but and the button now bounces/jumps from normal to active causing button jumpies.
Any idea on how I can implement the button moving up 2 pixels on hover but without the jumpies when the mouse is near the edge of the button?
.ui.button {
outline: none;
height: 48px;
font-weight: 500;
font-size: 17px;
line-height: 20px;
padding-top: 12.5px;
padding-bottom: 12.5px;
color: #fff;
background: green;
border: 1.5px solid darkGreen;
box-shadow: 0 2px rgba(6,164,105,.25);
transition: transform .1s ease-in-out,box-shadow .1s ease-in-out,-webkit-transform .1s ease-in-out,-webkit-box-shadow .1s ease-in-out;
}
.ui.primary.button:hover {
transform: translateY(-2px);
background: green;
border-color: darkGreen;
box-shadow: 0 4px rgba(6,164,105,.25);
}
<button class="ui medium primary button button-icon-with-text " role="button" style="margin-bottom: 0px;">Primary Button</button>
Similarly to Temani Afif's anwser, I would use a pseudo-element that's 2px longer than the element, but switching the overflow from hidden to visible on hover.
.ui.button {
position:relative; overflow:hidden;
outline: none;
height: 48px;
font-weight: 500;
font-size: 17px;
line-height: 20px;
padding-top: 12.5px;
padding-bottom: 12.5px;
color: #fff;
background: green;
border: 1.5px solid darkGreen;
box-shadow: 0 2px rgba(6,164,105,.25);
transition: transform .1s ease-in-out,box-shadow .1s ease-in-out,-webkit-transform .1s ease-in-out,-webkit-box-shadow .1s ease-in-out;
}
.ui.primary.button::after{
content:"";
position:absolute;
top:0; left:0;
width:100%;
height:calc(100% + 3.5px); /* translate + bottom border height*/
}
.ui.primary.button:hover {
overflow:visible;
transform: translateY(-2px);
background: green;
border-color: darkGreen;
box-shadow: 0 4px rgba(6,164,105,.25);
}
<button class="ui medium primary button button-icon-with-text " role="button" style="margin-bottom: 0px;">Primary Button</button>
An idea is to use a pseudo-element that will cover the space under button after the translation and you will avoid this effect. So it's like you simply increase the total height of your element instead of translating it.
.ui.button {
position:relative;
outline: none;
height: 48px;
font-weight: 500;
font-size: 17px;
line-height: 20px;
padding-top: 12.5px;
padding-bottom: 12.5px;
color: #fff;
background: green;
border: 1.5px solid darkGreen;
box-shadow: 0 2px rgba(6,164,105,.25);
transition: transform .1s ease-in-out,box-shadow .1s ease-in-out,-webkit-transform .1s ease-in-out,-webkit-box-shadow .1s ease-in-out;
}
.ui.button:after {
content:"";
position:absolute;
bottom:0;
right:0;
left:0;
height:0;
}
.ui.primary.button:hover {
transform: translateY(-2px);
background: green;
border-color: darkGreen;
box-shadow: 0 4px rgba(6,164,105,.25);
}
.ui.primary.button:hover:after {
content:"";
height:2px;
bottom:-3.5px; /* Don't forget the border !*/
}
<button class="ui medium primary button button-icon-with-text " role="button" style="margin-bottom: 0px;">Primary Button</button>
Another idea is to use a container for the button on where you apply the hover. This will work with any value of transalation and you avoid doing calculation to find the values of the pseudo-element:
.ui.button {
position: relative;
outline: none;
height: 48px;
font-weight: 500;
font-size: 17px;
line-height: 20px;
padding-top: 12.5px;
padding-bottom: 12.5px;
color: #fff;
background: green;
border: 1.5px solid darkGreen;
box-shadow: 0 2px rgba(6, 164, 105, .25);
transition: transform .1s ease-in-out, box-shadow .1s ease-in-out, -webkit-transform .1s ease-in-out, -webkit-box-shadow .1s ease-in-out;
}
.contain {
display: inline-block;
}
.contain:hover .ui.primary.button {
transform: translateY(-2px);
background: green;
border-color: darkGreen;
box-shadow: 0 4px rgba(6, 164, 105, .25);
}
<div class="contain">
<button class="ui medium primary button button-icon-with-text " role="button" style="margin-bottom: 0px;">Primary Button</button>
</div>
i have a problem to use transition on a styled anchor.
it should expand to a higher width and show a glyphicon. i tried it width max-width but i think i miss something. the glyphicon works but not the "animated" width.
html:
<a class="link" href="/"> Order <a/>
css:
a.link {
background: #0069b4 none repeat scroll 0% 0%;
color: white;
font-size: 24px;
height: 60px;
cursor: pointer;
border-radius: 30px;
text-align: center;
padding: 10px 15px;
transition: max-width 1000ms ease-in-out;
-webkit-transition: max-width 1000ms ease-in-out;
-moz-transition: max-width 1000ms ease-in-out;
}
a.link:hover {
padding: 10px 40px;
max-width: 100%;
}
a.link:hover:after {
font-family: icomoon;
content: "\e903";
color: #ffffff;
font-size: 20px;
}
https://jsfiddle.net/Lg7kutpp/
Your code is not working, because it has no working width. It's changing size because of the padding, and therefore the transition:max-width will not work.
Easy way to fix with your code is to add transition:all.
Check this:
a.link {
background: #0069b4 none repeat scroll 0% 0%;
color: white;
font-size: 24px;
height: 60px;
cursor: pointer;
border-radius: 30px;
text-align: center;
padding: 10px 15px;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
}
a.link:hover {
padding: 10px 40px;
max-width: 100%;
}
a.link:hover:after {
font-family: icomoon;
content: "\e903";
color: #ffffff;
font-size: 20px;
}
<a class="link">Order></a>
I you just want to go with the transition only for the width property, you should add display:inline-block and a width property to the anchor class.
a.link {
background: #0069b4 none repeat scroll 0% 0%;
color: white;
font-size: 24px;
height: 60px;
cursor: pointer;
border-radius: 30px;
width: 100px;
display: inline-block;
text-align: center;
padding: 10px 15px;
transition: width 1s ease-in-out;
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
}
a.link:hover {
padding: 10px 40px;
width: 150px;
}
a.link:hover:after {
font-family: icomoon;
content: "\e903";
color: #ffffff;
font-size: 20px;
}
<a class="link">Order</a>
a.link {
background: #0069b4 none repeat scroll 0% 0%;
color: white;
font-size: 24px;
height: 60px;
cursor: pointer;
border-radius: 30px;
text-align: center;
padding: 10px 15px;
}
a.link:hover {
padding: 10px 40px;
max-width: 100%;
transition: 1000ms ease-in-out;
-webkit-transition:1000ms ease-in-out;
-moz-transition:1000ms ease-in-out;
}
a.link:hover:after {
font-family: icomoon;
content: "\e903";
color: #ffffff;
font-size: 20px;
}
You should add the transition on the hover selector without max-width
https://jsfiddle.net/Lg7kutpp/1/
I believe you need to set max-width to something less than 100% in a.link.
What you're currently doing is setting max-width to 100% on hover, but the default setting of max-width is already 100%.
Either set max-width to something less than 100% under a.link, or set max-width to something greater than 100% under a.link:hover.
When it comes to the transition-property, you might as well write transition: all 1000ms ease-in-out rather than transition: max-width 1000ms ease-in-out, as using all will make sure that any animation on a.link will have the same properties.
Also, I'd recommend you don't use href="/" unless you intend to direct the user to the main page. If you just want an anchor that doesn't link anywhere, you can drop using href.
Hope this helps.
I'm working in Dot Net Nuke on a website that has been previously setup. I want to add a css button I found on the internet. I put the html in the html fields and css in the stylesheet editor.
when a link is created it automatically adds ">>" after the link text. In other buttons css buttons I used I managed to remove that, but with this button I can't remove it. Also I want the button to link to another page using "a href". How would i make this possible?
Button HTML:
<div class="btn-container">
<input type="submit" value="button" id="button-blue"/>
<div class="ease"></div>
</div>
Button CSS:
#button-blue {
float: left;
width: 100%;
max-width: 500px;
border: white solid 4px;
cursor: pointer;
background-color: #0493bd;
margin-top: -4px;
color: white;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
letter-spacing: .1em;
padding-top: 22px;
padding-bottom: 22px;
font-weight: 500;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
}
/* Change text color & background opacity on hover*/
#button-blue:hover {
background-color: rgba(0,0,0,0);
color: #0493bd;
}
/* The white hover effect */
.ease {
width: 0px;
height: 70px;
background-color: white;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
-ms-transition: .3s ease;
transition: .3s ease;
}
/* Make visable when hover */
.btn-container:hover .ease {
width: 100%;
max-width: 500px;
background-color: white;
border: 0;
}
.btn-container:after {
display: none !important;
}
well you want the button to link to another page, to do that you can simply style your href to look as a button like this (Run the following snippet) -
Submit
<style>
#submit-btn{
display :inline-block;
text-decoration:none;
background-color:blue;
border-radius:4px;
padding:5px 10px;
color:white;
}
</style>
Well for the issue of >> after every link it may be some css that is adding it, which you haven't posted in your question so try adding following code which may remove it..
a:after {
content: none !important;
}
OR this one -
a:after {
display: none !important;
}
or just for the link like button I posted above try this -
#submit-btn:after {
content: none !important;
}
OR
#submit-btn:after {
display: none !important;
}
NOTE - Since you are overwriting CSS don't forget to add !important..
Change to button to href
<div class="btn-container">
Button
<div class="ease"></div>
</div>
CSS
#button-blue{
float:left;
width: 100%;
max-width:500px;
border: white solid 4px;
cursor: pointer;
background-color: #0493bd;
margin-top: -4px;
color: white;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
letter-spacing: .1em;
padding-top: 22px;
padding-bottom: 22px;
font-weight: 500;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
text-align:center;
}
/* Change text color & background opacity on hover*/
#button-blue:hover{
background-color: rgba(0,0,0,0);
color: #0493bd;
}
#button-blue:after{content:">>"}
/* The white hover effect */
.ease {
width: 0px;
height: 70px;
background-color: white;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
-ms-transition: .3s ease;
transition: .3s ease;
}
/* Make visable when hover */
.btn-container:hover .ease{
width: 100%;
max-width: 500px;
background-color: white;
border: 0;
}
.btn-container:after {
display: none !important;
}
demo link
https://jsfiddle.net/0zctLenb/
My transition outs are not working, I am using the latest Chrome Browser and when I hover over the button, the transition in is working, however the transition out just cuts right off.
My CSS
.btn{
border-radius: 5px;
padding: 15px 25px;
font-size: 22px;
text-decoration: none;
margin: 20px;
color: #fff;
position: relative;
display: inline-block;
}
.btn:active{
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
box-shadow: 0px 0px 0px 0px;
}
.blue{
background-color: #55acee;
box-shadow: 0px 5px 0px 0px #3C93D5;
}
.blue:hover{
background-color: #6FC6FF;
transition-duration: .02s;
display: inline-block;
}
}
HTML is on this JSFiddle.
You need to put the transition on the base state not the :hover then it will transition between all states.
.blue {
background-color: #55acee;
box-shadow: 0px 5px 0px 0px #3C93D5;
transition: background-color 0.2s ease-out;
}
.btn {
border-radius: 5px;
padding: 15px 25px;
font-size: 22px;
text-decoration: none;
margin: 20px;
color: #fff;
position: relative;
display: inline-block;
}
.btn:active {
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
box-shadow: 0px 0px 0px 0px;
}
.blue {
background-color: #55acee;
box-shadow: 0px 5px 0px 0px #3C93D5;
transition: background-color 0.2s ease-out;
}
.blue:hover {
background-color: #6FC6FF;
display: inline-block;
}
<div id="buttons"> Blu
</div>
You are adding a transition to the :hover state, not to the actual element.
It's usually better to define a transition on the element itself, and then change properties to it's states, this way it understands that whatever the state change, it should transition from one to the other.
.btn{
transition: background-color 0.2s ease-out;
}
.btn:active{
...
}
.btn:hover{
...
}
Your just need to insert this on your btn main class
.btn{
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
So I am making a drop down-menu for my site and all the looks are fine, but when I hover over it, it appears but when I move my mouse over-top it disappears. When I alter the line height under "ul.menu li > a" it works a little but does not solve my problem. I have tried the "z-index" and nothing.
Heres my css:
ul.menu {
display: inline;
padding: 0px;
margin: 0px;
z-index:999;
}
#black_lay {
display:none;
position: absolute; /* makes the div go into a position that’s absolute to the browser viewing area */
left: 0%; /* makes the div span all the way across the viewing area */
top: 0%; /* makes the div span all the way across the viewing area */
background-color: black;
-moz-opacity: 0.7; /* makes the div transparent, so you have a cool overlay effect */
-webkit-opacity: 0.7;
opacity: .70;
filter: alpha(opacity=70);
width: 100%;
height: 100%;
z-index: 90; /* makes the div the second most top layer, so it’ll lay on top of everything else EXCEPT for divs with a higher z-index (meaning the #overlay ruleset) */
}
#overlay {
display: none; /* ensures it’s invisible until it’s called */
position: absolute; /* makes the div go into a position that’s absolute to the browser viewing area */
left: 25%; /* positions the div half way horizontally */
top: 25%; /* positions the div half way vertically */
padding: 25px;
border: 2px solid black;
background-color: #ffffff;
width: 50%;
height: 50%;
z-index: 100; /* makes the div the top layer, so it’ll lay on top of the other content */
}
ul.menu li {
position:relative;
cursor: pointer;
-webkit-transition: padding .05s linear;
-moz-transition: padding .05s linear;
-ms-transition: padding .05s linear;
-o-transition: padding .05s linear;
transition: padding .05s linear;
}
ul.menu li.drop {
position: relative;
}
ul.menu > li {
display: inline-block;
}
ul.menu li > a {
line-height: 80px;
padding: 0 1px;
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
.dropOut .triangle {
width: 0;
height: 0;
position: absolute;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid white;
top: -8px;
left: 50%;
margin-left: -8px;
}
.dropdownContain {
width: 160px;
position: absolute;
z-index: 9000000;
left: 50%;
margin-left: -80px; /* half of width */
top: -400px;
}
.dropOut {
width: 160px;
background: white;
float: left;
position: relative;
margin-top: 0px;
opacity: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
box-shadow: 0 1px 6px rgba(0,0,0,.15);
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
.dropOut ul > li {
list-style: none;
}
.dropOut ul {
float: left;
padding: 10px 0;
}
.dropOut ul li {
text-align: left;
float: left;
width: 125px;
padding: 12px 0 10px 15px;
margin: 0px 10px;
color: #777;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background .1s ease-out;
-moz-transition: background .1s ease-out;
-ms-transition: background .1s ease-out;
-o-transition: background .1s ease-out;
transition: background .1s ease-out;
}
.dropOut ul li:hover {
background: #f6f6f6;
}
ul.menu li:hover a { color: white; }
ul.menu li:hover .dropdownContain { top: 45px; z-index: 500;}
ul.menu li:hover .underline { border-bottom-color: #777; }
ul.menu li:hover .dropOut { opacity: 1; margin-top: 15px; }
Here's my HTML:
<nav style="display:inline">
<ul class="menu">
<li class="drop">
<a>Username</a>
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li>Account</li>
<li>Logout</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
This should be your problem:
ul.menu li:hover a { color: white; }
It changes the tab's text color to white, as if it's not there.
I changed it to a different color in fiddle and it's working just fine.