I hava made two buttons by CSS imitating the work from https://codepen.io/xflotus/pen/deXBzR. But they will move together when clicking one of them. I have checked the code carefully, but can not find the clue. The pen of the code is at: https://codepen.io/xflotus/pen/gzWyrg. I think the :active is not the problem:
.button:active {
margin: 2px 0px 20px 10px;
}
But, I have no idea how to find the bug. Thanks!
Changing margins is not the best way to make a movement of a button in active state because the entire container moves down. For the movement of a single button try this code instead and remove the old code with margins:
.button:active{transform:translateY(10px)}
Now only one button will move instead of both. You can also aply -webkit-transform property if you need support in older browsers, but it's not required for new ones.
More about this topic: LINK
EDIT:
FULL CODE SNIPPET:
.button {
display: inline-block;
padding-left: 68px;
padding-right: 20px;
height: 40px;
line-height: 40px;
font: 'Arial', Helvetica, sans-serif;
font-weight: 700;
font-size: 15px;
color: black;
text-decoration: none;
margin: 0px 0px 20px 10px;
position: relative;
}
.button .bar {
width: 1px;
height: 30px;
background: black;
position: absolute;
top: 5px;
left: 50px;
}
.button .arrow {
position: absolute;
left: 20px;
top: 11px;
}
.button .arrow .top {
position: absolute;
top: 0;
left: 3px;
width: 6px;
height: 9px;
background: #000;
}
.button .arrow .bottom {
position: absolute;
top: 9px;
left: -2px;
width: 0px;
height: 0px;
border-width: 8px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.button:active{transform:translateY(10px)}
/* ---------- CSS3 ------------*/
.button {
border-radius: 3px;
box-shadow: 2px 2px 2px 0 rgba(0,0,0,.3);
transition: background-position .2s ease, margin .1s ease;
-webkit-transition: background-position .2s ease, margin .1s ease;
-moz-transition: background-position .2s ease, margin .1s ease;
background-repeat: repeat-x;
}
.button:hover {
background-position: 0 10px;
}
.blue {
background-color: #00aeef;
background-image: -webkit-linear-gradient(top, #00aeef, #00587a);
background-image: linear-gradient(top, #00aeef, #00587a);
text-shadow: 1px 1px 1px #23aaff;
border-top: 1px solid #23ccff;
}
.blue .bar {
box-shadow: 1px 1px 1px #23ccff;
}
.green {
background-color: #0f9;
background-image: -webkit-linear-gradient(top, #0f9, #060);
background-image: linear-gradient(top, #0f9, #060);
text-shadow: 1px 1px 1px #9f0;
border-top: 1px solid #23ccff;
}
.green .bar {
box-shadow: 1px 1px 1px #9f0;
}
<div id="container">
<a href="#" class="button blue">
<div class="arrow">
<div class="top"></div>
<div class="bottom"></div>
</div>
<div class="bar"></div>
Download
</a>
<a href="#" class="button green">
<div class="arrow">
<div class="top"></div>
<div class="bottom"></div>
</div>
<div class="bar"></div>
Download
</a>
</div>
Jakub Muda answer is better than mine in term of code, but to answer your exact question, that's because you add a margin to the clicked button, it pushes the container down, so both button move.
I modified your source https://codepen.io/anon/pen/RyVOyV and now they don't move together. The problem is that to get it, I had to make them position absolute.
.blue {
position:absolute;
top:15px;
}
.green {
position:absolute;
top:15px;
left:180px;
}
You can manipulate them more to get them positioned relative and independent, but that out of the scope of this question.
Hope it helps ;)
I'm trying to replicate the navigation buttons here, that's a wix website so it's so hard to inspect elements.
What I have tried is here
https://jsfiddle.net/1vngy4uo/1/
I'm trying many variations, never getting the css 100% correct.
.navButton {
width:15%;
display:inline-block;
position:relative;
background-color:#03314b;
border-radius: 30%;
box-shadow: 2px 2px 2px #888888;
}
.navButton:hover {
background-color:#98b7c8;
}
.navButton span {
width:100%;
display:inline-block;
position:absolute;
border-radius: 30%;
box-shadow: 2px 2px 2px #888888;
}
.navButton .bg {
height:50%;
top:0;
background-color:#3a6076 ;
border-radius: 30%;
box-shadow: 2px 2px 2px #888888;
}
.navButton:hover .bg{
background-color:#afcad9;
}
.navButton .text {
position:relative;
text-align:center;
color:#fff;
vertical-align: middle;
align-items: center;
}
.navButton .text:hover {
color:#000000;
}
and html
<a href="contact.html" class="navButton">
<span class="bg"></span>
<span class="text">Contact</span>
A very similar one, using linear-gradient and less HTML markup
jsFiddle
.navButton {
color: white;
text-decoration: none;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
text-align: center;
padding: 0 30px;
line-height: 30px;
display: inline-block;
position: relative;
border-radius: 20px;
background-image: linear-gradient(#335b71 45%, #03324c 55%);
box-shadow: 0 2px 2px #888888;
transition: color 0.3s, background-image 0.5s, ease-in-out;
}
.navButton:hover {
background-image: linear-gradient(#b1ccda 49%, #96b4c5 51%);
color: #03324c;
}
Contact
I just used a div element to implement the same button that you referred. Is this what you want?
https://jsfiddle.net/9L60y8c6/
<div class="test">
</div>
.test {
cursor: pointer;
background: rgba(4, 53, 81, 1) url(//static.parastorage.com/services/skins/2.1212.0/images/wysiwyg/core/themes/base/shiny1button_bg.png) center center repeat-x;
border-radius: 10px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
transition: background-color 0.4s ease 0s;
position: absolute;
top: 0;
bottom: 0;
left: 5px;
right: 5px;
height: 30px;
width: 115px;
}
Would this be a start? You might want to adjust the colors a little.
Note: One can use linear-gradient, though it won't work on IE9, so I use a pseudo instead
.navButton {
width: 15%;
display: inline-block;
position: relative;
background-color: #03314b;
border-radius: 8px;
box-shadow: 2px 2px 2px #888888;
text-align: center;
text-decoration: none;
color: #fff;
padding: 5px;
transition: all 0.3s;
overflow: hidden;
}
.navButton:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 50%;
width: 100%;
background-color: #335b71;
transition: all 0.3s;
}
.navButton span {
position: relative;
}
.navButton:hover {
transition: all 0.3s;
background-color: #96b4c5;
color: black;
}
.navButton:hover:before {
transition: all 0.3s;
background-color: #b1ccda;
}
<a href="contact.html" class="navButton">
<span>Contact</span>
</a>
I'm trying to create an CSS button hover effect. But I didn't manage to fill the element with a slanted shape.
How the hover effect was planned:
Screenshot 1: How it looks actually.
Screenshot 2: How I want the hover effect to look like with slanted side.
.button_sliding_bg {
color: #31302B;
background: #FFF;
padding: 12px 17px;
margin: 25px;
font-family: 'OpenSansBold', sans-serif;
border: 3px solid #31302B;
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
border-radius: 2px;
display: inline-block;
text-align: center;
cursor: pointer;
box-shadow: inset 0 0 0 0 #31302B;
-webkit-transition: all ease 0.8s;
-moz-transition: all ease 0.8s;
transition: all ease 0.8s;
}
.button_sliding_bg:hover {
box-shadow: inset 200px 0 0 0 #31302B;
color: #FFF;
}
<button class="button_sliding_bg">Buttontext</button>
You can use the technique described in this answer : Fill element from center on hover and skew the pseudo element so it fills the button with a slant :
div {
position: relative;
display: inline-block;
padding: 15px 70px;
border: 5px solid #B17461;
color: #B17461;
font-size: 30px;
font-family: arial;
transition: color .5s;
overflow:hidden;
}
div:before {
content: '';
position: absolute;
top: 0; left: 0;
width: 130%; height: 100%;
background: #B17461;
z-index: -1;
transform-origin:0 0 ;
transform:translateX(-100%) skewX(-45deg);
transition: transform .5s;
}
div:hover {
color: #fff;
}
div:hover:before {
transform: translateX(0) skewX(-45deg);
}
<div>BUTTON</div>
Don't forget to add vendor prefixes for browser support (see canIuse for more info).
I believe that you are actually looking for the end state to fill the entire element with background color and not leave the gap. You could also do it with linear-gradient background images and transition their background-size and background-position like in the below snippet.
One disadvantage of using linear-gradient over pseudo-elements or transforms is that the browser support is lower but it doesn't need extra pseudo-elements and so can leave them spare for other use.
.button_sliding_bg {
color: #31302B;
background: #FFF;
padding: 12px 17px;
margin: 25px;
font-family: 'OpenSansBold', sans-serif;
border: 3px solid #31302B;
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
border-radius: 2px;
display: inline-block;
text-align: center;
cursor: pointer;
background-image: linear-gradient(135deg, #31302B 50%, transparent 51%);
background-size: 100px 100px; /* some initial size to get the slanted appearance */
background-position: -50px -50px; /* negative positioning to hide it initially */
background-repeat: no-repeat;
transition: all ease 0.8s;
}
.button_sliding_bg:hover {
background-size: 200% 200%; /* 200% because gradient is colored only for 50% */
background-position: 0px 0px; /* bring it fully into view */
color: #FFF;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<button class="button_sliding_bg">Buttontext</button>
<button class="button_sliding_bg">Button text lengthy</button>
<button class="button_sliding_bg">Button text <br> with line break</button>
<button class="button_sliding_bg">Button text <br> with <br> multiple <br> line <br>breaks</button>
You can use css :after.
Jsfiddle
.button_sliding_bg {
color: #31302B;
background: #FFF;
padding: 12px 17px;
margin: 25px;
font-family:'OpenSansBold', sans-serif;
border: 3px solid #31302B;
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
border-radius: 2px;
display: inline-block;
text-align: center;
cursor: pointer;
box-shadow: inset 0 0 0 0 #31302B;
-webkit-transition: all ease 0.8s;
-moz-transition: all ease 0.8s;
transition: all ease 0.8s;
position: relative;
}
.button_sliding_bg:hover {
box-shadow: inset 200px 0 0 0 #31302B;
color: #FFF;
}
.button_sliding_bg:after {
content:'';
display: block;
position: absolute;
right: 0;
bottom: 0;
width: 0;
height: 0;
border-width: 0 0 0 0;
border-color: transparent transparent #fff transparent;
border-style: solid;
border-width: 0 0 32px 30px;
-webkit-transition: all ease 0.8s;
-moz-transition: all ease 0.8s;
transition: all ease 0.8s;
}
<button class="button_sliding_bg">Buttontext</button>
I am creating a one-pager website. I am facing problem in the positioning of divs in the body tag. In the code, the search button is suppose to take me where the div containing the id "search" is , but this is somehow overlapping with the previous div with the id of "home". I checked all the previous tags as to make sure they are closed but I am unable to figure out where the problem lies. Also my background images wont show up for these div tags.Any help would be highly appreciated...Below is the index.html
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>eVolunteers</title>
<!--links-->
<link rel="icon" href="http://static.tmimgcdn.com/img/favicon.ico"><!--the title image-->
<link href="css/indexcss.css" rel="stylesheet" type="text/css" media="all" />
<link rel="shortcut icon" href="http://static.tmimgcdn.com/img/favicon.ico">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800" rel="stylesheet" />
<link rel="stylesheet" media="screen" href="http://openfontlibrary.org/face/dancing" rel="stylesheet" type="text/css"/>
<!--scripts-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="home">
<div style=" width:460px;height:180px; display: inline-block; float:left ;"><p class="heading" style="padding-top:50px; ">eVolunteers</p>
</div>
<div style= " width: 800px; height:180px; display: inline-block; float:right; " >
<ul class="ls" >
<li>Home<span class="round">That is, if you already have an account.</span></li>
<li>Search<span class="round">That is, if you already have an account.</span></li>
<li>Contact<span class="round">That is, if you already have an account.</span></li>
<li>About Us<span class="round">About the developers.</span></li>
<li>Login<span class="round">That is, if you already have an account.</span></li>
<li>Sign Up<span class="round">But only if you really, really want to. </span></li>
</ul>
</div>
</div>
</div>
<!--slider-->
<div id="search" class="sb">
<p>Hello</p>
</div>
<div id="contact" class="cb">
<p>Hello</p>
</div>
<div id="about" class="ab">
<p>Hello</p>
</div>
</body>
</html>
and this is the css
.sb{
border: 5px solid red;
padding-top: 800px;
}
.cb{
border: 5px solid green;
background: url('homepage.jpg');
}
.ab{
border: 5px solid black;
}
.heading {
font-family: 'DancingScriptOTRegular';
font-weight: bold;
font-style: normal;
font-size: 60px;
text-align:right;
}
.ls{
padding-left: 60px;
}
/* login and sign up css*/
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
ul {
margin: 30px auto;
text-align: center;
}
li {
list-style: none;
position: relative;
display: inline-block;
width: 100px;
height: 100px;
}
#-moz-keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}
#-webkit-keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}
#-o-keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}
#keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}
.round {
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding-top: 30px;
text-decoration: none;
text-align: center;
font-size: 25px;
text-shadow: 0 1px 0 rgba(255,255,255,.7);
letter-spacing: -.065em;
font-family: "Hammersmith One", sans-serif;
-webkit-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
box-shadow: 2px 2px 7px rgba(0,0,0,.2);
border-radius: 300px;
z-index: 1;
border-width: 4px;
border-style: solid;
}
.round:hover {
width: 130%;
height: 130%;
left: -15%;
top: -15%;
font-size: 33px;
padding-top: 38px;
-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
-o-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
-moz-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
box-shadow: 5px 5px 10px rgba(0,0,0,.3);
z-index: 2;
border-size: 10px;
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
a.red {
background-color: rgba(239,57,50,1);
color: rgba(133,32,28,1);
border-color: rgba(133,32,28,.2);
}
a.red:hover {
color: rgba(239,57,50,1);
}
a.yellow{
background-color: rgba(255,255,0,1);
color: rgba(255,165,0,1);
border-color: rgba(255,165,0,.2);
}
a.yellow:hower{
color: rgba(255,255,0,1);
}
a.agreen{
background-color: rgba(0,255,0,1);
color: rgba(0,128,0,1);
border-color: rgba(0,128,0,.5);
}
a.yellow:hower{
color: rgba(255,255,0,1);
}
a.green {
background-color: rgba(1,151,171,1);
color: rgba(0,63,71,1);
border-color: rgba(0,63,71,.2);
}
a.green:hover {
color: rgba(1,151,171,1);
}
a.purple{
background-color: rgba(221,160,221,1);
color: rgba(128,0,128,1);
border-color: rgba(128,0,128,.8);
}
a.purple:hover {
color: rgba(221,160,221,1);
}
a.gray{
background-color: rgba(169,169,169,1);
color: rgba(3,3,3,1);
border-color: rgba(3,3,3,.2);
}
a.gray:hover {
color: rgba(3,3,3,1);
}
.round span.round {
display: block;
opacity: 0;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
font-size: 1px;
border: none;
padding: 40% 20% 0 20%;
color: #fff;
}
.round span:hover {
opacity: .85;
font-size: 16px;
-webkit-text-shadow: 0 1px 1px rgba(0,0,0,.5);
-moz-text-shadow: 0 1px 1px rgba(0,0,0,.5);
-o-text-shadow: 0 1px 1px rgba(0,0,0,.5);
text-shadow: 0 1px 1px rgba(0,0,0,.5);
}
.green span {
background: rgba(0,63,71,.7);
}
.red span {
background: rgba(133,32,28,.7);
}
.yellow span{
background: rgba(255,165,0,.7);
}
.agreen span{
background: rgba(0,128,0,.7);
}
.purple span{
background: rgba(128,0,128,.9);
}
.gray span{
background: rgba(3,3,3,.9);
}
/*slider*/
#slides {
display:none;
}
Your issue has to do with your content in #home being floated. When you float something it takes it out of the normal document flow. Since the child elements of #home are floated #home ends up collapsing, that is, having no height.
With the CSS you have provided you can see that your search DIV is already at the top of your page based on the red border you have given it. So there is no reason for it to "jump down" to #search as it's at the top.
I recommend using a the micro clearfix so your #home DIV takes up the space you expect it to. There are other options out there but I'll leave that up to you to discover.
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
In the jsFiddle below I have removed the padding from #search, which is also styled by your .sb class, and added the padding to your #home DIV (for illustrative purposes) as padding-bottom: 800px;. I've added the clearfix to #home to clear the floats contained within it.
#home {
padding-bottom: 800px;
}
.sb {
border: 5px solid red;
/* moved padding to #home as bottom padding for illustrative purposes */
}
<div id="home" class="cf">
jsFiddle: http://jsfiddle.net/mct84jbj/1
I want to do fade in and fade out effects using only CSS. If I move or hover over one div element, I then need to call another DIV to fade in, snd then it should fade out agsin when the mouse leaves. DOM element calling and effect should be in CSS or CSS3. I can't use javascript and Jquery.
<style>
#b
{
width: 200px;
height: 40px;
background: red;
border-radius: 10px;
text-align: center;
margin: 35px;
padding: 30px 0px;
box-shadow: 2px 4px 10px 2px;
opacity:0;
color: white;
font: 20px bold;
}
#a
{
width: 200px;
height: 40px;
background: rgb(156, 155, 155);
border-radius: 10px;
text-align: center;
cursor: pointer;
margin: 35px;
padding: 30px 0px;
box-shadow: 2px 4px 10px 2px;
color: white;
font: 20px bold;
}
#a:hover + #b {
animation:myfirst 1s;
-webkit-animation:first 1s;
opacity:1;
}
#keyframes first
{
from {opacity:0.1;}
to {opacity:1;}
}
#-webkit-keyframes first
{
from {opacity:0.1}
to {opacity:1;}
}
</style>
<div id="a">Hover</div>
<div id="b">show</div>
You can easily achieve that with opacity and the adjacent sibling combinator.
Check out the jsfiddle for a vendor prefixed version.
#container + div {
transition: opacity .25s;
opacity: 0;
}
#container:hover + div {
opacity: 1;
}
Transition browser support
Adjacent sibling combinator (+ selector) documentation