Please see my code below:
HTML =>
<header>
<div class="menuWrap">
Home
About
AM
Work
Contact
</div>
</header>
CSS =>
header {
width: 100%;
height: 80px;
background-color: #F5F5F5;
border-bottom: 1px solid #E6E6E6;
}
.menuWrap {
margin: 0 auto;
width: 80%;
height: 100%;
text-align: center;
}
.menuItem {
line-height: 80px;
display: inline-block;
width: 20%;
color: #1DC0CE;
text-decoration: none;
font-family: 'Lobster', cursive;
font-size: 25px;
-o-transition: .2s;
-ms-transition: .2s;
-moz-transition: .2s;
-webkit-transition: .2s;
transition: .2s;
}
.logoItem {
line-height: 80px;
display: inline-block;
width: 15%;
background-color: #1DC0CE;
color: #FFFFFF;
text-decoration: none;
font-family: 'Lobster', cursive;
font-size: 25px;
border-bottom: 1px solid #1DC0CE;
-o-transition: .2s;
-ms-transition: .2s;
-moz-transition: .2s;
-webkit-transition: .2s;
transition: .2s;
}
When I am increasing the font-size for 'logoItem' the 'menuItem' elements position is moving (the text is moving down the page)
Any tips on how to stop this!?
Give them a uniform height and ensure it's large enough to work for both sizes:
#menuWrap a {
display:inline-block;
height:30px;
}
You should probably get rid of the line-height declaration as well.
Related
I have added a transition effect to a button but it is not working. The background color is white; by adding the transition effect, the color should be moved from bottom to top but it is not effecting. Here is the fiddle link for that. This is the code:
.hourlypricing {
background: #57c1e8;
border: .2rem solid #57c1e8;
min-width: 16.5rem;
display: inline-block;
text-align: center;
height: 6rem;
margin-left: 265px;
line-height: 5.6rem;
text-transform: uppercase;
letter-spacing: .1em;
white-space: nowrap;
font-size: 1.4rem;
padding: 0 2.5rem;
font-weight: 700;
cursor: pointer;
text-decoration: none !important;
-webkit-transition: background-color .1s ease-in-out, color .1s ease-in-out, -webkit-box-shadow .1s ease-in-out;
transition: background-color .1s ease-in-out, color .1s ease-in-out, box-shadow .1s ease-in-out;
}
button.monthlypricing {
margin-left: 50px;
background: #fff;
border: .2rem solid #57c1e8;
min-width: 16.5rem;
display: inline-block;
text-align: center;
height: 6rem;
line-height: 5.6rem;
text-transform: uppercase;
letter-spacing: .1em;
white-space: nowrap;
font-size: 1.4rem;
padding: 0 2.5rem;
font-weight: 700;
cursor: pointer;
color: #000;
text-decoration: none !important;
-webkit-transition: background-color .1s ease-in-out, color .1s ease-in-out, -webkit-box-shadow .1s ease-in-out;
transition: background-color .1s ease-in-out, color .1s ease-in-out, box-shadow .1s ease-in-out;
}
<div class="hourly">
<button class="hourlypricing">Hourly Pricing</button>
<span class="FyfR" data-reactid="5">or</span>
<button class="monthlypricing">Monthly Pricing</button>
</div>
You can achieve it by using transform: scaleY() and transform-origin. Check below snippet for reference.
.hourlypricing {
background: #57c1e8;
border: .2rem solid #57c1e8;
min-width: 16.5rem;
display: inline-block;
text-align: center;
height: 6rem;
margin-left: 265px;
line-height: 5.6rem;
text-transform: uppercase;
letter-spacing: .1em;
white-space: nowrap;
font-size: 1.4rem;
padding: 0 2.5rem;
font-weight: 700;
cursor: pointer;
text-decoration: none !important;
position: relative;
z-index: 1;
}
.hourlypricing:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: red;
transition: transform 1s;
transform-origin: top center;
transform: scaleY(0);
z-index: -1;
}
.hourlypricing:hover:after {
transform: scaleY(1);
}
button.monthlypricing {
margin-left: 50px;
background: #fff;
border: .2rem solid #57c1e8;
min-width: 16.5rem;
display: inline-block;
text-align: center;
height: 6rem;
line-height: 5.6rem;
text-transform: uppercase;
letter-spacing: .1em;
white-space: nowrap;
font-size: 1.4rem;
padding: 0 2.5rem;
font-weight: 700;
cursor: pointer;
color: #000;
text-decoration: none !important;
-webkit-transition: background-color .1s ease-in-out, color .1s ease-in-out, -webkit-box-shadow .1s ease-in-out;
transition: background-color .1s ease-in-out, color .1s ease-in-out, box-shadow .1s ease-in-out;
}
<div class="hourly">
<button class="hourlypricing">Hourly Pricing</button>
<span class="FyfR" data-reactid="5">or</span>
<button class="monthlypricing">Monthly Pricing</button>
</div>
Update: For activate button you need to use scripts. Check below snippet for reference.
$('button').click(function() {
$('button').removeClass('active');
$(this).addClass('active');
});
button.active {
background: #57c1e8 !important;
}
button:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: red;
transition: transform 1s;
transform-origin: top center;
transform: scaleY(0);
z-index: -1;
}
button:hover:after {
transform: scaleY(1);
}
button.active:hover:after {
transform: scaleY(0);
}
button {
background: #fff;
border: .2rem solid #57c1e8;
min-width: 16.5rem;
display: inline-block;
text-align: center;
height: 6rem;
line-height: 5.6rem;
text-transform: uppercase;
letter-spacing: .1em;
white-space: nowrap;
font-size: 1.4rem;
padding: 0 2.5rem;
font-weight: 700;
cursor: pointer;
color: #000;
text-decoration: none !important;
-webkit-transition: background-color .1s ease-in-out, color .1s ease-in-out, -webkit-box-shadow .1s ease-in-out;
transition: background-color .1s ease-in-out, color .1s ease-in-out, box-shadow .1s ease-in-out;
position: relative;
z-index: 1;
}
button.monthlypricing {
margin-left: 50px;
}
button.hourlypricing {
margin-left: 265px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hourly">
<button class="hourlypricing active">Hourly Pricing</button>
<span class="FyfR" data-reactid="5">or</span>
<button class="monthlypricing">Monthly Pricing</button>
</div>
Move transition definition to a separate section .hourlypricing:hover like this (Also I've set a transtion time to 1s for better visibility):
.hourlypricing
{
background: #57c1e8;
border: .2rem solid #57c1e8;
min-width: 16.5rem;
display: inline-block;
text-align: center;
height: 6rem;
margin-left:265px;
line-height: 5.6rem;
text-transform: uppercase;
letter-spacing: .1em;
white-space: nowrap;
font-size: 1.4rem;
padding: 0 2.5rem;
font-weight: 700;
cursor: pointer;
text-decoration: none !important;}
.hourlypricing:hover {
-webkit-transition: background-color .1s ease-in-out,color .1s ease-in-out,-webkit-box-shadow .1s ease-in-out;
transition: background-color 1s ease-in-out,color 1s ease-in-out,box-shadow 1s ease-in-out;
background-color: red;
}
button.monthlypricing
{
margin-left: 50px;
background:#fff;
border: .2rem solid #57c1e8;
min-width: 16.5rem;
display: inline-block;
text-align: center;
height: 6rem;
line-height: 5.6rem;
text-transform: uppercase;
letter-spacing: .1em;
white-space: nowrap;
font-size: 1.4rem;
padding: 0 2.5rem;
font-weight: 700;
cursor: pointer;
color:#000;
text-decoration: none !important;
-webkit-transition: background-color .1s ease-in-out,color .1s ease-in-out,-webkit-box-shadow .1s ease-in-out;
transition: background-color .1s ease-in-out,color .1s ease-in-out,box-shadow .1s ease-in-out;
}
<div class="hourly">
<button class="hourlypricing">Hourly Pricing</button>
<span class="FyfR" data-reactid="5">or</span>
<button class="monthlypricing">Monthly Pricing</button>
</div>
You not change any value
https://www.w3schools.com/css/css3_transitions.asp
CSS transitions allows you to change property values smoothly from one value to another.
.hourlypricing {
background: #57c1e8;
transition: background-color .1s ease-in-out;
}
.hourlypricing:hover {
background: red;
}
I have a css price box with shows two buttons on the bottom of the box.
But those buttons looks like they are one.
<div class="pricefooter">
<div class="button">
Boek nu
Info
</div>
</div>
for the style I have this
.button{
width:50%;
height:50px;
margin:30px 10px;
padding-left: 30 px;
padding-right: 30 px;
background:#ff9547;
text-align:center;
cursor:pointer;
-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;
}
.button:hover{
width:60%;
}
.button a{
color:#fff;
font-size:14px;
font-weight:bold;
text-decoration:none;
margin:10px 10px;
padding-left: 30 px;
padding-right: 30 px;
line-height:3;
}
I'm kind of stuck here. I want two separate buttons on bottom of the table. Here is the full example example price table wellness
Do you want the button to be totally separate, with their own animation too?
If so you probably want to do something like this:
.button a {
background: #ff9547;
color: #fff;
font-size: 14px;
font-weight: bold;
text-decoration: none;
margin: 2px;
border: 1px solid #dd7325;
padding: 15px 30px 15px 30px;
line-height: 3;
-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;
}
.button a:hover {
padding: 15px 50px 15px 50px;
}
<div class="pricefooter">
<div class="button">
Really long text example
Book now!
Info
</div>
</div>
Remove the background-color from div and add it to the anchor .button a.
Also add display: inline-block; to the .button a.
.button {
width: 50%;
height: 50px;
margin: 30px 10px;
padding-left: 30 px;
padding-right: 30 px;
text-align: center;
cursor: pointer;
-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;
}
.button:hover {
width: 60%;
}
.button a {
color: #fff;
font-size: 14px;
font-weight: bold;
text-decoration: none;
margin: 10px 10px;
padding-left: 30px;
padding-right: 30px;
line-height: 3;
background: #ff9547;
display: inline-block;
}
<div class="pricefooter">
<div class="button">
Boek nu
Info
</div>
</div>
simplify and clean your code:
you have 2 buttons right? why put 2 links in the same button?, I think it's not a best practice.
button is a html tag so style it instead crate other class:
http://www.w3schools.com/tags/tag_button.asp
all above looks right but I think this one looks more clean and organized
html:
<div class="pricefooter">
<button type="button" class='btn'>Click Me! </button>
<button type="button" class='btn'>Click Me! </button>
</div>
css:
button{
height:50px;
padding: 0 30px 0 30px;
background:#ff9547;
text-align:center;
cursor:pointer;
border: 0;
}
.btn a:hover{
padding: 15px 50px 15px 50px;
}
.btn a{
color:#fff;
font-size:14px;
font-weight:bold;
text-decoration:none;
-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;
}
jsfiddle: https://jsfiddle.net/9e4j8xrn/2/
Hello As I can see you apply background and width css on button class you should be change it into the .button a
updating css:
.button {
cursor: pointer;
height: 50px;
margin: 30px 10px;
text-align: center;
}
.button a:hover {
padding: 10px 25px;
}
.button a {
background: #ff9547 none repeat scroll 0 0;
color: #fff;
font-size: 14px;
font-weight: bold;
line-height: 3;
margin: 10px;
padding: 8px 20px;
text-decoration: none;
transition: all 0.4s ease-in-out 0s;
}
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/
Trying to create something like this.
I can't use letter-spacing. I created this code, but it doesn't work well.
http://jsfiddle.net/pyqq8wfe/
.refreshed_logo {
font-family: ProximaNovaBold;
font-size: 50px;
text-decoration: none;
color: #000000;
}
.logo_wrapper {
color: inherit;
text-decoration: none;
width: 250px;
position: absolute;
}
.refreshed_logo:after {
content: 'digital';
width: 20px;
height: 20px;
text-align: center;
position: absolute;
font-size: 20px;
background-color: red;
border-radius: 18px;
color: white;
margin-left: 4px;
margin-top: 3px;
text-indent: 8px;
font-weight: normal;
line-height: 1;
transition-property: width, height;
transition-duration: 0.2s, 0.2s;
transition-delay: 0s, 0.2s;
-o-transition-property: width, height;
-o-transition-duration: 0.2s, 0.2s;
-o-transition-delay: 0s, 0.2s;
-moz-transition-property: width, height;
-moz-transition-duration: 0.2s, 0.2s;
-moz-transition-delay: 0s, 0.2s;
-webkit-transition-property: width, height;
-webkit-transition-duration: 0.2s, 0.2s;
-webkit-transition-delay: 0s, 0.2s;
}
.refreshed_logo:hover:after {
width: 71px;
-webkit-transition: width 0.5s;
transition: width 0.5s;
text-indent: 2px;
}
.logo_wrapper:hover {
text-decoration: none;
}
<a href="/" class="logo_wrapper">
<span class="refreshed_logo">
Granat
</span>
</a>
Any thoughts?
Since you cannot use letter-spacing or split the words, below is an approach using border-right which along with overflow: hidden setting hides all characters after 'd'. On hover they are revealed and thus produce the effect.
.refreshed_logo {
font-family: ProximaNovaBold;
font-size: 50px;
text-decoration: none;
color: #000000;
}
.logo_wrapper {
color: inherit;
text-decoration: none;
width: 250px;
position: absolute;
}
.refreshed_logo:after {
content: 'digital';
width: 20px;
height: 20px;
/*text-align: center; not required */
position: absolute;
font-size: 20px;
background-color: red;
border-radius: 18px;
color: white;
/* following properties were added */
padding-left: 5px;
box-sizing: border-box;
border-right: 5px solid red;
overflow: hidden;
/* end of addition */
font-weight: normal;
line-height: 1;
transition-property: width, height;
transition-duration: 0.2s, 0.2s;
transition-delay: 0s, 0.2s;
}
.refreshed_logo:hover:after {
width: 65px;
transition: width 0.5s;
}
.logo_wrapper:hover {
text-decoration: none;
}
<a href="/" class="logo_wrapper">
<span class="refreshed_logo">
Granat
</span>
</a>
I've try to have the same result there's maybe better :
Last edit : for hide the others letter i've use the same color of the background, and only change the first letter color.
CSS :
.titre{
font-size:20pt;
}
.sstitre{
font-size:10pt;
font-weight:bold;
color:red;
background-color:red;
border-radius:10px;
padding-left:4px;
padding-right:2px;
width:10px;
position: absolute;
overflow:hidden;
transition:width 0.5s;
}
.sstitre::first-letter{
color:white;
}
.titre:hover .sstitre{
width:40px;
color:white;
}
HTML
<span class="titre">Granat<span class="sstitre">digital</span></span>
JSFidle
This question already has an answer here:
inline nav example doesn't work [duplicate]
(1 answer)
Closed 7 years ago.
ive searched around for about a week, but i havent found an answer that really helps me.
im fairly basic at html and the most experience i really have is neopets lol
im making a page for my class at school, and i have three div ids currently active in my page. the header div works fine, but my mainContent and navigation ids seem to ignore the fact that i want the bg colour to be orange. any help would be appreciated!
HTML:
<html><head><title>GUMI MEGPOID | Home</title></head>
<body>
<div id="header"><h1>GUMI MEGPOID</h1></div>
<div id="navigation">
<p>Home
Albums
Lyrics
Tours
</p></div>
<div id=”mainContent”><p>blah blah blah.<p></div>
</body></html>
CSS:
h1 {color: #eeee99; font-size: 3 em; text-align: center; }
h2 {color: #eeee99; line-height: 130%; font-size: 1.75 em; font-family: 宋体; }
h3 {color: #eeee99; line-height: 130%; font-size: 1.625 em; }
p {color: #eeee99; line-height: 130%; font-size: .9em; margin-left: 10%; margin-right: 10%; }
p1 {color: #eeee99; line-height: 130%; font-size: .75em; }
body { background-color: #eeee99; }
#header { width: 650px; height: 100px; line-height: 100px; background: rgb(238, 119, 34); margin-bottom: 10%; text-align: center; align: right; }
#mainContent { width: 780px; height: 500px; background: rgb(238, 119, 34); /* Fallback */ background: rgba(238, 119, 34, .6); text-align: center; }
#navigation { width: 200px; height: 100px; top: auto; margin-left: 160px; position: fixed; margin-top: 10px; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; }
#navigation a { font-size: 11px; line-height: 20px; display: inline-block; margin-top: 5px; width: 100px; text-align: center; color: #eeee99; background-color: {color: #ee7722}; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }
#navigation a:hover { color: #eeee99; background-color: {color: #ee7722}; opacity: 0.5; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }</style>
The double quotes in this line
<div id=”mainContent”><p>blah blah blah.<p></div>
should be straight (") instead of curly (”) quotes.
You have the background-color tag wrong on #navigation a. Try the same as you have in body:
background-color: #ee7722;