Използвай вече готовите ресурси и направи нещо по-универсално!

Бутон

html

CSS

* {
                            font-family: Comfortaa;
                        }
                        
                        body {
                            display: flex;
                            justify-content: center;
                        }
                        
                        p {
                            font-size: 16px;
                        }
                        
                        button {
                            display: flex;
                            justify-content: center;
                            align-items:center;
                            border: 0;
                            background-color: #4F9B92;
                            border-radius: 14px;
                            height: 50px;
                            width: 200px;
                            cursor: pointer;
                            transition: all 0.2s linear;
                        }
                        
                        button:hover {
                            border: #4F9B92 solid 2px;
                            background-color: #4f9b926d;
                            box-shadow: 0px 0px 25px 2px rgba(79,155,147,0.8);
                        }

Output

Линк

html

CSS

*{
                            font-family: Comfortaa;
                        }
                        
                        body {
                            text-align: center;
                        }
                        
                        a{
                            position: relative;
                            color: inherit;
                            text-decoration: none;
                            line-height: 24px;
                          }
                          a:before, a:after {
                            content: '';
                            position: absolute;
                            transition: transform .5s ease;
                          }
                        
                        .hover-1 {
                            padding-top: 10px;
                          }
                          .hover-1:before {
                            left: 0;
                            bottom: 0;
                            width: 100%;
                            height: 2px;
                            background: #d15eff;
                            transform: scaleX(0);
                          }
                          .hover-1:hover:before {
                            transform: scaleX(1);
                          }

Output

* {
                            margin: 0;
                            font-family: Comfortaa;
                        }
                        
                        body {
                            height: 495px;
                        }
                        
                        h3 {
                            display: none;
                            transition: all 0.5s ease;
                        }
                        
                        nav {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            flex-direction: column;
                            gap: 4rem;
                            width: 15px;
                            height: 100%;
                            background-color: rgb(45, 44, 46);
                            transition: all 0.3s ease;
                        }
                        
                        nav:hover {
                            width: 125px;
                            transition: all 0.3s ease;
                        }
                        
                        nav:hover h3 {
                            display: block;
                            transition: all 0.5s;
                        }
                        
                        a {
                            position: relative;
                            color: inherit;
                            text-decoration: none;
                            line-height: 24px;
                            color: #f8f8f8;
                          }
                          a:before, a:after{
                            content: '';
                            position: absolute;
                            transition: transform .5s ease;
                          }
                        
                        .hover {
                            padding: 10px;
                            display: inline-flex;
                            overflow: hidden;
                          }
                          .hover:before, .hover:after {
                            left: 0;
                            width: 100%;
                            height: 2px;
                            background: #ffffff;
                          }
                          .hover:before {
                            bottom: 0;
                            transform: translateX(-100%);
                          }
                          .hover:after {
                            top: 0;
                            transform: translateX(100%);
                          }
                          .hover:hover:before, .hover:hover:after {
                            transform: translateX(0);
                          }

Output

Локатор

html

CSS

JavaScript

Output

Фон

html

CSS

* {
                            margin: 0;
                            padding: 0;
                        
                        }
                        
                        body {
                            background-color: rgb(30, 30, 30);
                            display: flex;
                            justify-content: space-evenly;
                            overflow: hidden;
                        }
                        
                        .ball1 {
                            position: absolute;
                            right: 300px;
                            background-color: rgba(0, 255, 255, 0.514);
                            width: 200px;
                            height: 200px;
                            border-radius: 100%;
                            box-shadow: 0px 0px 75px 10px rgb(0, 255, 255);
                            filter: blur(100px);
                            animation: appear1 4s ease forwards;
                            animation-fill-mode: forwards;
                            z-index: 0;
                        }
                        
                        .ball2 {
                            position: absolute;
                            top: 300px;
                            left: 300px;
                            background-color: rgba(230, 0, 255, 0.514);
                            width: 200px;
                            height: 200px;
                            border-radius: 100%;
                            box-shadow: 0px 0px 75px 10px rgb(230, 0, 255);
                            filter: blur(100px);
                            animation: appear2 4s ease forwards;
                            animation-fill-mode: forwards;
                            z-index: 0;
                        }
                        
                        @keyframes appear1 {
                            0%{
                                transform: translate(50%, 50%);
                            }
                            100% {
                                transform: translate(100%, 100%);
                            }
                        }
                        @keyframes appear2 {
                            0%{
                                transform: translate(-50%, -50%);
                            }
                            100% {
                                transform: translate(-100%, -100%);
                            }
                        }

Output

Използвай вече готовите ресурси и направи нещо по-универсално!

Бутон

Линк

Навигация

Локатор

Фон