Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 88955d6

Browse files
chapter 2 - 2.3 examples uploaded
chapter 2 - 2.3 examples uploaded
1 parent 8d2681f commit 88955d6

File tree

2 files changed

+107
-0
lines changed

2 files changed

+107
-0
lines changed
Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
9+
<title>2.3-css-var-demo-transform-transition.html</title>
10+
11+
<link rel="stylesheet" href="2.3-style-css-var-demo-transform-transition.css">
12+
13+
</head>
14+
15+
<body>
16+
17+
<div class="container">
18+
19+
<h1 class="top-heading-text" id="topHeadingText">2. CSS Variable Demo</h1>
20+
21+
<h2 class="subheading-text" id="subHeadingText">2.3 - Hover effect with Fallback support</h2>
22+
23+
<!-- <article class="info-text">
24+
- Any CSS variables defined in the stylesheet can be `accessed` by using `var()` function <br/>
25+
- The CSS `var()` function can be used to insert the value of a custom property or a CSS variable <br/>
26+
- The var() function cannot be used in any property names, selectors or anything else besides property values setting or providing fallback value support<br/> <br/>
27+
</article> -->
28+
29+
<nav class="button-container">
30+
<div class="button btn-default">btn-default </div>
31+
<div class="button btn-primary">btn-primary </div>
32+
<div class="button btn-secondary">btn-secondary </div>
33+
<div class="button btn-success">btn-success </div>
34+
<div class="button btn-danger">btn-danger </div>
35+
<div class="button btn-info">btn-info </div>
36+
<div class="button btn-warning">btn-warning </div>
37+
<div class="button btn-light">btn-light </div>
38+
<div class="button btn-dark">btn-dark </div>
39+
</nav>
40+
41+
</div>
42+
43+
</body>
44+
45+
</html>
Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
:root {
2+
--main-font-family: Verdana;
3+
--animate-translatex-right: translateX(50px);
4+
}
5+
6+
body {
7+
font-family: var(--main-font-family);
8+
}
9+
10+
.button {
11+
color: var(--main-theme-color, #000000); /* black is fallback color */
12+
border: 2px solid var(--main-theme-color, #000000);
13+
14+
box-shadow: 4px 4px 2px 0px rgba(0, 0, 0, 0.3);
15+
width:200px; padding: 5px; text-align: center; border-radius: 5px; cursor: pointer; margin-bottom: 10px; transition: all 0.25s ease-in-out;
16+
}
17+
18+
.button:hover {
19+
color: #ffffff;
20+
border: 2px solid var(--main-theme-color, #000000);
21+
background-color: var(--main-theme-color, #000000);
22+
box-shadow: 0px 0px 7px 2px var(--main-theme-color, #000000);
23+
transform: var(--animate-translatex-right);
24+
25+
transition: all 0.35s ease-in-out;
26+
}
27+
28+
.btn-default {
29+
/* no --main-theme-color defined for default button, so it will have theme color as fallback black color */
30+
}
31+
32+
.btn-primary{
33+
--main-theme-color: #007bff;
34+
}
35+
36+
.btn-secondary{
37+
--main-theme-color: #6c757d;
38+
}
39+
40+
.btn-danger{
41+
--main-theme-color: #dc3545;
42+
}
43+
44+
.btn-success{
45+
--main-theme-color: #28a745;
46+
}
47+
48+
.btn-info{
49+
--main-theme-color: #17a2b8;
50+
}
51+
52+
.btn-warning{
53+
--main-theme-color: #ffc107;
54+
}
55+
56+
.btn-light{
57+
--main-theme-color: #dedede
58+
}
59+
60+
.btn-dark{
61+
--main-theme-color: #343a40;
62+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /