├── README.md
├── script.js
├── index.html
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # HTML-CSS-JS-Button-Fades-In
2 |
3 |
4 |
5 | https://user-images.githubusercontent.com/42389395/184541597-530fb6a8-779c-4408-8922-3f4ea7a2df49.mov
6 |
7 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | $('.js-clearSearchBox').css('opacity', '0');
2 |
3 | $('.js-searchBox-input').focus(function() {
4 | $('.searchBox-fakeInput').toggleClass("is-focussed");
5 | });
6 |
7 | $('.js-searchBox-input').keyup(function() {
8 | if ($(this).val() !='' ) {
9 | $('.js-clearSearchBox').css('opacity', '1');
10 | } else {
11 | $('.js-clearSearchBox').css('opacity', '0');
12 | };
13 |
14 | $(window).bind('keydown', function(e) {
15 | if(e.keyCode === 27) {
16 | $('.js-searchBox-input').val('');
17 | };
18 | });
19 | });
20 | // click the button
21 | $('.js-clearSearchBox').click(function() {
22 | $('.js-searchBox-input').val('');
23 | $('.js-searchBox-input').focus();
24 | $('.js-clearSearchBox').css('opacity', '0');
25 | });
26 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Test
6 |
7 |
8 |
9 |
10 |
11 |
12 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css');
2 |
3 |
4 | body, html {
5 | display: flex;
6 | align-items: center;
7 | justify-content: center;
8 | height: 100%;
9 | background: #f2eee3;
10 | }
11 | form {
12 | width: 30rem;
13 | padding: 1rem;
14 | background: #f2eee3;
15 | font-size: 1.5rem;
16 | }
17 | h1 {
18 | color: #000;
19 | margin: 0 0 1rem;
20 | padding: 0;
21 | text-align: center;
22 | }
23 |
24 | .searchBox-fakeInput {
25 | background: white;
26 | border: 1px solid #d6dadc;
27 | border-radius: 3px;
28 | display: table;
29 | }
30 |
31 | .searchBox-fakeInput.is-focussed {
32 | border: 2px solid cyan !important;
33 | }
34 | .searchBox-inputWrapper,
35 | .searchBox-clearWrapper {
36 | width: 100%;
37 | display: table-cell;
38 | vertical-align: middle;
39 | }
40 | .searchBox-input {
41 | background-color: transparent;
42 | border: none;
43 | box-shadow: none;
44 | outline: none;
45 | width: 100%;
46 | padding: 0.5rem;
47 | font-size: inherit;
48 | }
49 | .searchBox-input:focus {
50 | outline: none;
51 | background: #FFF;
52 | box-shadow: none;
53 | }
54 | .searchBox-clearWrapper {
55 | padding-right: 0.5rem;
56 | }
57 | .searchBox-clear {
58 | color: #CCC;
59 | padding: 0;
60 | cursor: pointer;
61 | font-size: inherit;
62 | cursor: pointer;
63 | line-height: 1.5;
64 | -webkit-transition: all 3s ease-in-out;
65 | -moz-transition: all 0.3s ease-in-out;
66 | -o-transition: all 0.3s ease-in-out;
67 | transition: all 0.3s ease-in-out;
68 | }
69 | .searchBox-clearInput:hover {
70 | color: #AAA;
71 | }
72 |
73 | .js-clearSearchBox {
74 | color: red;
75 | }
76 |
--------------------------------------------------------------------------------