On this picture you see a label beside a a-link.
CSS for both:
.btn {
zoom: 1;
vertical-align: baseline;
cursor: pointer;
text-align: center;
text-decoration: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #666;
color: #fff;
display: inline-block;
padding: 10px 15px;
text-align: left;
font-size: 1em;
border: 0;
margin: 0;
-webkit-transition: background 0.2s ease-in-out;
-moz-transition: background 0.2s ease-in-out;
-ms-transition: background 0.2s ease-in-out;
-o-transition: background 0.2s ease-in-out;
transition: background 0.2s ease-in-out;
}
How to remove the space beneath the label?
The problem was the line-height.
.btn {
line-height: 1.4em;
}
Related
I want to animate gradient buttons on hover Using HTML & CSS. but nothing is happening.
Please. anyone help this situation
.btn {
padding: 20px 40px;
background-image: var(--gradient-button);
color: var(--secondary-color);
border: none;
border-radius: 30px;
font-size: 1rem;
font-weight: 700;
text-decoration: none;
transition: 0.6s;
cursor: pointer;
}
.btn:hover {
background-position: right;
}
You can try this :
More buttons : https://codepen.io/JavaScriptJunkie/pen/pPRooV
.buttons {
margin: 10%;
text-align: center;
}
.btn-hover {
width: 200px;
font-size: 16px;
font-weight: 600;
color: #fff;
cursor: pointer;
margin: 20px;
height: 55px;
text-align:center;
border: none;
background-size: 300% 100%;
border-radius: 50px;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.btn-hover:hover {
background-position: 100% 0;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.btn-hover.color {
background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
box-shadow: 0 4px 15px 0 rgba(49, 180, 180, 0.75);
}
<button class="btn-hover color">BUTTON</button>
Maybe with some changes you can have it. This is just an example.
For right to left use to left in "background-image: linear-gradient(" and assign colors in it.
And maybe a white text color fit on this well.
.btn{
border: none;
margin: 20px;
padding: 24px;
width: 220px;
font-family: "montserrat",sans-serif;
text-transform: uppercase;
border-radius: 6px;
cursor: pointer;
color: #fff;
background-size: 200%;
transition: 0.6s;
}
.btn1{
background-image: linear-gradient(to left,#FFC312,#EE5A24,#FFC312);
}
.btn:hover{
background-position: right;
}
<button class="btn btn1">BUTTON</button>
you were already on the right track. I have made some small modifications in a few places.
:root {
--gradient-button: red;
--text-color: white;
}
.btn {
padding: 20px 40px;
background: var(--gradient-button);
color: var(--text-color);
border: none;
border-radius: 30px;
font-size: 1rem;
font-weight: 700;
text-decoration: none;
background-size: 300% 100%;
cursor: pointer;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
background-image: linear-gradient(to right, red, orange, yellow, green);
box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}
.btn:hover {
background-position: 100% 0;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
<button class="btn">btn</button>
I have this simple hide/show toggle which fades in/out text when hovering. The only problem is, I don't want it to be invisble (because it takes up unnecessary space). But when I add display element the fade function doesn't work anymore.
#stuff {
opacity: 0.0;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
color: black;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #e0e0e0;
border-radius: 25px;
width: 200px;
}
#hover {
width: 150px;
height: 10px;
margin-bottom: 15px;
cursor: pointer;
float: center;
font-family: 'Open Sans', FontAwesome;
font-weight: 600;
}
#hover:hover+#stuff {
opacity: 1.0;
display: inline-block;
}
`
<div id="hover">HOVER HERE</div>
<div id="stuff">Revealed text</div>
WITH FADE ANIMATION, but just hidden: jsfiddle
WITHOUT FADE ANIMATION, but appears when hovering and doesn't take up space jsfiddle
Is it possible to maintain the fade animation without the text just being invisible?
You can use max-height to remove the unwanted space
See code snippet bellow:
#stuff {
opacity: 0.0;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
color: black;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #e0e0e0;
border-radius: 25px;
width: 200px;
max-height:0;
}
#hover {
width: 150px;
height: 10px;
margin-bottom: 15px;
cursor: pointer;
float: center;
font-family: 'Open Sans', FontAwesome;
font-weight: 600;
}
#hover:hover+#stuff {
opacity: 1.0;
max-height:100%;
}
<div id="hover">HOVER HERE</div>
<div id="stuff">Revealed text</div>
And if you want it to always take no space, you can use absolute position to make go out of the flow of the document
See code snippet:
#stuff {
opacity: 0.0;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
color: black;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #e0e0e0;
border-radius: 25px;
width: 200px;
position:absolute;
}
#hover {
width: 150px;
height: 10px;
margin-bottom: 15px;
cursor: pointer;
float: center;
font-family: 'Open Sans', FontAwesome;
font-weight: 600;
}
.wrapper{
position:relative;
}
#hover:hover + #stuff {
opacity: 1.0;
}
<div class="wrapper">
<div id="hover">HOVER HERE</div>
<div id="stuff">Revealed text</div>
<div>
I would wrap your divs in another box and then absolutely position your hidden text so it doesn't take up any space - comments in code to explain what is happening
/* add a container */
.container {
position: relative;
}
#stuff {
opacity: 0;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
color: black;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #e0e0e0;
border-radius: 25px;
width: 200px;
display: inline-block;
/* position stuff underneath the container */
position: absolute;
top: 100%;
/* give the background a colour so you can't see anything below */
background: #ffffff;
}
#hover {
width: 150px;
cursor: pointer;
float: center;
font-family: 'Open Sans', FontAwesome;
font-weight: 600;
}
/* show stuff on hover of the container - so you can hover the stuff without it dissappearing */
.container:hover #stuff {
opacity: 1;
}
`
<div class="container">
<div id="hover">HOVER HERE</div>
<div id="stuff">Revealed text</div>
</div>
Some content below
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/
I built my website mostly checking Google chrome to make sure everything was correct. With my nav bar in Google chrome it is perfect, however, when in IE or Fire Fox the dimensions are changed and they do not fit together correctly.
My website is noahtarr.com
CSS:
nav {
margin-top: -1px;
position: relative;
top: 0;
left: 0;
}
nav a {
margin-left: -3px;
margin-right: -1px;
padding: 10px 20px;
outline: none;
border-right: none;
border-bottom: none;
font-family: arial;
font-weight: bolder;
vertical-align: top;
text-decoration: none;
font-size: 13px;
line-height: 21px;
cursor: pointer;
background-color: #D1DBBD;
color: #3E606F;
-webkit-transition: all .9s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-transition: background-color .3s ease;
-moz-transition: background-color .3s ease;
-ms-transition: background-color .3s ease;
-o-transition: background-color .3s ease;
transition: background-color .3s ease;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
nav a:hover {
background-color: #91AA9D;
color:#193441;
-webkit-transition: background-color .3s ease;
-moz-transition: background-color .3s ease;
-ms-transition: background-color .3s ease;
-o-transition: background-color .3s ease;
transition: background-color .3s ease;
}
nav a:first-child {
border-radius: 6px 0 0 0px;
}
nav a:last-child {
border-radius: 0 6px 0px 0;
}
nav a.active {
color: #193441;
border-radius: 8px 8px 0px 0px;
padding-top: 5px;
}
nav a.adjacent-active-left {
border-radius: 0px 8px 0px 0px;
}
nav a.adjacent-active-right {
border-radius: 8px 0px 0px 0px;
}
HTML:
<nav>
<a class="active" href="home.htm">Home</a>
<a class="adjacent-active-right" href="about.htm">About</a>
Services
Portfolio
Contact
</nav>