test

Animated buttons
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
*{
9
  margin: 0;
10
  padding: 0;
11
  box-sizing: border-box;
12
}
13
html,body{
14
  display: grid;
15
  height: 100%;
16
  place-items: center;
17
  background: #000;
18
}
19
//.center{
20
  display: flex;
21
  text-align: center;
22
  align-items: center;
23
  justify-content: center;
24
}
25
.outer{
26
  position: relative;
27
  margin: 0 50px;
28
  background: #111;
29
}
30
//.button{
31
  height: 70px;
32
  width: 220px;
33
  border-radius: 50px;
34
}
35
.circle{
36
  height: 200px;
37
  width: 200px;
38
  border-radius: 50%;
39
}
40
.outer button, .outer span{
41
  position: absolute;
42
  top: 50%;
43
  left: 50%;
44
  transform: translate(-50%, -50%);
45
}
46
.outer button{
47
  background: #111;
48
  color: #f2f2f2;
49
  outline: none;
50
  border: none;
51
  font-size: 20px;
52
  z-index: 9;
53
  letter-spacing: 1px;
54
  text-transform: uppercase;
55
  cursor: pointer;
56
}
57
//.button button{
58
  height: 60px;
59
  width: 210px;
60
  border-radius: 50px;
61
}
62
.circle button{
63
  height: 180px;
64
  width: 180px;
65
  border-radius: 50%;
66
}
67
.outer span{
68
  height: 100%;
69
  width: 100%;
70
  background: inherit;
71
}
72
.button span{
73
  border-radius: 50px;
74
}
75
.circle span{
76
  border-radius: 50%;
77
}
78
.outer:hover span:nth-child(1){
79
  filter: blur(7px);
80
}
81
.outer:hover span:nth-child(2){
82
  filter: blur(14px);
83
}
84
.outer:hover{
85
  background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
86
  animation: rotate 1.5s linear infinite;
87
}
88
@keyframes rotate {
89
  0%{
90
    filter: hue-rotate(0deg);
91
  }
92
  100%{
93
    filter: hue-rotate(360deg);
94
  }
95
}
96
@media (max-width: 640px){
97
  .center{
98
    flex-wrap: wrap;
99
    flex-direction: column;
100
  }
101
  .outer{
102
    margin: 50px 0;
103
  }
104
}
105
.btn {
106
  background-color: DodgerBlue; /* Blue background */
107
  border: none; /* Remove borders */
108
  color: white; /* White text */
109
  padding: 12px 16px; /* Some padding */
110
  font-size: 16px; /* Set a font size */
111
  cursor: pointer; /* Mouse pointer on hover */
112
}
113

114
/* Darker background on mouse-over */
115
.btn:hover {
116
  background-color: RoyalBlue;
117
}
118
@import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');
119
body{
120
  margin: 0;
121
  padding: 0;
122
  display: flex;
123
  height: 100vh;
124
  align-items: center;
125
  justify-content: center;
126
  background:white;
127
}
128
span{
129
  position: relative;
130
  display: inline-flex;
131
  width: 180px;
132
  height: 55px;
133
  margin: 0 15px;
134
  perspective: 1000px;
135
}
136
span a{
137
  font-size: 19px;
138
  letter-spacing: 1px;
139
  transform-style: preserve-3d;
140
  transform: translateZ(-25px);
141
  transition: transform .25s;
142
  font-family: 'Montserrat', sans-serif;
143
}
144
span a:before,
145
span a:after{
146
  position: absolute;
147
  content: "BUTTON";
148
  height: 55px;
149
  width: 180px;
150
  display: flex;
151
  align-items: center;
152
  justify-content: center;
153
  border: 5px solid black;
154
  box-sizing: border-box;
155
}
156
span:nth-child(1) a:before{
157
  color: #fff;
158
  background: #000;
159
  transform: rotateY(0deg) translateZ(25px);
160
}
161
span:nth-child(1) a:after{
162
  color: #000;
163
  transform: rotateX(90deg) translateZ(25px);
164
}
165
span:nth-child(2) a:before{
166
  color: #fff;
167
  background: black;
168
  transform: rotateX(-90deg) translateZ(25px);
169
}
170
span:nth-child(2) a:after{
171
  color: #000;
172
  transform: rotateY(0deg) translateZ(25px);
173
}
174
span:nth-child(1) a:hover{
175
  transform: translateZ(-25px) rotateX(-90deg);
176
}
177
span:nth-child(2) a:hover{
178
  transform: translateZ(-25px) rotateX(90deg);
179
}
180
.button4{
181
  background-color: #04AA6D;
182
  border: none;
183
  color: white;
184
  padding: 20px;
185
  text-align: center;
186
  text-decoration: none;
187
  display: inline-block;
188
  font-size: 16px;
189
  margin: 4px 2px;
190
}
191

192
.button4 {border-radius: 2px;}
193
 .button5 {
194
        background-color: #1c87c9;
195
        -webkit-border-radius: 60px;
196
        border-radius: 60px;
197
        border: none;
198
        color: #eeeeee;
199
        cursor: pointer;
200
        display: inline-block;
201
        font-family: sans-serif;
202
        font-size: 20px;
203
        padding: 5px 15px;
204
        text-align: center;
205
        text-decoration: none;
206
      }
207
      @keyframes glowing {
208
        0% {
209
          background-color: #2ba805;
210
          box-shadow: 0 0 5px #2ba805;
211
        }
212
        50% {
213
          background-color: #49e819;
214
          box-shadow: 0 0 20px #49e819;
215
        }
216
        100% {
217
          background-color: #2ba805;
218
          box-shadow: 0 0 5px #2ba805;
219
        }
220
      }
221
      .button5 {
222
        animation: 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
test

Использование cookies
