-
Notifications
You must be signed in to change notification settings - Fork 72
/
index.html
executable file
·174 lines (174 loc) · 8.19 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Button Styles for Links | Codrops</title>
<meta name="description" content="Some ideas for CSS-only button hover styles and animations" />
<meta name="keywords" content="button, hover, css, css-only, animation, style, web design" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="https://use.typekit.net/rnz2bks.css">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
<script src="//tympanus.net/codrops/adpacks/analytics.js"></script>
<style>
body #cdawrap {
border: 1px solid #000;
--cda-bottom: auto;
--cda-right: 3.5rem;
--cda-left: auto;
--cda-text-align: right;
--cda-width: 370px;
border-radius: 6px;
padding: 0.75rem 1rem 1rem;
--footer-align: end;
--cda-text-size: 0.875rem;
--cda-footer-fontsize: 0.785rem;
--cda-text-color: #000;
position: absolute;
transform: translateY(-150%);
}
@media screen and (max-width: 800px){
body #cdawrap {
transform: none;
border-radius: 0px;
}
}
</style>
</head>
<body class="demo-1">
<main>
<header class="frame frame--header">
<div class="frame__title-wrap">
<h1 class="frame__title">CSS Button Hover Styles</h1>
<p class="frame__tagline">A collection of simple and subtle CSS-only hover animations for buttons.</p>
<div class="frame__related">
<h3>More in this collection</h3>
<p><a href="https://tympanus.net/Development/LineHoverStyles/">CSS Line Hover Animations for Links</a></p>
</div>
</div>
<nav class="frame__links">
<a href="http://tympanus.net/Development/LineHoverStyles/">Previous demo</a>
<a href="https://tympanus.net/codrops/?p=53413">Article</a>
<a href="https://github.com/codrops/ButtonHoverStyles/"><svg class="github" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub icon</title><path fill="#000" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a>
</nav>
</header>
<ol class="content">
<li class="content__item">
<button class="button button--pan"><span>Upload</span></button>
</li>
<li class="content__item">
<button class="button button--hyperion"><span><span>New page</span></span></button>
</li>
<li class="content__item">
<button class="button button--mimas"><span>Render</span></button>
</li>
<li class="content__item">
<button class="button button--atlas">
<span>Subscribe</span>
<div class="marquee" aria-hidden="true">
<div class="marquee__inner">
<span>Subscribe</span>
<span>Subscribe</span>
<span>Subscribe</span>
<span>Subscribe</span>
</div>
</div>
</button>
</li>
<li class="content__item">
<button class="button button--kari">
<span>Send Love</span>
<div class="marquee" aria-hidden="true">
<div class="marquee__inner">
<span>Send Love</span>
<span>Send Love</span>
<span>Send Love</span>
<span>Send Love </span>
</div>
</div>
</button>
</li>
<li class="content__item">
<button class="button button--pandora"><span>Activate Card</span></button>
</li>
<li class="content__item">
<button class="button button--janus"><span>Reshape</span></button>
</li>
<li class="content__item">
<button class="button button--anthe"><span>Initialize</span></button>
</li>
<li class="content__item">
<button class="button button--pallene">Hide Details</button>
</li>
<li class="content__item">
<button class="button button--telesto"><span><span>Verify</span></span></button>
</li>
<li class="content__item">
<button class="button button--calypso"><span>Export File</span></button>
</li>
<li class="content__item">
<button class="button button--skoll"><span><span>Add</span></span></button>
</li>
<li class="content__item">
<button class="button button--greip"><span><span>Next</span></span></button>
</li>
<li class="content__item">
<button class="button button--dione"><span>Resize</span></button>
</li>
<li class="content__item">
<button class="button button--helene"><span><span>Sell</span></span></button>
</li>
<li class="content__item">
<button class="button button--rhea"><span>Delete</span></button>
</li>
<li class="content__item">
<button class="button button--narvi"><span><span>Open chat</span></span></button>
</li>
<li class="content__item">
<button class="button button--hati"><span>Activate</span></button>
</li>
<li class="content__item">
<button class="button button--bestia">
<div class="button__bg"></div><span>Locate</span>
</button>
</li>
<li class="content__item">
<button class="button button--surtur">
<svg class="textcircle" viewBox="0 0 500 500">
<title>Projects & client work 2020</title>
<defs><path id="textcircle" d="M250,400 a150,150 0 0,1 0,-300a150,150 0 0,1 0,300Z"
/></defs>
<text><textPath xlink:href="#textcircle" aria-label="Projects & client work 2020" textLength="900">Projects & client work 2020</textPath></text>
</svg>
<svg aria-hidden="true" class="eye" width="70" height="70" viewBox="0 0 70 70" xmlns="http://www.w3.org/2000/svg">
<path class="eye__outer" d="M10.5 35.308c5.227-7.98 14.248-13.252 24.5-13.252s19.273 5.271 24.5 13.252c-5.227 7.98-14.248 13.253-24.5 13.253s-19.273-5.272-24.5-13.253z"/>
<path class="eye__lashes-up" d="M35 8.802v8.836M49.537 11.383l-3.31 8.192M20.522 11.684l3.31 8.192" />
<path class="eye__lashes-down" d="M35 61.818v-8.836 8.836zM49.537 59.237l-3.31-8.193 3.31 8.193zM20.522 58.936l3.31-8.193-3.31 8.193z" />
<circle class="eye__iris" cx="35" cy="35.31" r="5.221" />
<circle class="eye__inner" cx="35" cy="35.31" r="10.041" />
</svg>
</button>
</li>
<li class="content__item">
<button class="button button--fenrir">
<svg aria-hidden="true" class="progress" width="70" height="70" viewbox="0 0 70 70">
<path class="progress__circle" d="m35,2.5c17.955803,0 32.5,14.544199 32.5,32.5c0,17.955803 -14.544197,32.5 -32.5,32.5c-17.955803,0 -32.5,-14.544197 -32.5,-32.5c0,-17.955801 14.544197,-32.5 32.5,-32.5z" />
<path class="progress__path" d="m35,2.5c17.955803,0 32.5,14.544199 32.5,32.5c0,17.955803 -14.544197,32.5 -32.5,32.5c-17.955803,0 -32.5,-14.544197 -32.5,-32.5c0,-17.955801 14.544197,-32.5 32.5,-32.5z" pathLength="1" />
</svg>
<span>Go</span>
</button>
</li>
</ol>
<section class="related">
<h3>More in this collection</h3>
<a href="https://tympanus.net/Development/LineHoverStyles/">CSS Line Hover Animations for Links</a>
</section>
<footer class="frame frame--footer">
<div class="frame__author"><a href="https://twitter.com/codrops">@codrops</a></div>
</footer>
</main>
<script src="https://tympanus.net/codrops/adpacks/cda.js"></script>
</body>
</html>