Эффектные ссылки все вме

Анимированные ссылки на CSS

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Эффектные ссылки все вместе</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  
<html lang="ru">
    <head>
        <title>Эффектные ссылки: все вместе</title>
        <meta charset="utf-8">
        <base href="/assets/course76/">
        <link href="//fonts.googleapis.com/css?family=Open+Sans:300,400&subset=latin,cyrillic-ext" rel="stylesheet" type="text/css">
    </head>
    <body>
        <h1>Эффектные ссылки</h1>
        <div class="effect-1">
            <a href="#">Апельсин</a>
        </div>
        <div class="effect-2">
            <a href="#">Виноград</a>
        </div>
        <div class="effect-3">
            <a href="#" data-hover="Лайм">Лайм</a>
        </div>
        <div class="effect-4">
            <a href="#">Киви</a>
        </div>
    </body>
</html>
  
  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
html,
body {
    margin: 0;
    padding: 0;
    font-family: "Open Sans", sans-serif;
    font-size: 22px;
    color: #333333;
    background-color: #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;
    font-weight: 300;
    letter-spacing: 1px;
    outline: none;
}

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

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

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

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

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

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

.effect-2 a {
    padding: 0 20px;
    height: 45px;
    line-height: 45px;
    color: #ffffff;
}

.effect-2 a::before,
.effect-2 a::after {
    content: "";
    position: absolute;
    width: 45px;
    height: 2px;
    background-color: #ffffff;
    opacity: 0.2;
    transition: all 0.3s;
}

.effect-2 a::before {
    top: 0;
    left: 0;
    transform: rotate(90deg);
    transform-origin: 0 0;
}

.effect-2 a::after {
    right: 0;
    bottom: 0;
    transform: rotate(90deg);
    transform-origin: 100% 100%;
}

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

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

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

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

.effect-3 a::before {
    content: attr(data-hover);
    position: absolute;
    color: #ffffff;
    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;
    font-weight: bold;
    color: #237546;
}

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

.effect-4 a::before,
.effect-4 a::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    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);
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( Эффектные ссылки все вме ) is write by Sharov Alexander, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Sharov Alexander