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

In this example below you will see how to do a Эффектные ссылки все вме with some HTML / CSS and Javascript

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

Thumbnail
This awesome code was written by SharovAlex, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright SharovAlex ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<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/SharovAlex/andx42dandx444andx444andx435andx43aandx442andx43dandx44bandx435-andx441andx441andx44bandx43bandx43aandx438-andx432andx441andx435-andx432andx43candx435-aBaBBz */
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);
}

Comments