teamPARK / holiday-counter-recommend-activity

Go to a project
Toggle navigation Toggle navigation pinning
박규리
6e0179f3 1 parent 9ab42330

Add button and container style

Inline Side-by-side
Showing 1 changed file with 101 additions and 3 deletions
...@@ -34,11 +34,12 @@ h2 { ...@@ -34,11 +34,12 @@ h2 {
34 text-shadow: 4px 2px 2px rgba(178, 104, 180, 0.61); 34 text-shadow: 4px 2px 2px rgba(178, 104, 180, 0.61);
35 letter-spacing: 0.05em; 35 letter-spacing: 0.05em;
36 } 36 }
37 -#activity { 37 +
38 +#detail {
38 width:1000px; 39 width:1000px;
39 height:fit-content; 40 height:fit-content;
40 - border-radius: 10p 10px / 10px 10px; 41 + border-radius: 40px 80px / 80px 40px;
41 - background-color: rgba(197, 97, 201, 0.486); 42 + background-color: rgba(190, 87, 168, 0.39);
42 } 43 }
43 body { 44 body {
44 margin-top: 100px; 45 margin-top: 100px;
...@@ -61,3 +62,100 @@ body { ...@@ -61,3 +62,100 @@ body {
61 border-radius : 20px; 62 border-radius : 20px;
62 background-color: rgb(255, 255, 255); 63 background-color: rgb(255, 255, 255);
63 } 64 }
65 +
66 +/* button style*/
67 +.frame {
68 + width: 90%;
69 + margin: 40px auto;
70 + text-align: center;
71 +}
72 +button {
73 + margin: 20px;
74 +}
75 +.custom-btn {
76 + width: 130px;
77 + height: 40px;
78 + color: #fff;
79 + border-radius: 5px;
80 + padding: 10px 25px;
81 + font-family: 'Lato', sans-serif;
82 + font-weight: 500;
83 + background: transparent;
84 + cursor: pointer;
85 + transition: all 0.3s ease;
86 + position: relative;
87 + display: inline-block;
88 + box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
89 + 7px 7px 20px 0px rgba(0,0,0,.1),
90 + 4px 4px 5px 0px rgba(0,0,0,.1);
91 + outline: none;
92 +}
93 +.btn-12{
94 + position: relative;
95 + right: 20px;
96 + bottom: 20px;
97 + border:none;
98 + box-shadow: none;
99 + width: 130px;
100 + height: 40px;
101 + line-height: 42px;
102 + -webkit-perspective: 230px;
103 + perspective: 230px;
104 +}
105 +.btn-12 span {
106 + background: rgb(0,172,238);
107 +background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%);
108 + display: block;
109 + position: absolute;
110 + width: 130px;
111 + height: 40px;
112 + box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
113 + 7px 7px 20px 0px rgba(0,0,0,.1),
114 + 4px 4px 5px 0px rgba(0,0,0,.1);
115 + border-radius: 5px;
116 + margin:0;
117 + text-align: center;
118 + -webkit-box-sizing: border-box;
119 + -moz-box-sizing: border-box;
120 + box-sizing: border-box;
121 + -webkit-transition: all .3s;
122 + transition: all .3s;
123 +}
124 +.btn-12 span:nth-child(1) {
125 + box-shadow:
126 + -7px -7px 20px 0px #fff9,
127 + -4px -4px 5px 0px #fff9,
128 + 7px 7px 20px 0px #0002,
129 + 4px 4px 5px 0px #0001;
130 + -webkit-transform: rotateX(90deg);
131 + -moz-transform: rotateX(90deg);
132 + transform: rotateX(90deg);
133 + -webkit-transform-origin: 50% 50% -20px;
134 + -moz-transform-origin: 50% 50% -20px;
135 + transform-origin: 50% 50% -20px;
136 +}
137 +.btn-12 span:nth-child(2) {
138 + -webkit-transform: rotateX(0deg);
139 + -moz-transform: rotateX(0deg);
140 + transform: rotateX(0deg);
141 + -webkit-transform-origin: 50% 50% -20px;
142 + -moz-transform-origin: 50% 50% -20px;
143 + transform-origin: 50% 50% -20px;
144 +}
145 +.btn-12:hover span:nth-child(1) {
146 + box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
147 + 7px 7px 20px 0px rgba(0,0,0,.1),
148 + 4px 4px 5px 0px rgba(0,0,0,.1);
149 + -webkit-transform: rotateX(0deg);
150 + -moz-transform: rotateX(0deg);
151 + transform: rotateX(0deg);
152 +}
153 +.btn-12:hover span:nth-child(2) {
154 + box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
155 + 7px 7px 20px 0px rgba(0,0,0,.1),
156 + 4px 4px 5px 0px rgba(0,0,0,.1);
157 + color: transparent;
158 + -webkit-transform: rotateX(-90deg);
159 + -moz-transform: rotateX(-90deg);
160 + transform: rotateX(-90deg);
161 +}
...\ No newline at end of file ...\ No newline at end of file
......