test
Форк от lirfrnk/test
246 строк · 5.2 Кб
1<html lang="en" dir="ltr">
2<head>
3<meta charset="utf-8">
4<title>Gradient Color Effect | CodingNepal</title>
5<link rel="stylesheet" href="style.css">
6<meta name="viewport" content="width=device-width, initial-scale=1.0">
7<style>
8*{
9margin: 0;
10padding: 0;
11box-sizing: border-box;
12}
13html,body{
14display: grid;
15height: 100%;
16place-items: center;
17background: #000;
18}
19//.center{
20display: flex;
21text-align: center;
22align-items: center;
23justify-content: center;
24}
25.outer{
26position: relative;
27margin: 0 50px;
28background: #111;
29}
30//.button{
31height: 70px;
32width: 220px;
33border-radius: 50px;
34}
35.circle{
36height: 200px;
37width: 200px;
38border-radius: 50%;
39}
40.outer button, .outer span{
41position: absolute;
42top: 50%;
43left: 50%;
44transform: translate(-50%, -50%);
45}
46.outer button{
47background: #111;
48color: #f2f2f2;
49outline: none;
50border: none;
51font-size: 20px;
52z-index: 9;
53letter-spacing: 1px;
54text-transform: uppercase;
55cursor: pointer;
56}
57//.button button{
58height: 60px;
59width: 210px;
60border-radius: 50px;
61}
62.circle button{
63height: 180px;
64width: 180px;
65border-radius: 50%;
66}
67.outer span{
68height: 100%;
69width: 100%;
70background: inherit;
71}
72.button span{
73border-radius: 50px;
74}
75.circle span{
76border-radius: 50%;
77}
78.outer:hover span:nth-child(1){
79filter: blur(7px);
80}
81.outer:hover span:nth-child(2){
82filter: blur(14px);
83}
84.outer:hover{
85background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
86animation: rotate 1.5s linear infinite;
87}
88@keyframes rotate {
890%{
90filter: hue-rotate(0deg);
91}
92100%{
93filter: hue-rotate(360deg);
94}
95}
96@media (max-width: 640px){
97.center{
98flex-wrap: wrap;
99flex-direction: column;
100}
101.outer{
102margin: 50px 0;
103}
104}
105.btn {
106background-color: DodgerBlue; /* Blue background */
107border: none; /* Remove borders */
108color: white; /* White text */
109padding: 12px 16px; /* Some padding */
110font-size: 16px; /* Set a font size */
111cursor: pointer; /* Mouse pointer on hover */
112}
113
114/* Darker background on mouse-over */
115.btn:hover {
116background-color: RoyalBlue;
117}
118@import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');
119body{
120margin: 0;
121padding: 0;
122display: flex;
123height: 100vh;
124align-items: center;
125justify-content: center;
126background:white;
127}
128span{
129position: relative;
130display: inline-flex;
131width: 180px;
132height: 55px;
133margin: 0 15px;
134perspective: 1000px;
135}
136span a{
137font-size: 19px;
138letter-spacing: 1px;
139transform-style: preserve-3d;
140transform: translateZ(-25px);
141transition: transform .25s;
142font-family: 'Montserrat', sans-serif;
143}
144span a:before,
145span a:after{
146position: absolute;
147content: "BUTTON";
148height: 55px;
149width: 180px;
150display: flex;
151align-items: center;
152justify-content: center;
153border: 5px solid black;
154box-sizing: border-box;
155}
156span:nth-child(1) a:before{
157color: #fff;
158background: #000;
159transform: rotateY(0deg) translateZ(25px);
160}
161span:nth-child(1) a:after{
162color: #000;
163transform: rotateX(90deg) translateZ(25px);
164}
165span:nth-child(2) a:before{
166color: #fff;
167background: black;
168transform: rotateX(-90deg) translateZ(25px);
169}
170span:nth-child(2) a:after{
171color: #000;
172transform: rotateY(0deg) translateZ(25px);
173}
174span:nth-child(1) a:hover{
175transform: translateZ(-25px) rotateX(-90deg);
176}
177span:nth-child(2) a:hover{
178transform: translateZ(-25px) rotateX(90deg);
179}
180.button4{
181background-color: #04AA6D;
182border: none;
183color: white;
184padding: 20px;
185text-align: center;
186text-decoration: none;
187display: inline-block;
188font-size: 16px;
189margin: 4px 2px;
190}
191
192.button4 {border-radius: 2px;}
193.button5 {
194background-color: #1c87c9;
195-webkit-border-radius: 60px;
196border-radius: 60px;
197border: none;
198color: #eeeeee;
199cursor: pointer;
200display: inline-block;
201font-family: sans-serif;
202font-size: 20px;
203padding: 5px 15px;
204text-align: center;
205text-decoration: none;
206}
207@keyframes glowing {
2080% {
209background-color: #2ba805;
210box-shadow: 0 0 5px #2ba805;
211}
21250% {
213background-color: #49e819;
214box-shadow: 0 0 20px #49e819;
215}
216100% {
217background-color: #2ba805;
218box-shadow: 0 0 5px #2ba805;
219}
220}
221.button5 {
222animation: glowing 1300ms infinite;
223}
224</style>
225<title>ANIMATED BUTTONS</title>
226</head>
227<body><p></p>
228<div class="outer circle">
229<button>"BUTTON 1"</button>
230<span></span>
231<span></span>
232</div><br>
233<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
234<button>"BUTTON 2"</button>
235<button class="btn"><i class="fa fa-home"></i> Home</button>
236<button class="btn"><i class="fa fa-bars"></i> Menu</button>
237<button class="btn"><i class="fa fa-trash"></i> Trash</button>
238<button class="btn"><i class="fa fa-close"></i> Close</button>
239<button class="btn"><i class="fa fa-folder"></i> Folder</button>
240</div><br>
241<button>"BUTTON 3"</button>
242<span><a href="#"> </a></span>
243<button class="button4">"BUTTON 4"</button>
244<a class="button5" href="#">"BUTTON 5"</a>
245</body>
246</html>
247