CSS3 Toggle not working in Android and Iphone Browser - html

I need some help to make working this html script on mobile, android and iphone, this is working very well on Opera, Safari, Mozilla and Chrome.
Below i present the content to show a box on check-box toggle based
Thanks
HTML Content:
<input type="checkbox" id="popup_s" class="popUpControl_s">
<label for="popup_s" style="display:block">
<div id="selector_s">Click Me</div>
<span class="boxtoggle_s">
<div id="content">Lorem ipsum content</div>
<div id="close_s"><img src="/media/close.png" alt="Close"></div>
</span>
</label>​
CSS3 Content
.boxtoggle_s {
position: absolute;
left: 350px;
top: 33%;
background-color: #eeeeee;
background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#999999));
background-image: -webkit-linear-gradient(top, #eeeeee, #999999);
background-image: -moz-linear-gradient(top, #eeeeee, #999999);
background-image: -ms-linear-gradient(top, #eeeeee, #999999);
background-image: -o-linear-gradient(top, #eeeeee, #999999);
/* Prevent some white flashing in Safari 5.1 */
-webkit-backface-visibility: hidden;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
width: 230px;
padding: 20px;
opacity: 0;
-webkit-transform: scale(0) skew(50deg);
-moz-transform: scale(0) skew(50deg);
-ms-transform: scale(0) skew(50deg);
-o-transform: scale(0) skew(50deg);
-webkit-transform-origin: 0px -30px;
-moz-transform-origin: 0px -30px;
-ms-transform-origin: 0px -30px;
-o-transform-origin: 0px -30px;
-webkit-transition: -webkit-transform ease-out .35s, opacity ease-out .4s;
-moz-transition: -moz-transform ease-out .35s, opacity ease-out .4s;
-ms-transition: -ms-transform ease-out .35s, opacity ease-out .4s;
-o-transition: -o-transform ease-out .35s, opacity ease-out .4s;
}
.boxtoggle_s:after {
content: "";
position: absolute;
bottom: 100%;
left: 25px;
border-bottom: 20px solid #eee;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
width: 0;
height: 0;
}
.popUpControl_s {
display: none;
}
.popUpControl_s:checked ~ label > .boxtoggle_s {
opacity: 1;
-webkit-transform: scale(1) skew(0deg);
-moz-transform: scale(1) skew(0deg);
-ms-transform: scale(1) skew(0deg);
-o-transform: scale(1) skew(0deg);
}
#selector_s {
position:absolute;
top:212px;
right:250px;
margin:5px 0 0 10px;
padding: 8px 5px 5px 10px;
width: 140px;
height:22px;
background:#ddd;
cursor:pointer;
}
#content {
color:#000;
font-weight:bold;
font-size:12px;
}
#close_s {position:absolute;left:242px; top:35px;}​

Related

Button hover animation background color not filled fully

When you hover over the button on left & right side same space is visible. How can we fix that?
Here is image when you hover on button this is how it looks.
Here is jsfiddle link
https://jsfiddle.net/vct5acc0/1/
Css code is here :-
body {
background-color: #4F4BFA;
}
.btn1 {
border: 2px solid #fff;
}
.btn-cmn {
width: 175px;
height: 52px;
background-color: transparent;
border-radius: 26px;
font-size: 18px;
font-weight: 700;
line-height: 28px;
cursor: pointer;
}
Here is my solution, inspired by Kuba's first proposition:
(the one which added an inset shadow on the hover, not the updated one!)
See my comments in the CSS code, only 2 modifications.
body {
background-color: #4F4BFA;
}
.btn1 {
border: none; /* Modified */
box-shadow: inset 0px 0px 0px 2px #fff; /* Added */
}
.btn-cmn {
width: 175px;
height: 52px;
background-color: transparent;
border-radius: 26px;
font-size: 18px;
font-weight: 700;
line-height: 28px;
cursor: pointer;
}
.button-hover-effect {
position: relative;
overflow: hidden;
border-color: #000;
color: #000;
transition: color .4s cubic-bezier(.4, 0, .2, 1);
-webkit-transition: color .4s cubic-bezier(.4, 0, .2, 1);
-moz-transition: color .4s cubic-bezier(.4, 0, .2, 1);
-o-transition: color .4s cubic-bezier(.4, 0, .2, 1);
-ms-transition: color .4s cubic-bezier(.4, 0, .2, 1);
}
.btn-hfix1 {
height: 53px;
}
.button-hover-effect.white {
border-color: #fff;
color: #fff;
}
.button-hover-effect.white:hover {
color: #000;
}
.button-hover-effect::before {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
content: "";
background-color: #000;
z-index: 1;
border-radius: 26px;
transition: transform .4s cubic-bezier(.4, 0, .2, 1);
-webkit-transition: -webkit-transform .4s cubic-bezier(.4, 0, .2, 1);
-moz-transition: -moz-transform .4s cubic-bezier(.4, 0, .2, 1);
-o-transition: -o-transform .4s cubic-bezier(.4, 0, .2, 1);
-ms-transition: -ms-transform .4s cubic-bezier(.4, 0, .2, 1);
transform: scale(0, 1);
-webkit-transform: scale(0, 1);
-moz-transform: scale(0, 1);
-o-transform: scale(0, 1);
-ms-transform: scale(0, 1);
transform-origin: right center;
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
-o-transform-origin: right center;
-ms-transform-origin: right center;
}
.button-hover-effect:hover::before {
transform: scale(1, 1);
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-o-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transform-origin: left center;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
-ms-transform-origin: left center;
}
.button-hover-effect.white::before {
background-color: #fff;
}
.button-hover-effect .str {
position: relative;
z-index: 2;
}
<button class="btn-cmn btn1 button-hover-effect white btn-hfix1">
<span class="str">Know more</span>
</button>
I've only set the border to none, and then added an inset box-shadow.
I hope it helps.
Quick and "dirty". Remove the original border on hover and add an inset shadow (as a border) to see still a border while the transformation.
Updated:
.btn1 {
border:none; /*changed*/
box-shadow: inset 0px 0px 0px 2px #fff; /*added*/
}
body {
background-color: #4F4BFA;
}
.btn1 {
border: none;
box-shadow: inset 0px 0px 0px 2px #fff;
}
.btn-cmn {
width: 175px;
height: 52px;
background-color: transparent;
border-radius: 26px;
font-size: 18px;
font-weight: 700;
line-height: 28px;
cursor: pointer;
}
.button-hover-effect {
position: relative;
overflow: hidden;
border-color: #000;
color: #000;
transition: color .4s cubic-bezier(.4,0,.2,1);
-webkit-transition: color .4s cubic-bezier(.4,0,.2,1);
-moz-transition: color .4s cubic-bezier(.4,0,.2,1);
-o-transition: color .4s cubic-bezier(.4,0,.2,1);
-ms-transition: color .4s cubic-bezier(.4,0,.2,1);
}
.btn-hfix1 {
height: 53px;
}
.button-hover-effect.white {
border-color: #fff;
color: #fff;
}
.button-hover-effect.white:hover {
color: #000;
border:0px solid #fff;
box-shadow: inset 0px 0px 0px 2px #fff;
}
.button-hover-effect::before {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
content: "";
background-color: #000;
z-index: 1;
border-radius: 26px;
transition: transform .4s cubic-bezier(.4,0,.2,1);
-webkit-transition: -webkit-transform .4s cubic-bezier(.4,0,.2,1);
-moz-transition: -moz-transform .4s cubic-bezier(.4,0,.2,1);
-o-transition: -o-transform .4s cubic-bezier(.4,0,.2,1);
-ms-transition: -ms-transform .4s cubic-bezier(.4,0,.2,1);
transform: scale(0,1);
-webkit-transform: scale(0,1);
-moz-transform: scale(0,1);
-o-transform: scale(0,1);
-ms-transform: scale(0,1);
transform-origin: right center;
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
-o-transform-origin: right center;
-ms-transform-origin: right center;
}
.button-hover-effect:hover::before {
transform: scale(1,1);
-webkit-transform: scale(1,1);
-moz-transform: scale(1,1);
-o-transform: scale(1,1);
-ms-transform: scale(1,1);
transform-origin: left center;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
-ms-transform-origin: left center;
border:5px solid #fff;
}
.button-hover-effect.white::before {
background-color: #fff;
}
.button-hover-effect .str {
position: relative;
z-index: 2;
}
<button class="btn-cmn btn1 button-hover-effect white btn-hfix1">
<span class="str">Know more</span>
</button>
body {
background-color: #4F4BFA;
}
.btn1 {
border: 2px solid #fff;
}
.button-hover-effect.white:hover {
border-color: #fff;
color: #fff;
}
.btn-cmn {
width: 175px;
height: 52px;
background-color: transparent;
border-radius: 26px;
font-size: 18px;
font-weight: 700;
line-height: 28px;
cursor: pointer;
}
.btn-cmn:hover {
width: 175px;
height: 52px;
background-color: #fff;
border-radius: 26px;
font-size: 18px;
font-weight: 700;
line-height: 28px;
cursor: pointer;
}
.button-hover-effect {
position: relative;
overflow: hidden;
border-color: #000;
color: #000;
transition: color .4s cubic-bezier(.4,0,.2,1);
-webkit-transition: color .4s cubic-bezier(.4,0,.2,1);
-moz-transition: color .4s cubic-bezier(.4,0,.2,1);
-o-transition: color .4s cubic-bezier(.4,0,.2,1);
-ms-transition: color .4s cubic-bezier(.4,0,.2,1);
}
.btn-hfix1 {
height: 53px;
}
.button-hover-effect.white {
border-color: #fff;
color: #fff;
}
.button-hover-effect.white:hover {
color: #000;
}
.button-hover-effect::before {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
content: "";
background-color: #000;
z-index: 1;
border-radius: 26px;
transition: transform .4s cubic-bezier(.4,0,.2,1);
-webkit-transition: -webkit-transform .4s cubic-bezier(.4,0,.2,1);
-moz-transition: -moz-transform .4s cubic-bezier(.4,0,.2,1);
-o-transition: -o-transform .4s cubic-bezier(.4,0,.2,1);
-ms-transition: -ms-transform .4s cubic-bezier(.4,0,.2,1);
transform: scale(0,1);
-webkit-transform: scale(0,1);
-moz-transform: scale(0,1);
-o-transform: scale(0,1);
-ms-transform: scale(0,1);
transform-origin: right center;
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
-o-transform-origin: right center;
-ms-transform-origin: right center;
}
.button-hover-effect:hover::before {
transform: scale(1,1);
-webkit-transform: scale(1,1);
-moz-transform: scale(1,1);
-o-transform: scale(1,1);
-ms-transform: scale(1,1);
transform-origin: left center;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
-ms-transform-origin: left center;
}
.button-hover-effect.white::before {
background-color: #fff;
}
.button-hover-effect .str {
position: relative;
z-index: 2;
}
<button class="btn-cmn btn1 button-hover-effect white btn-hfix1">
<span class="str">Know more</span>
</button>
Have updated the fiddle. Please check
.button-hover-effect.white:hover {
color: #000;
border: none;
}
https://jsfiddle.net/vct5acc0/8/

CSS Rotate - Open book cover

I have an element that I am trying to get to open like a book cover outwards, however the code I have written makes it open inwards.
$('.item').click(function() {
$(this).toggleClass('open');
});
.item {
width: 200px;
height: 400px;
margin: 0 auto;
border-radius: 0%;
position: relative;
cursor: default;
}
.info-wrap {
width: 100%;
height: 100%;
border-radius: 0%;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
-ms-perspective: 800px;
perspective: 800px;
-webkit-transition: all 0.4s ease-in-out;
-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;
top: 20px;
left: 20px;
background: #f9f9f9;
}
.info {
position: absolute;
width: 100%;
height: 100%;
border-radius: 0%;
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transition: all 0.4s ease-in-out;
-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;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
z-index: 9999999;
}
.info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 0%;
background-position: center center;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.info .info-back {
-webkit-transform: rotate3d(0, 1, 0, 180deg);
-moz-transform: rotate3d(0, 1, 0, 180deg);
-o-transform: rotate3d(0, 1, 0, 180deg);
-ms-transform: rotate3d(0, 1, 0, 180deg);
transform: rotate3d(0, 1, 0, 180deg);
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#103b72+0,13539f+50 */
background: #103b72;
/* Old browsers */
background: -moz-linear-gradient(left, #103b72 0%, #13539f 50%);
/* FF3.6-15 */
background: -webkit-linear-gradient(left, #103b72 0%, #13539f 50%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #103b72 0%, #13539f 50%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#103b72', endColorstr='#13539f', GradientType=1);
/* IE6-9 */
}
.info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 14px;
margin: 0 15px;
padding: 40px 0 0 0;
height: 90px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.info-wrap {
background: #125daa;
}
.item.open .info {
-webkit-transform: rotate3d(0, 1, 0, 150deg);
-moz-transform: rotate3d(0, 1, 0, 150deg);
-o-transform: rotate3d(0, 1, 0, 150deg);
-ms-transform: rotate3d(0, 1, 0, 150deg);
transform: rotate3d(0, 1, 0, 150deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid-item item grid-item--width2 grid-item--height4">
<div class="item">
<div class="info-wrap">
<div class="info">
<div class="info-front" style="background: #333;">
<div class="align-center">
<div class="advent-date current">Test Title</div>
<h4 class="text-center">CLICK TO OPEN</h4>
</div>
</div>
<div class="info-back">
</div>
</div>
</div>
</div>
</div>
Demo
You need to make it rotate the other way and replace rotate3d(0,1,0, 150deg) by rotate3d(0,1,0, -150deg) on the .item.open .info :
$('.item').click(function() {
$(this).toggleClass('open');
});
.item {
width: 200px;
height: 400px;
margin: 0 auto;
border-radius: 0%;
position: relative;
cursor: default;
}
.info-wrap {
width: 100%;
height: 100%;
border-radius: 0%;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
-ms-perspective: 800px;
perspective: 800px;
-webkit-transition: all 0.4s ease-in-out;
-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;
top: 20px;
left: 20px;
background: #f9f9f9;
}
.info {
position: absolute;
width: 100%;
height: 100%;
border-radius: 0%;
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transition: all 0.4s ease-in-out;
-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;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
z-index: 9999999;
}
.info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 0%;
background-position: center center;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.info .info-back {
-webkit-transform: rotate3d(0, 1, 0, 180deg);
-moz-transform: rotate3d(0, 1, 0, 180deg);
-o-transform: rotate3d(0, 1, 0, 180deg);
-ms-transform: rotate3d(0, 1, 0, 180deg);
transform: rotate3d(0, 1, 0, 180deg);
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#103b72+0,13539f+50 */
background: #103b72;
/* Old browsers */
background: -moz-linear-gradient(left, #103b72 0%, #13539f 50%);
/* FF3.6-15 */
background: -webkit-linear-gradient(left, #103b72 0%, #13539f 50%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #103b72 0%, #13539f 50%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#103b72', endColorstr='#13539f', GradientType=1);
/* IE6-9 */
}
.info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 14px;
margin: 0 15px;
padding: 40px 0 0 0;
height: 90px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.info-wrap {
background: #125daa;
}
.item.open .info {
-webkit-transform: rotate3d(0, 1, 0, -150deg);
-moz-transform: rotate3d(0, 1, 0, -150deg);
-o-transform: rotate3d(0, 1, 0, -150deg);
-ms-transform: rotate3d(0, 1, 0, -150deg);
transform: rotate3d(0, 1, 0, -150deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid-item item grid-item--width2 grid-item--height4">
<div class="item">
<div class="info-wrap">
<div class="info">
<div class="info-front" style="background: #333;">
<div class="align-center">
<div class="advent-date current">Test Title</div>
<h4 class="text-center">CLICK TO OPEN</h4>
</div>
</div>
<div class="info-back">
</div>
</div>
</div>
</div>
</div>

How can I create two id tags from this script?

I want to make it so that I can have multiple buttons opening their own transition. As of now I have this code which works fine, however, if I repeat it or even change the css (class) to match an individual button, the primary button will still open the secondary transition and the newly placed secondary button remains inactive.
CSS
<style>
body,
.container,
.content-wrap {
overflow: hidden;
width: 100%;
height: 100%;
}
.container {
background: #fff;
}
.menu-wrap a {
color: #b8b7ad;
}
.menu-wrap a:hover,
.menu-wrap a:focus {
color: #c94e50;
}
.content-wrap {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.content {
position: absolute;
background: #fff;
overflow-y: visible;
}
.content::before {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background: none;
content: '';
opacity: 0;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
-webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;
transition: opacity 0.4s, transform 0s 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
/* Menu Button 1 */
.menu-button {
position: absolute;
z-index: 1000;
margin: 1em;
padding: 0;
width: 10px;
height: 50px;
border: none;
text-indent: 2.5em;
font-size: 1.5em;
color: transparent;
background: transparent;
opacity: 1;
top: 510px;
left: 855px;
-ms-transform: rotate(7deg); /* IE 9 */ -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(90deg);
}
.menu-button::before {
position: absolute;
top: 0.5em;
right: 0.2em;
bottom: 0.4em;
left: -1px;
background: linear-gradient(#929292 20%, transparent 20%, transparent 40%, #929292 40%, #929292 58%, transparent 0%, transparent 80%, #929292 80%);
content: '';
}
.menu-button:hover {
opacity: 1;
}
/* Close Button */
.close-button {
width: 50px;
height: 50px;
position: absolute;
right: 1em;
top: 1em;
overflow: hidden;
text-indent: 1em;
font-size: 0.75em;
border: none;
background: transparent;
color: transparent;
opacity: 0;
}
.close-button::before,
.close-button::after {
content: '';
position: absolute;
width: 3px;
height: 100%;
top: 0;
left: 50%;
background: #bdc3c7;
}
.close-button::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.close-button::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* Comments */
.menu-wrap {
position: absolute;
z-index: 1000;
width: 429.0500011444092px;
height: 600.875px;
right: 0;
background: #0C0C0C;
top: 6px;
padding: 0;
font-size: 1.15em;
-webkit-transform: translate3d(500px,0,0);
transform: translate3d(500px,0,0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.menu,
.icon-list {
height: 100%;
}
.icon-list {
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
}
.icon-list a {
display: block;
padding: 0.8em;
-webkit-transform: translate3d(0,500px,0);
transform: translate3d(0,500px,0);
}
.icon-list,
.icon-list a {
-webkit-transition: -webkit-transform 0s 0.4s;
transition: transform 0s 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.icon-list a:nth-child(2) {
-webkit-transform: translate3d(0,1000px,0);
transform: translate3d(0,1000px,0);
}
.icon-list a:nth-child(3) {
-webkit-transform: translate3d(0,1500px,0);
transform: translate3d(0,1500px,0);
}
.icon-list a:nth-child(4) {
-webkit-transform: translate3d(0,2000px,0);
transform: translate3d(0,2000px,0);
}
.icon-list a:nth-child(5) {
-webkit-transform: translate3d(0,2500px,0);
transform: translate3d(0,2500px,0);
}
.icon-list a:nth-child(6) {
-webkit-transform: translate3d(0,3000px,0);
transform: translate3d(0,3000px,0);
}
.icon-list a span {
margin-left: 10px;
font-weight: 700;
}
/* Shown menu */
.show-menu .menu-wrap {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition: -webkit-transform 0.8s;
transition: transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.show-menu .icon-list,
.show-menu .icon-list a {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition: -webkit-transform 0.8s;
transition: transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.show-menu .icon-list a {
-webkit-transition-duration: 0.9s;
transition-duration: 0.9s;
}
.show-menu .content::before {
opacity: 1;
-webkit-transition: opacity 0.8s;
transition: opacity 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}</style>
BEING TRANSITIONED
<div class="menu-wrap">
</div>
BUTTON
<button class="menu-button" id="open-button">Open Menu</button>
DEMO
DEMO
As you can see if you scroll towards the middle of the demo result window you will see the first button opening both transitions while the second button does nothing, I want the second button to open the bottom transition on its own.

2014 Button Effect Trend [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Does anyone know if the explore button on https://glass.eleks.com/ is strictly CSS3? I would like to create something fairly similar on my website. It may require JQuery but I'm not sure. This is what I have currently pulled..
HTML
<div class="main-screen show">
<div class="main-screen-wrapper ">
<div class="start-exploring show">
<div class="button"><span></span>Explore</div>
<div class="bottom-line"></div>
<div class="right-border"></div>
<div class="top-border"></div>
<div class="left-border"></div>
<div class="bottom-border"></div>
<div class="rectangle-border"></div>
</div>
</div>
</div>
CSS
.main-screen.show {
background: rgba(0, 80, 200, 0.2);
}
.main-screen {
position: absolute;
z-index: 130;
width: 100%;
height: 100%;
background: #05092c;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#3A124080', endColorstr='#3A124080');
text-align: center;
-webkit-transition: background 3s;
-moz-transition: background 3s;
-ms-transition: background 3s;
-o-transition: background 3s;
transition: background 3s;
}
.start-exploring.show {
-webkit-transform: rotateX(0);
-moz-transform: rotateX(0);
-ms-transform: rotateX(0);
-o-transform: rotateX(0);
transform: rotateX(0);
opacity: 1;
}
.start-exploring.show {
-webkit-transform: rotateX(0);
-moz-transform: rotateX(0);
-ms-transform: rotateX(0);
-o-transform: rotateX(0);
transform: rotateX(0);
opacity: 1;
}
.main-screen .start-exploring {
-webkit-transform: perspective(500px) rotateX(-70deg);
-webkit-transform-origin: center center;
-moz-transform: perspective(500px) rotateX(-70deg);
-moz-transform-origin: center center;
-ms-transform: perspective(500px) rotateX(-70deg);
-ms-transform-origin: center center;
-o-transform: perspective(500px) rotateX(-70deg);
-o-transform-origin: center center;
transform: perspective(500px) rotateX(-70 deg);
transform-origin: center center;
opacity: 0;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.start-exploring {
display: inline-block;
margin-top: 50px;
cursor: pointer;
position: relative;
}
.start-exploring .button {
background: rgba(5, 9, 44, 0.5);
width: 320px;
height: 60px;
font-size: 20px;
line-height: 60px;
text-transform: uppercase;
color: #ffffff;
font-family: 'Roboto Condensed';
font-style: normal;
font-weight: 400;
letter-spacing: 8px;
}
.start-exploring.show .bottom-line {
-webkit-animation: start-exploring-show 1s linear;
-moz-animation: start-exploring-show 1s linear;
-ms-animation: start-exploring-show 1s linear;
-o-animation: start-exploring-show 1s linear;
animation: start-exploring-show 1s linear;
}
.start-exploring .bottom-line {
position: absolute;
width: 150px;
height: 2px;
background: #19f5e8;
bottom: 0;
left: 0;
right: 0;
margin: auto;
-webkit-transition: all .05s linear;
-moz-transition: all .05s linear;
-ms-transition: all .05s linear;
-o-transition: all .05s linear;
transition: all .05s linear;
}
.right-border {
position: absolute;
width: 2px;
height: 0px;
background: #19f5e8;
bottom: 0;
right: 0;
margin: auto;
}
.top-border {
position: absolute;
width: 0px;
height: 2px;
background: #19f5e8;
top: 0;
right: 0;
margin: auto;
}
.left-border {
position: absolute;
width: 2px;
height: 0px;
background: #19f5e8;
top: 0;
left: 0;
margin: auto;
}
.bottom-border {
position: absolute;
width: 0px;
height: 2px;
background: #19f5e8;
bottom: 0;
left: 0;
margin: auto;
}
.rectangle-border {
position: absolute;
top: 0;
width: 100%;
height: 100%;
outline-color: rgba(255,255,255,1);
outline-style: solid;
outline-width: 0;
-webkit-transform: scale(1,1);
-webkit-transform-origin: center center;
-moz-transform: scale(1,1);
-moz-transform-origin: center center;
-ms-transform: scale(1,1);
-ms-transform-origin: center center;
-o-transform: scale(1,1);
-o-transform-origin: center center;
transform: scale(1,1);
transform-origin: center center;
}
It's a lot more than that! But yes it's pure CSS3, no JavaScript at all.
Here's the full code: http://jsbin.com/ecuSEXIm/1/edit

CSS pseudo element transform is choppy

I have a basic CSS transition where I rotate a pseudo ::after element and increase its width on hover. However the element transition is choppy and skips most of the animation halfway through.
Issue reproduced in a Code Pen.
I've tried using -webkit-backface-visibility: hidden; to solve the issue but I cant seem to stop the transition flash. Any ideas?
Transition css:
a {
position: relative;
text-decoration: none;
color: #db421c;
-webkit-box-shadow: inset 0px 4px 0px #fff;
-moz-box-shadow: inset 0px 4px 0px #fff;
-o-box-shadow: inset 0px 4px 0px #fff;
box-shadow: inset 0px 4px 0px #fff;
-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;
}
a + a {
margin-left: 20px;
}
a::after{
width: 20px;
height: 1px;
content: " ";
background: black;
position: absolute;
-webkit-transform: rotate(90deg) translate(55%, 10%);
-moz-transform: rotate(90deg) translate(55%, 10%);
-o-transform: rotate(90deg) translate(55%, 10%);
transform: rotate(90deg) translate(55%, 10%);
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;
}
a:last-child::after {
content: none;
}
a:hover {
color: black;
}
a:hover::after {
width: 100%;
height: 2px;
-webkit-transform: rotate(180deg) translate(100%, -20px);
-moz-transform: rotate(180deg) translate(100%, -20px);
-o-transform: rotate(180deg) translate(100%, -20px);
transform: rotate(180deg) translate(100%, -20px);
}
I isolated the issue to the translate transformation; I wasn't sure how exactly to fix it, although I have a feeling the solution is in the transform-origin property. The only working solution I was able to come up with was to use positioning in order to move the pseudo elements. The same rotation is being used, we are just making use of the absolute positioning in order to translate the elements. This method doesn't have any apparent issues given that the parent element is relatively positioned. This method should also work for elements with varying widths.
UPDATED EXAMPLE HERE - it achives the exact same effect without the choppiness.
Instead of translate(55%, 10%), use top: 10px/right: -22px
And instead of translate(100%, -20px), use top: 22px/right: 0px
Updated CSS
a::after {
width: 20px;
height: 1px;
content: " ";
background: black;
position: absolute;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
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;
top: 10px;
right: -22px;
}
a:hover::after {
width: 100%;
height: 2px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
top: 22px;
right: 0px;
}