Skip to content

Commit

Permalink
Update style.css
Browse files Browse the repository at this point in the history
telenord committed Feb 16, 2016
1 parent a165126 commit 1373aa7
Showing 1 changed file with 109 additions and 13 deletions.
122 changes: 109 additions & 13 deletions style.css
Original file line number Diff line number Diff line change
@@ -7,20 +7,58 @@ html, body {
background: #f5f5f5;
}

h1 {
margin: 25px 0;
font-size: 30px;
font-weight: 300;
text-align: center;
}

a {
position: relative;
display: inline-block;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
outline: none;
font-weight: 300;
}

.effect-2 {
div[class^="effect-"] {
width: 400px;
margin: 100px auto;
margin: 0 auto;
padding: 30px 0;
text-align: center;
text-align: center;
}

.effect-1 {
background-color: #f19f0f;
}

.effect-1 a {
padding: 6px 0 8px;
color: #fff;
}

.effect-1 a::after {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 4px;
background: rgba(0,0,0,0.1);
transform: translateY(10px);
opacity: 0;
transition: opacity 0.3s, transform 0.3s;
}

.effect-1 a:hover::after {
opacity: 1;
transform: translateY(0px);
}

.effect-2 {
background-color: #435a6b;
}

@@ -29,7 +67,6 @@ a {
height: 45px;
line-height: 45px;
color: #fff;
font-weight: 300;
}

.effect-2 a::before,
@@ -57,19 +94,78 @@ a {
transform-origin: 100% 100%;
}

.effect-2 a:hover::before,
.effect-2 a:hover::before {
opacity: 1;
left: 50%;
transform: rotate(0deg) translateX(-50%);
}

.effect-2 a:hover::after {
opacity:1;
opacity: 1;
right: 50%;
transform: rotate(0deg) translateX(50%);
}

.effect-3 {
background-color: #2ac56c;
}

.effect-2 a:hover::before {
left: 50%;
transform:rotate(0deg) translateX(-50%);

.effect-3 a {
color: rgba(0,0,0,0.2);
font-weight: bold;
}

.effect-2 a:hover::after {
right: 50%;
transform:rotate(0deg) translateX(50%);
.effect-3 a::before {
content: attr(data-hover);
position: absolute;
color: #fff;
transition: transform 0.3s, opacity 0.3s;
}

.effect-3 a:hover::before {
transform: scale(0.9);
opacity: 0;
}

.effect-4 {
background-color: #3fa46a;
}

.effect-4 a {
padding: 8px;
color: #237546;
font-weight: bold;
}

.effect-4 a:hover {
color: #fff;
transition: color 0.3s;
}

.effect-4 a::before,
.effect-4 a::after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: #fff;
opacity: 0;
transition: opacity 0.3s, transform 0.3s;
}

.effect-4 a::before {
top: 0;
transform: translateY(-10px);
}

.effect-4 a::after {
bottom: 0;
transform: translateY(10px);
}

.effect-4 a:hover::before,
.effect-4 a:hover::after {
opacity: 1;
transform: translateY(0px);
}

0 comments on commit 1373aa7

Please sign in to comment.