Text not getting center aligned in a CSS button - html

.button {
text-align: left;
background-color: #012839;
text-decoration: none;
text-transform: uppercase;
font-family: 'Exo 2', sans-serif;
font-weight: 200;
font-size: 30px;
display: inline-block;
position: relative;
margin-top: 50px;
margin-left: 20px;
text-align: center;
width: 50px;
color: #00c7ec;
border: 1px solid #00c7ec;
border-radius: 5px;
line-height: 3em;
padding-left: 5em;
padding-right: 5em;
box-shadow: 0 0 0 0 transparent;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.button:hover {
color: white;
box-shadow: 0 0 30px 0 rgba(0, 199, 236, 0.5);
background-color: #00c7ec;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.button:hover:before {
-webkit-animation: shine 0.5s 0s linear;
-moz-animation: shine 0.5s 0s linear;
animation: shine 0.5s 0s linear;
}
.button:active {
box-shadow: 0 0 0 0 transparent;
-webkit-transition: box-shadow 0.2s ease-in;
-moz-transition: box-shadow 0.2s ease-in;
transition: box-shadow 0.2s ease-in;
}
.button:before {
content: '';
display: block;
width: 0px;
height: 86%;
position: absolute;
top: 7%;
left: 0%;
opacity: 0;
background: white;
box-shadow: 0 0 15px 3px white;
-webkit-transform: skewX(-20deg);
-moz-transform: skewX(-20deg);
-ms-transform: skewX(-20deg);
-o-transform: skewX(-20deg);
transform: skewX(-20deg);
}
#-webkit-keyframes shine {
from {
opacity: 0;
left: 0%;
}
50% {
opacity: 1;
}
to {
opacity: 0;
left: 100%;
}
}
#-moz-keyframes shine {
from {
opacity: 0;
left: 0%;
}
50% {
opacity: 1;
}
to {
opacity: 0;
left: 100%;
}
}
#keyframes shine {
from {
opacity: 0;
left: 0%;
}
50% {
opacity: 1;
}
to {
opacity: 0;
left: 100%;
}
}
Gallery
I wanted to use this button in my personal project but the problem I am having is that the text in the button i.e. "Gallery" is not getting center aligned even after I put the "text-align:"center" in the button class.

Because of you define width 50px; now do this
add width: auto; or remove width: 50px;
as like this
.button {
text-align: left;
background-color: #012839;
text-decoration: none;
text-transform: uppercase;
font-family: 'Exo 2', sans-serif;
font-weight: 200;
font-size: 30px;
display: inline-block;
position: relative;
margin-top: 50px;
margin-left: 20px;
text-align: center;
color: #00c7ec;
border: 1px solid #00c7ec;
border-radius: 5px;
line-height: 3em;
padding-left: 5em;
padding-right: 5em;
box-shadow: 0 0 0 0 transparent;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.button:hover {
color: white;
box-shadow: 0 0 30px 0 rgba(0, 199, 236, 0.5);
background-color: #00c7ec;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.button:hover:before {
-webkit-animation: shine 0.5s 0s linear;
-moz-animation: shine 0.5s 0s linear;
animation: shine 0.5s 0s linear;
}
.button:active {
box-shadow: 0 0 0 0 transparent;
-webkit-transition: box-shadow 0.2s ease-in;
-moz-transition: box-shadow 0.2s ease-in;
transition: box-shadow 0.2s ease-in;
}
.button:before {
content: '';
display: block;
width: 0px;
height: 86%;
position: absolute;
top: 7%;
left: 0%;
opacity: 0;
background: white;
box-shadow: 0 0 15px 3px white;
-webkit-transform: skewX(-20deg);
-moz-transform: skewX(-20deg);
-ms-transform: skewX(-20deg);
-o-transform: skewX(-20deg);
transform: skewX(-20deg);
}
#-webkit-keyframes shine {
from {
opacity: 0;
left: 0%;
}
50% {
opacity: 1;
}
to {
opacity: 0;
left: 100%;
}
}
#-moz-keyframes shine {
from {
opacity: 0;
left: 0%;
}
50% {
opacity: 1;
}
to {
opacity: 0;
left: 100%;
}
}
#keyframes shine {
from {
opacity: 0;
left: 0%;
}
50% {
opacity: 1;
}
to {
opacity: 0;
left: 100%;
}
}
Gallery

Add .button { width: auto; } to get your result

change
padding-left : 5em to 2.5em

I had removed padding and added min-width:220px:
.button {
text-align: left;
background-color: #012839;
text-decoration: none;
text-transform: uppercase;
font-family: 'Exo 2', sans-serif;
font-weight: 200;
font-size: 30px;
display: inline-block;
position: relative;
margin-top: 50px;
margin-left: 20px;
text-align: center;
color: #00c7ec;
min-width: 220px; /*Here you can give any value other then 220px*/
border: 1px solid #00c7ec;
border-radius: 5px;
line-height: 3em;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.button:hover {
color: white;
box-shadow: 0 0 30px 0 rgba(0, 199, 236, 0.5);
background-color: #00c7ec;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.button:hover:before {
-webkit-animation: shine 0.5s 0s linear;
-moz-animation: shine 0.5s 0s linear;
animation: shine 0.5s 0s linear;
}
.button:active {
box-shadow: 0 0 0 0 transparent;
-webkit-transition: box-shadow 0.2s ease-in;
-moz-transition: box-shadow 0.2s ease-in;
transition: box-shadow 0.2s ease-in;
}
.button:before {
content: '';
display: block;
width: 0px;
height: 86%;
position: absolute;
top: 7%;
left: 0%;
opacity: 0;
background: white;
box-shadow: 0 0 15px 3px white;
-webkit-transform: skewX(-20deg);
-moz-transform: skewX(-20deg);
-ms-transform: skewX(-20deg);
-o-transform: skewX(-20deg);
transform: skewX(-20deg);
}
#-webkit-keyframes shine {
from {
opacity: 0;
left: 0%;
}
50% {
opacity: 1;
}
to {
opacity: 0;
left: 100%;
}
}
#-moz-keyframes shine {
from {
opacity: 0;
left: 0%;
}
50% {
opacity: 1;
}
to {
opacity: 0;
left: 100%;
}
}
#keyframes shine {
from {
opacity: 0;
left: 0%;
}
50% {
opacity: 1;
}
to {
opacity: 0;
left: 100%;
}
}
Gallery

Related

How to retain my current css if i use bootstrap

Hi I want to use <span class="glyphicon glyphicon-print"></span>
but to do it i need to put a bootstrap below
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
the problem is, my current table and some h1 text is changing the size or design if I put that bootstrap, what should I do? Any idea?
The resut is on this picture
With Bootstrap the icon of gly is working
but this is my default and i want the size of this table Without Bootstrap
my css is here
html {
height: 100%;
}
body{
height: 100%;
position: relative;
margin: 0;
background: -webkit-linear-gradient(left, #25c481, #25b7c4);
background: linear-gradient(45deg, rgba(66, 183, 245, 0.8) 0%, rgba(66, 245, 189, 0.4) 100%);
font-family: 'Roboto', sans-serif;
background-repeat: no-repeat;
background-attachment: fixed;
}
table{
width:100%;
table-layout: auto;
}
.tbl-header{
position: relative;
background-color: rgba(255,255,255,0.3);
top: -45px;
}
.tbl-content{
height:300px;
overflow-x:auto;
margin-top: 0px;
border: 1px solid rgba(255,255,255,0.3);
}
th{
padding: 20px 15px;
text-align: left;
font-weight: 500;
font-size: 12px;
color: #fff;
background: black;
text-transform: uppercase;
}
td{
padding: 15px;
text-align: left;
vertical-align:middle;
font-weight: 300;
font-size: 12px;
color: #fff;
border-bottom: solid 1px rgba(255,255,255,0.1);
}
#import url(https://fonts.googleapis.com/css?family=Roboto:400,500,300,700);
section{
margin: 50px;
}
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
*, *:before, *:after {
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: rgba(0,0,0,0);
user-select: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 0;
margin: 0;
}
a, a:visited, a:hover {
color: inherit;
text-decoration: none;
}
h1 {
position: relative;
top: -40px;
display: block;
margin: 0 auto 25px auto;
text-align: center;
font-size: 1.92em;
font-weight: 600;
letter-spacing: -0.055em;
font-family: Raleway, sans-serif;
text-transform: uppercase;
letter-spacing: 3px;
line-height: 48px;
color: #03e9f4;
text-shadow: 0px 1px black;
}
h2 {
display: block;
margin: 0 auto 60px auto;
text-align: center;
font-weight: 400;
font-size: 1.25em;
letter-spacing: -0.015em;
}
.container {
position: relative;
margin: calc(75px + 2vh + 2vw) auto 0 auto;
padding: 0;
width: 100%;
max-width: 840px;
}
.search-box {
top: -40px;
position: relative;
width: 100%;
max-width: 360px;
height: 60px;
border-radius: 120px;
margin: 0 auto;
}
.search-box1 {
top: -60px;
position: relative;
width: 33%;
max-width: 300px;
height: 40px;
margin: 0 auto;
justify-content: center;
align-items: center;
text-align: center;
display: flex;
}
input[type="text"]{ padding: 10px 10px; line-height: 5px; }
.search-icon, .go-icon {
position: absolute;
top: 0;
height: 60px;
width: 86px;
line-height: 61px;
text-align: center;
}
.search-icon {
left: 0;
pointer-events: none;
font-size: 1.22em;
will-change: transform;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform-origin: center center;
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-o-transform-origin: center center;
transition: transform 400ms 220ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-webkit-transition: transform 400ms 220ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-moz-transition: transform 400ms 220ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-o-transition: transform 400ms 220ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
.si-rotate {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
.go-icon {
right: 0;
pointer-events: none;
font-size: 1.38em;
will-change: opacity;
cursor: default;
opacity: 0;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transition: opacity 190ms ease-out, transform 260ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-webkit-transition: opacity 190ms ease-out, transform 260ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-moz-transition: opacity 190ms ease-out, transform 260ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-o-transition: opacity 190ms ease-out, transform 260ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
.go-in {
opacity: 1;
pointer-events: all;
cursor: pointer;
transform: rotate(0);
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
transition: opacity 190ms ease-out, transform 260ms 20ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-webkit-transition: opacity 190ms ease-out, transform 260ms 20ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-moz-transition: opacity 190ms ease-out, transform 260ms 20ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-o-transition: opacity 190ms ease-out, transform 260ms 20ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
.search-border {
display: block;
width: 100%;
max-width: 360px;
height: 60px;
}
.border {
fill: none;
stroke: #FFFFFF;
stroke-width: 5;
stroke-miterlimit: 10;
}
.border {
stroke-dasharray: 740;
stroke-dashoffset: 0;
transition: stroke-dashoffset 400ms cubic-bezier(0.600, 0.040, 0.735, 0.990);
-webkit-transition: stroke-dashoffset 400ms cubic-bezier(0.600, 0.040, 0.735, 0.990);
-moz-transition: stroke-dashoffset 400ms cubic-bezier(0.600, 0.040, 0.735, 0.990);
-o-transition: stroke-dashoffset 400ms cubic-bezier(0.600, 0.040, 0.735, 0.990);
}
.border-searching .border {
stroke-dasharray: 740;
stroke-dashoffset: 459;
transition: stroke-dashoffset 650ms cubic-bezier(0.755, 0.150, 0.205, 1.000);
-webkit-transition: stroke-dashoffset 650ms cubic-bezier(0.755, 0.150, 0.205, 1.000);
-moz-transition: stroke-dashoffset 650ms cubic-bezier(0.755, 0.150, 0.205, 1.000);
-o-transition: stroke-dashoffset 650ms cubic-bezier(0.755, 0.150, 0.205, 1.000);
}
#search {
font-family: 'Montserrat Alternates', sans-serif;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 120px;
border: none;
background: rgba(255,255,255,0);
padding: 0 68px 0 68px;
color: #FFFFFF;
font-size: 1.32em;
font-weight: 400;
letter-spacing: -0.015em;
outline: none;
color:black;
}
#search::-webkit-input-placeholder {color: #FFFFFF;}
#search::-moz-placeholder {color: #FFFFFF;}
#search:-ms-input-placeholder {color: #FFFFFF;}
#search:-moz-placeholder {color: #FFFFFF;}
#search::-moz-selection {color: #FFFFFF; background: rgba(0,0,0,0.25);}
#search::selection {color: #FFFFFF; background: rgba(0,0,0,0.25);}
.submit-btn {
display: inline-block;
float:right;
background-color: #000;
color: #fff;
font-family: Raleway, sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 12px;
line-height: 24px;
padding: 8px 8px;
border: none;
cursor: pointer;
}
.submit-btn:hover {
text-decoration: underline;
background-color: white;
color: black;
border: solid;
border-width: 1px;
}
Generally speaking,
If your CSS comes after Bootstrap's, then Bootstrap is given priority and will override your CSS where possible.
If your CSS comes after Boostrap's, then in some cases, your CSS will be given priority.
Additionally, if you're planning to work with Bootstrap then being mindful of specificity moving forward can save you some headache. Plus, when all else fails and you are sure the issue is a clash between your CSS and Bootstrap then you can take a look at how that CSS rule is declared in Bootstrap CSS and that will likely give you some hint as to how to circumvent it.
Simple, just follow this pattern when you linked the bootstrap css and your custom css file to the head section.
Link bootstrap css first
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
Then link your custom css file
<link rel="stylesheet" href="css/style.css">

How can I make this styling work for button rather than an anchor?

i have my link that was styled, but when I change link tag to button in html and css styling won't work. How can get that styling on button type submit note I can't get link to submit via js because of interference with stripe that's why i wanna get this one working
a styling that is working
a.animated-button:link:after, a.animated-button:visited:after {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 0;
width: 150%;
z-index: -1;
-webkit-transition: all 0.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
}
a.animated-button:link:hover, a.animated-button:visited:hover {
color: #FFF;
text-shadow: none;
}
a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
height: 450%;
}
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 0px auto 0;
padding: 14px 15px;
color: #fff;
font-size:12px;
border-radius: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button.thar-three {
color: rgb(68, 68, 68);
cursor: pointer;
display: block;
position: relative;
border: 1px solid #dddddd;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}
a.animated-button.thar-three:hover {
color: #000 !important;
background-color: transparent;
text-shadow: nthree;
}
a.animated-button.thar-three:hover:before {
left: 0%;
right: auto;
width: 100%;
}
a.animated-button.thar-three:before {
display: block;
position: absolute;
top: 0px;
right: 0px;
height: 100%;
width: 0px;
z-index: -1;
content: '';
color: #000 !important;
background: #f5f5f5;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}
{% trans "pay" %}
button styling that won't work
button[type=submit].animated-button:link:after, button[type=submit].animated-button:visited:after {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 0;
width: 150%;
z-index: -1;
-webkit-transition: all 0.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
}
button[type=submit].animated-button:link:hover, button[type=submit].animated-button:visited:hover {
color: #FFF;
text-shadow: none;
}
button[type=submit].animated-button:link:hover:after, button[type=submit].animated-button:visited:hover:after {
height: 450%;
}
button[type=submit].animated-button:link, button[type=submit].animated-button:visited {
position: relative;
display: block;
margin: 0px auto 0;
padding: 14px 15px;
color: #fff;
font-size:12px;
border-radius: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
button[type=submit].animated-button.thar-three {
color: rgb(68, 68, 68);
cursor: pointer;
display: block;
position: relative;
border: 1px solid #dddddd;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}
button[type=submit].animated-button.thar-three:hover {
color: #000 !important;
background-color: transparent;
text-shadow: nthree;
}
button[type=submit].animated-button.thar-three:hover:before {
left: 0%;
right: auto;
width: 100%;
}
button[type=submit].animated-button.thar-three:before {
display: block;
position: absolute;
top: 0px;
right: 0px;
height: 100%;
width: 0px;
z-index: -1;
content: '';
color: #000 !important;
background: #f5f5f5;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}
<button type="submit" href="" class="btn btn-sm animated-button thar-three">{% trans "pay" %}</button>
since a div is not a link, you can't use the selectors :link nor :visited. By simply removing them from your css, the result is way closer. Of course, you may have to implement a method to replace the use of :link and :visited
button[type=submit].animated-button:after, button[type=submit].animated-button:after {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 0;
width: 100%;
z-index: -1;
-webkit-transition: all 0.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
}
button[type=submit].animated-button:hover, button[type=submit].animated-button:hover {
color: #FFF;
text-shadow: none;
}
button[type=submit].animated-button:hover:after, button[type=submit].animated-button:hover:after {
height: 450%;
}
button[type=submit].animated-button, button[type=submit].animated-button {
position: relative;
display: block;
margin: 0px auto 0;
padding: 14px 15px;
color: #fff;
font-size:12px;
border-radius: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
button[type=submit].animated-button.thar-three {
color: rgb(68, 68, 68);
cursor: pointer;
display: block;
position: relative;
border: 1px solid #dddddd;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}
button[type=submit].animated-button.thar-three:hover {
color: #000 !important;
background-color: transparent;
text-shadow: nthree;
}
button[type=submit].animated-button.thar-three:hover:before {
left: 0%;
right: auto;
width: 100%;
}
button[type=submit].animated-button.thar-three:before {
display: block;
position: absolute;
top: 0px;
right: 0px;
height: 100%;
width: 0px;
z-index: -1;
content: '';
color: #000 !important;
background: #f5f5f5;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}
<button type="submit" href="" class="btn btn-sm animated-button thar-three">{% trans "pay" %}</button>

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/

Text over image css with overlay effect

I tried to put some contents over an image with some overlay effects, but it does not shows output as my needs. Also I don't know how to do overlay effects anyone can help me please.
.destination {
padding: 20px;
-ms-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
transition: all .5s ease;
-ms-transition: all .5s ease;
-webkit-transition: all .5s ease;
}
.destination h3 {
font-size: 25px;
color: #fff;
line-height: 20px;
text-transform: uppercase;
margin-bottom: 10px;
}
.destination span {
display: block;
font-size: 15px;
color: #fff;
line-height: 16px;
}
.overlay-leftTop {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
}
.destinationmask {
width: 100%;
height: 100%;
z-index: 5;
opacity: 0.4;
filter: alpha(opacity=50);
background: #000;
}
<img src="https://image.ibb.co/evyyfm/mu.jpg" alt="img01"/>
<a href="" class="overlay-leftTop">
<div class="table-display">
<div class="table-cell table-cell-bottom">
<div class="destination">
<h3>TEST</h3>
<span>Check,check1,check2</span>
</div>
</div>
</div>
Actually I need something like this
You should use background-image CSS property instead of <img> tag. And for effects use pseudo elements like :before.
Have a look at the snippet below:
.destination {
padding: 20px;
-ms-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
transition: all .5s ease;
-ms-transition: all .5s ease;
-webkit-transition: all .5s ease;
}
.destination h3 {
font-size: 25px;
color: #fff;
line-height: 20px;
text-transform: uppercase;
margin-bottom: 10px;
}
.destination span {
display: block;
font-size: 15px;
color: #fff;
line-height: 16px;
}
.overlay-leftTop {
display: block;
position: relative;
text-decoration: none;
width: 300px;
height: 300px;
z-index: 9;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
}
.overlay-leftTop:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
background: rgba(0,0,0,0.3);
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
}
.overlay-leftTop:hover {
text-decoration: none;
}
.overlay-leftTop:hover:before {
background: rgba(0,0,0,0.5);
}
.destinationmask {
width: 100%;
height: 100%;
z-index: 5;
opacity: 0.4;
filter: alpha(opacity=50);
background: #000;
}
<a href="" class="overlay-leftTop" style="background-image: url('https://image.ibb.co/evyyfm/mu.jpg');">
<div class="table-display">
<div class="table-cell table-cell-bottom">
<div class="destination">
<h3>TEST</h3>
<span>Check,check1,check2</span>
</div>
</div>
</div>
</a>
Hope this helps!
I think this is what u want.
.destination {
padding: 20px;
-ms-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
transition: all .5s ease;
-ms-transition: all .5s ease;
-webkit-transition: all .5s ease;
}
.destination h3 {
font-size: 25px;
color: #fff;
line-height: 20px;
text-transform: uppercase;
margin-bottom: 10px;
}
.destination span {
display: block;
font-size: 15px;
color: #fff;
line-height: 16px;
}
.overlay-leftTop {
display: block;
position: relative;
text-decoration: none;
width: 300px;
height: 300px;
z-index: 9;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
}
.overlay-leftTop:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
background: rgba(0,0,0,0.3);
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
}
.overlay-leftTop:hover {
text-decoration: none;
}
.overlay-leftTop:hover:before {
background: rgba(0,0,0,0.5);
}
.destinationmask {
width: 100%;
height: 100%;
z-index: 5;
opacity: 0.4;
filter: alpha(opacity=50);
background: #000;
}
.view-btn{
position: absolute;
top: 180px;
font-size: 16px !important;
border: 2px solid #fff;
display: inline-block !important;
text-align: center;
padding: 10px 15px;
opacity: 0;
transition:all 350ms ease 0s;
}
.overlay-leftTop:hover .view-btn{
opacity:1;
}
<a href="" class="overlay-leftTop" style="background-image: url('https://image.ibb.co/evyyfm/mu.jpg');">
<div class="table-display">
<div class="table-cell table-cell-bottom">
<div class="destination">
<h3>TEST</h3>
<span>Check,check1,check2</span>
<span class="view-btn">View More</Span>
</div>
</div>
</div>
</a>
Please try this. I have added some css:
.img-wrap {
display: inline-block;
position: relative;
width: 386px;
}
.img-box:before {
position: absolute;
content: "";
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.4);
transform:scale(0);
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
}
.img-wrap:hover .img-box:before {
transform:scale(1);
}
.img-wrap:hover .overlay-leftTop{
opacity:1;
}
img {
height: auto;
max-height: 100%;
max-width: 100%;
width: auto;
display: block;
}
.destination {
padding: 20px;
-ms-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
transition: all .5s ease;
-ms-transition: all .5s ease;
-webkit-transition: all .5s ease;
}
.destination h3 {
font-size: 25px;
color: #fff;
line-height: 20px;
text-transform: uppercase;
margin-bottom: 10px;
}
.destination span {
display: block;
font-size: 15px;
color: #fff;
line-height: 16px;
}
.overlay-leftTop {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity:0;
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
}
.img-wrap {
display: inline-block;
position: relative;
width: 386px;
}
.img-box:before {
position: absolute;
content: "";
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.4);
transform:scale(0);
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
}
.img-wrap:hover .img-box:before {
transform:scale(1);
}
.img-wrap:hover .overlay-leftTop{
opacity:1;
}
img {
height: auto;
max-height: 100%;
max-width: 100%;
width: auto;
display: block;
}
<div class="img-wrap">
<div class="img-box">
<img src="https://image.ibb.co/evyyfm/mu.jpg" alt="img01"/>
</div>
<a href="" class="overlay-leftTop">
<div class="table-display">
<div class="table-cell table-cell-bottom">
<div class="destination">
<h3>TEST</h3>
<span>Check,check1,check2</span>
</div>
</div>
</div>
</a>
</div>

Making off-canvas sliding menu with css

I want to make a sliding menu using solely CSS. The menu will reveal a list of items and a close button inside it. I currently have an anchor tag on my homepage that is styled correctly, but it does not do anything when clicked.
HTML:
<body class="homepage body-push">
<!-- Menu -->
<nav class="menu" id="theMenu">
<div class="menu-wrap">
<h1 class="logo">Focus</h1>
<i class="icon-remove menu-close"></i>
Home
Services
Process
Portfolio
About
Contact
<i class="icon-facebook"></i>
<i class="icon-twitter"></i>
<i class="icon-dribbble"></i>
<i class="icon-envelope"></i>
</div>
<!-- Menu button -->
<div id="menuToggle"><i class="icon-reorder"></i></div>
</nav>
</body>
CSS:
.menu {
position: fixed;
right: -200px;
width: 260px;
height: 100%;
top: 0;
z-index: 10;
text-align: left;
}
.menu.menu-open {
right: 0px;
}
.menu-wrap {
position: absolute;
top: 0;
left: 60px;
background: #1a1a1a;
width: 200px;
height: 100%;
}
.menu a {
margin-left: 20px;
color: #808080;
display: block;
font-size: 12px;
font-weight: 700;
line-height: 40px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.menu a:hover {
color: #ffffff;
}
.menu a:active {
color: #ffffff;
}
.menu a > i {
float: left;
display: inline-block;
vertical-align: middle;
text-align: left;
width: 25px;
font-size: 14px;
line-height: 40px;
margin: 25px 2px;
}
.menu-close {
cursor: pointer;
display: block;
position: absolute;
font-size: 14px;
color: #808080;
width: 40px;
height: 40px;
line-height: 40px;
top: 20px;
right: 5px;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
.menu-close:hover {
color: #ffffff;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
/* Push the body after clicking the menu button */
.body-push {
overflow-x: hidden;
position: relative;
left: 0;
}
.body-push-toright {
left: 200px;
}
.body-push-toleft {
left: -200px;
}
.menu,
.body-push {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#menuToggle {
position: absolute;
top: 20px;
left: 0;
z-index: 11;
display: block;
text-align: center;
font-size: 14px;
color: #ffffff;
width: 40px;
height: 40px;
line-height: 40px;
cursor: pointer;
background: rgba(0,0,0,0.25);
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#menuToggle:hover {
color: #ffffff;
background: rgba(0,0,0,0.2);
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
UPDATE: I finally found a way to get it working.
HTML:
<!-- Menu -->
<nav class="menu" id="theMenu">
<div class="menu-wrap">
<h1 class="logo">Menu</h1>
<i class="icon-remove menu-close"></i>
Home
Services
Process
Portfolio
About
Contact
<i class="icon-facebook"></i>
<i class="icon-twitter"></i>
<i class="icon-dribbble"></i>
<i class="icon-envelope"></i>
</div>
<!-- Menu button -->
<div id="menuToggle"><i class="icon-reorder"></i></div>
</nav>
CSS:
.menu {
position: fixed;
right: -200px;
width: 260px;
height: 100%;
top: 0;
z-index: 10;
text-align: left;
}
.menu.menu-open {
right: 0px;
}
.menu-wrap {
position: absolute;
top: 0;
left: 60px;
background: #1a1a1a;
width: 200px;
height: 100%;
}
.menu h1.logo a {
font-family: 'Raleway', Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 800;
letter-spacing: 0.15em;
line-height: 40px;
text-transform: uppercase;
color: #ffffff;
margin-top: 20px;
}
.menu h1.logo a:hover {
color: #f85c37;
}
.menu img.logo {
margin: 20px 0;
max-width: 160px;
}
.menu a {
margin-left: 20px;
color: #808080;
display: block;
font-size: 12px;
font-weight: 700;
line-height: 40px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.menu a:hover {
color: #ffffff;
}
.menu a:active {
color: #ffffff;
}
.menu a > i {
float: left;
display: inline-block;
vertical-align: middle;
text-align: left;
width: 25px;
font-size: 14px;
line-height: 40px;
margin: 25px 2px;
}
.menu-close {
cursor: pointer;
display: block;
position: absolute;
font-size: 14px;
color: #808080;
width: 40px;
height: 40px;
line-height: 40px;
top: 20px;
right: 5px;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
.menu-close:hover {
color: #ffffff;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
/* Push the body after clicking the menu button */
.body-push {
overflow-x: hidden;
position: relative;
left: 0;
}
.body-push-toright {
left: 200px;
}
.body-push-toleft {
left: -200px;
}
.menu,
.body-push {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#menuToggle {
position: absolute;
top: 20px;
left: 0;
z-index: 11;
display: block;
text-align: center;
font-size: 14px;
color: #ffffff;
width: 40px;
height: 40px;
line-height: 40px;
cursor: pointer;
background: rgba(0,0,0,0.25);
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#menuToggle:hover {
color: #ffffff;
background: rgba(0,0,0,0.2);
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
Javascript:
// Menu settings
$('#menuToggle, .menu-close').on('click', function(){
$('#menuToggle').toggleClass('active');
$('body').toggleClass('body-push-toleft');
$('#theMenu').toggleClass('menu-open');
});
// Scrollable menu on small devices
$(window).bind("load resize", function(){
if($(window).height() < 400){
$(".menu").css("overflow-y","scroll");
}
else {
$(".menu").css("overflow-y","hidden");
}
});
I would recommend reading this: http://www.sitepoint.com/css3-sliding-menu/
If the article is TL;DR then use
/* Revealing 3D Menu CSS */
body
{
font-family: sans-serif;
font-size: 100%;
padding: 0;
margin: 0;
color: #333;
background-color: #221;
}
/* main page */
article
{
position: fixed;
width: 70%;
left: 0;
top: 0;
right: 0;
bottom: 0;
padding: 30px 15%;
background-color: #fff;
overflow: auto;
z-index: 0;
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%;
}
article:after
{
position: absolute;
content: ' ';
left: 100%;
top: 0;
right: 0;
bottom: 0;
background-image: -webkit-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
background-image: -moz-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
background-image: -ms-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
background-image: -o-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
background-image: linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
pointer-events: none;
}
/* navigation */
nav
{
position: fixed;
left: -16em;
top: 0;
bottom: 0;
background-color: #654;
border-right: 50px solid #765;
box-shadow: 4px 0 5px rgba(0,0,0,0.2);
z-index: 1;
cursor: pointer;
}
nav:after
{
position: absolute;
content: ' ';
width: 0;
height: 0;
right: -70px;
top: 50%;
border-width: 15px 10px;
border-style: solid;
border-color: transparent transparent transparent #765;
}
nav ul
{
width: 14em;
list-style-type: none;
margin: 0;
padding: 1em;
}
nav a:link, nav a:visited
{
display: block;
width: 100%;
font-weight: bold;
line-height: 2.5em;
text-indent: 10px;
text-decoration: none;
color: #ffc;
border-radius: 4px;
outline: 0 none;
}
nav a:hover, nav a:focus
{
color: #fff;
background-color: #543;
text-shadow: 0 0 4px #fff;
box-shadow: inset 0 2px 2px rgba(0,0,0,0.2);
}
/* hovering */
article, article:after, nav, nav *
{
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-ms-transition: all 600ms ease;
-o-transition: all 600ms ease;
transition: all 600ms ease;
}
nav:hover
{
left: 0;
}
nav:hover ~ article
{
-webkit-transform: translateX(16em) perspective(600px) rotateY(10deg);
-moz-transform: translateX(16em) perspective(600px) rotateY(10deg);
-ms-transform: translateX(16em) perspective(600px) rotateY(10deg);
-o-transform: translateX(16em) perspective(600px) rotateY(10deg);
transform: translateX(16em) perspective(600px) rotateY(10deg);
}
nav:hover ~ article:after
{
left: 60%;
}
This can be used to create a 3d sliding menu as seen here