Taohedul Islam
1569
This is redesign page of google search page using newmorphic ui. here is Neumorphism Button, Neumorphism text box, Neumorphism card an this full. i hope you enjoy this code.
<div id="GOOGLE">
<div class="md-select">
<button type="button" class="ng-binding">English </button>
</div>
<button class="negara">
<svg height="15" width="15" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path d="M256,0C156.748,0,76,80.748,76,180c0,33.534,9.289,66.26,26.869,94.652l142.885,230.257c2.737,4.411,7.559,7.091,12.745,7.091c0.04,0,0.079,0,0.119,0c5.231-0.041,10.063-2.804,12.75-7.292L410.611,272.22C427.221,244.428,436,212.539,436,180C436,80.748,355.252,0,256,0z M384.866,256.818L258.272,468.186l-129.905-209.34C113.734,235.214,105.8,207.95,105.8,180c0-82.71,67.49-150.2,150.2-150.2S406.1,97.29,406.1,180C406.1,207.121,398.689,233.688,384.866,256.818z" />
<path d="M256,90c-49.626,0-90,40.374-90,90c0,49.309,39.717,90,90,90c50.903,0,90-41.233,90-90C346,130.374,305.626,90,256,90z M256,240.2c-33.257,0-60.2-27.033-60.2-60.2c0-33.084,27.116-60.2,60.2-60.2s60.1,27.116,60.1,60.2C316.1,212.683,289.784,240.2,256,240.2z" />
</svg> Indonesia</button>
<button class="setting">
<svg width="20" height="20" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Iconly/Light/Setting" stroke="none" stroke-width="1" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="Setting" transform="translate(2.500000, 1.500000)" stroke="#200E32" stroke-width="1.5">
<path d="M18.3066362,6.12356982 L17.6842106,5.04347829 C17.1576365,4.12955711 15.9906873,3.8142761 15.0755149,4.33867279 L15.0755149,4.33867279 C14.6398815,4.59529992 14.1200613,4.66810845 13.6306859,4.54104256 C13.1413105,4.41397667 12.7225749,4.09747295 12.4668193,3.66132725 C12.3022855,3.38410472 12.2138742,3.06835005 12.2105264,2.74599544 L12.2105264,2.74599544 C12.2253694,2.22917739 12.030389,1.72835784 11.6700024,1.3576252 C11.3096158,0.986892553 10.814514,0.777818938 10.2974829,0.778031878 L9.04347831,0.778031878 C8.53694532,0.778031878 8.05129106,0.97987004 7.69397811,1.33890085 C7.33666515,1.69793166 7.13715288,2.18454839 7.13958814,2.69107553 L7.13958814,2.69107553 C7.12457503,3.73688099 6.27245786,4.57676682 5.22654465,4.57665906 C4.90419003,4.57331126 4.58843537,4.48489995 4.31121284,4.32036615 L4.31121284,4.32036615 C3.39604054,3.79596946 2.22909131,4.11125048 1.70251717,5.02517165 L1.03432495,6.12356982 C0.508388616,7.03634945 0.819378585,8.20256183 1.72997713,8.73226549 L1.72997713,8.73226549 C2.32188101,9.07399614 2.68650982,9.70554694 2.68650982,10.3890161 C2.68650982,11.0724852 2.32188101,11.704036 1.72997713,12.0457667 L1.72997713,12.0457667 C0.820534984,12.5718952 0.509205679,13.7352837 1.03432495,14.645309 L1.03432495,14.645309 L1.6659039,15.7345539 C1.9126252,16.1797378 2.3265816,16.5082503 2.81617164,16.6473969 C3.30576167,16.7865435 3.83061824,16.7248517 4.27459956,16.4759726 L4.27459956,16.4759726 C4.71105863,16.2212969 5.23116727,16.1515203 5.71931837,16.2821523 C6.20746948,16.4127843 6.62321383,16.7330005 6.87414191,17.1716248 C7.03867571,17.4488473 7.12708702,17.764602 7.13043482,18.0869566 L7.13043482,18.0869566 C7.13043482,19.1435014 7.98693356,20.0000001 9.04347831,20.0000001 L10.2974829,20.0000001 C11.3504633,20.0000001 12.2054882,19.1490783 12.2105264,18.0961099 L12.2105264,18.0961099 C12.2080776,17.5879925 12.4088433,17.0999783 12.7681408,16.7406809 C13.1274382,16.3813834 13.6154524,16.1806176 14.1235699,16.1830664 C14.4451523,16.1916732 14.7596081,16.2797208 15.0389017,16.4393593 L15.0389017,16.4393593 C15.9516813,16.9652957 17.1178937,16.6543057 17.6475973,15.7437072 L17.6475973,15.7437072 L18.3066362,14.645309 C18.5617324,14.2074528 18.6317479,13.6859659 18.5011783,13.1963297 C18.3706086,12.7066935 18.0502282,12.2893121 17.6109841,12.0366133 L17.6109841,12.0366133 C17.17174,11.7839145 16.8513595,11.3665332 16.7207899,10.876897 C16.5902202,10.3872608 16.6602358,9.86577384 16.9153319,9.42791767 C17.0812195,9.13829096 17.3213574,8.89815312 17.6109841,8.73226549 L17.6109841,8.73226549 C18.5161253,8.20284891 18.8263873,7.04344892 18.3066362,6.13272314 L18.3066362,6.13272314 L18.3066362,6.12356982 Z" id="Path_33946"></path>
<circle id="Ellipse_737" cx="9.67505726" cy="10.3890161" r="2.63615562"></circle>
</g>
</g>
</svg>
</button>
<button class="info">
<svg width="18" height="18" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path d="M437.02,74.98C388.667,26.629,324.38,0,256,0S123.333,26.629,74.98,74.98C26.629,123.333,0,187.62,0,256s26.629,132.667,74.98,181.02C123.333,485.371,187.62,512,256,512s132.667-26.629,181.02-74.98C485.371,388.667,512,324.38,512,256S485.371,123.333,437.02,74.98z M256,482C131.383,482,30,380.617,30,256S131.383,30,256,30s226,101.383,226,226S380.617,482,256,482z" />
<path d="M256,80c-30.327,0-55,24.673-55,55c0,30.327,24.673,55,55,55c30.327,0,55-24.673,55-55C311,104.673,286.327,80,256,80z M256,160c-13.785,0-25-11.215-25-25c0-13.785,11.215-25,25-25c13.785,0,25,11.215,25,25C281,148.785,269.785,160,256,160z" />
<path d="M306,400V220H186v30h20v150h-20v30h140v-30H306z M276,400h-40V250h40V400z" />
</svg>
</button>
<div id="thrga">
<div class="infoo">
<svg height="13" width="13" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 477.867 477.867" fill="525252" style="enable-background:new 0 0 477.867 477.867;" xml:space="preserve">
<path d="M460.8,68.267H17.067C7.641,68.267,0,75.908,0,85.333v307.2c0,9.426,7.641,17.067,17.067,17.067H460.8
c9.426,0,17.067-7.641,17.067-17.067v-307.2C477.867,75.908,470.226,68.267,460.8,68.267z M432.811,102.4L238.933,251.529
L45.056,102.4H432.811z M443.733,375.467h-409.6V137.062L228.54,286.6c6.13,4.707,14.657,4.707,20.787,0l194.406-149.538V375.467z
" /> </svg>
</div>
<div class="infoo">
<svg height="13" width="13" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 360.49 360.49" fill="#525252" style="enable-background:new 0 0 360.49 360.49;" xml:space="preserve">
<path d="M96.653,0H13.061C7.29,0,2.612,4.678,2.612,10.449v83.592c0,5.771,4.678,10.449,10.449,10.449h83.592
c5.771,0,10.449-4.678,10.449-10.449V10.449C107.102,4.678,102.424,0,96.653,0z" />
<path d="M222.041,0h-83.592C132.678,0,128,4.678,128,10.449v83.592c0,5.771,4.678,10.449,10.449,10.449h83.592
c5.771,0,10.449-4.678,10.449-10.449V10.449C232.49,4.678,227.812,0,222.041,0z" />
<path d="M96.653,125.388H13.061c-5.771,0-10.449,4.678-10.449,10.449v83.592c0,5.771,4.678,10.449,10.449,10.449h83.592
c5.771,0,10.449-4.678,10.449-10.449v-83.592C107.102,130.066,102.424,125.388,96.653,125.388z" />
<path d="M222.041,125.388h-83.592c-5.771,0-10.449,4.678-10.449,10.449v83.592c0,5.771,4.678,10.449,10.449,10.449h83.592
c5.771,0,10.449-4.678,10.449-10.449v-83.592C232.49,130.066,227.812,125.388,222.041,125.388z" />
<path d="M347.429,0h-83.592c-5.771,0-10.449,4.678-10.449,10.449v83.592c0,5.771,4.678,10.449,10.449,10.449h83.592
c5.771,0,10.449-4.678,10.449-10.449V10.449C357.878,4.678,353.199,0,347.429,0z" />
<path d="M347.429,125.388h-83.592c-5.771,0-10.449,4.678-10.449,10.449v83.592c0,5.771,4.678,10.449,10.449,10.449h83.592
c5.771,0,10.449-4.678,10.449-10.449v-83.592C357.878,130.066,353.199,125.388,347.429,125.388z" />
<path d="M96.653,256H13.061c-5.771,0-10.449,4.678-10.449,10.449v83.592c0,5.771,4.678,10.449,10.449,10.449h83.592
c5.771,0,10.449-4.678,10.449-10.449v-83.592C107.102,260.678,102.424,256,96.653,256z" />
<path d="M222.041,256h-83.592c-5.771,0-10.449,4.678-10.449,10.449v83.592c0,5.771,4.678,10.449,10.449,10.449h83.592
c5.771,0,10.449-4.678,10.449-10.449v-83.592C232.49,260.678,227.812,256,222.041,256z" />
<path d="M347.429,256h-83.592c-5.771,0-10.449,4.678-10.449,10.449v83.592c0,5.771,4.678,10.449,10.449,10.449h83.592
c5.771,0,10.449-4.678,10.449-10.449v-83.592C357.878,260.678,353.199,256,347.429,256z" /> </svg>
</div>
<p style="opacity:0;">d</p> <img src="https://avatars3.githubusercontent.com/u/41579215?s=400&u=89a9c54473cf350bb38c5f9c691965842fbffb43&v=4"></img>
</div>
<form class="search-form">
<input type="search" value="" placeholder="Search Google or type a URL" class="search-input">
<button type="submit" class="search-button">
<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg">
<g>
<path d="m120 256c0-25.367 6.989-49.13 19.131-69.477v-86.308h-86.308c-34.255 44.488-52.823 98.707-52.823 155.785s18.568 111.297 52.823 155.785h86.308v-86.308c-12.142-20.347-19.131-44.11-19.131-69.477z" fill="#fbbd00" />
<path d="m256 392-60 60 60 60c57.079 0 111.297-18.568 155.785-52.823v-86.216h-86.216c-20.525 12.186-44.388 19.039-69.569 19.039z" fill="#0f9d58" />
<path d="m139.131 325.477-86.308 86.308c6.782 8.808 14.167 17.243 22.158 25.235 48.352 48.351 112.639 74.98 181.019 74.98v-120c-49.624 0-93.117-26.72-116.869-66.523z" fill="#31aa52" />
<path d="m512 256c0-15.575-1.41-31.179-4.192-46.377l-2.251-12.299h-249.557v120h121.452c-11.794 23.461-29.928 42.602-51.884 55.638l86.216 86.216c8.808-6.782 17.243-14.167 25.235-22.158 48.352-48.353 74.981-112.64 74.981-181.02z" fill="#3c79e6" />
<path d="m352.167 159.833 10.606 10.606 84.853-84.852-10.606-10.606c-48.352-48.352-112.639-74.981-181.02-74.981l-60 60 60 60c36.326 0 70.479 14.146 96.167 39.833z" fill="#cf2d48" />
<path d="m256 120v-120c-68.38 0-132.667 26.629-181.02 74.98-7.991 7.991-15.376 16.426-22.158 25.235l86.308 86.308c23.753-39.803 67.246-66.523 116.87-66.523z" fill="#eb4132" />
</g>
</svg>
</button>
<div class="search-option">
<div>
<input name="type" type="radio" value="type-special" id="type-special" checked="">
<label for="type-voice">
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg72699" viewBox="0 0 300 429.48716" height="25px" width="25px">
<defs id="defs72701">
<clipPath clipPathUnits="userSpaceOnUse" id="clipPath17476">
<path d="m 640.547,230.558 11.505,0 0,16.521 -11.505,0 0,-16.521 z" id="path17478" /> </clipPath>
</defs>
<metadata id="metadata72704">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g transform="translate(-325.45196,-141.38025)" id="layer1">
<g id="g17472" transform="matrix(25.816883,0,0,-25.816883,-16209.975,6521.6873)">
<g id="g17474" clip-path="url(#clipPath17476)">
<g id="g17480" transform="translate(646.3034,236.3789)">
<path d="M 0,0 C 1.364,0 2.461,1.106 2.461,2.469 L 2.469,8.231 C 2.469,9.596 1.364,10.7 0,10.7 -1.363,10.7 -2.469,9.596 -2.469,8.231 l 0,-5.762 C -2.469,1.106 -1.363,0 0,0" style="fill:#4285f4;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path17482" /> </g>
<g id="g17484" transform="translate(645.4803,233.1492)">
<path d="m 0,0 0,0 0,-2.59 1.646,0 0,2.562 C 1.378,-0.066 1.107,-0.064 0.828,-0.064 0.547,-0.064 0.271,-0.039 0,0" style="fill:#34a853;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path17486" /> </g>
<g id="g17488" transform="translate(643.3809,235.9115)">
<path d="m 0,0 c -0.735,0.742 -1.191,1.652 -1.191,2.878 l -1.643,0 c 0,-1.646 0.644,-2.999 1.685,-4.041 l 0.012,0.011 c -0.004,0.004 -0.008,0.007 -0.012,0.011 L 0,0 Z" style="fill:#fbbc05;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path17490" /> </g>
<g id="g17492" transform="translate(650.4081,238.79)">
<path d="m 0,0 c 0,-2.058 -1.829,-4.086 -4.102,-4.086 -1.137,0 -2.166,0.476 -2.911,1.222 L -7.027,-2.878 -8.176,-4.02 c 0.004,-0.003 0.008,-0.007 0.012,-0.01 0.857,-0.854 1.982,-1.429 3.236,-1.611 0.272,-0.039 0.547,-0.064 0.828,-0.064 0.28,0 0.55,-0.002 0.818,0.036 C -0.491,-5.27 1.643,-2.881 1.643,0 L 0,0 Z" style="fill:#ea4335;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path17494" /> </g>
</g>
</g>
</g>
</svg> <span>Search By Voice</span> </label>
</div>
</div>
</form>
<div id="empat">
<a href='#' class="menu">
<svg viewBox="0 0 469.33333 469.33333" fill="#555" xmlns="http://www.w3.org/2000/svg">
<path d="m437.332031 192h-160v-160c0-17.664062-14.335937-32-32-32h-21.332031c-17.664062 0-32 14.335938-32 32v160h-160c-17.664062 0-32 14.335938-32 32v21.332031c0 17.664063 14.335938 32 32 32h160v160c0 17.664063 14.335938 32 32 32h21.332031c17.664063 0 32-14.335937 32-32v-160h160c17.664063 0 32-14.335937 32-32v-21.332031c0-17.664062-14.335937-32-32-32zm0 0" />
</svg>
</a>
<a href='#' class="menu">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 477.867 477.867" fill="#333" style="enable-background:new 0 0 477.867 477.867;" xml:space="preserve">
<path d="M426.667,68.267H51.2c-28.277,0-51.2,22.923-51.2,51.2V358.4c0,28.277,22.923,51.2,51.2,51.2h375.467
c28.277,0,51.2-22.923,51.2-51.2V119.467C477.867,91.19,454.944,68.267,426.667,68.267z M443.733,358.4
c0,9.426-7.641,17.067-17.067,17.067H51.2c-9.426,0-17.067-7.641-17.067-17.067v-10.001l68.267-68.267l56.201,56.201
c6.664,6.663,17.468,6.663,24.132,0l141.534-141.534l119.467,119.467V358.4z M443.733,266.001L336.333,158.601
c-6.664-6.663-17.468-6.663-24.132,0L170.667,300.134l-56.201-56.201c-6.664-6.663-17.468-6.663-24.132,0l-56.201,56.201V119.467
c0-9.426,7.641-17.067,17.067-17.067h375.467c9.426,0,17.067,7.641,17.067,17.067V266.001z" />
<path d="M153.6,136.533c-28.277,0-51.2,22.923-51.2,51.2c0,28.277,22.923,51.2,51.2,51.2s51.2-22.923,51.2-51.2
C204.8,159.456,181.877,136.533,153.6,136.533z M153.6,204.8c-9.426,0-17.067-7.641-17.067-17.067
c0-9.426,7.641-17.067,17.067-17.067s17.067,7.641,17.067,17.067C170.667,197.159,163.026,204.8,153.6,204.8z" /> </svg>
</a>
<a href='#' class="menu">
<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Iconly/Light/Bookmark" stroke="none" stroke-width="1" fill="transparent" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="Bookmark" transform="translate(3.500000, 2.000000)" stroke="#333" stroke-width="1.5">
<path d="M8.16475977,16.631579 L2.23340962,19.881007 C1.75983818,20.1271252 1.17640846,19.9529066 0.915331812,19.4874143 L0.915331812,19.4874143 C0.839799009,19.3432192 0.79904873,19.1833528 0.796338677,19.0205951 L0.796338677,4.62242565 C0.796338677,1.87643022 2.67276889,0.778032041 5.37299774,0.778032041 L11.7162472,0.778032041 C14.3340962,0.778032041 16.2929063,1.80320367 16.2929063,4.43935929 L16.2929063,19.0205951 C16.2929063,19.2803494 16.1897192,19.5294649 16.0060452,19.713139 C15.8223711,19.8968131 15.5732556,20.0000001 15.3135012,20.0000001 C15.1478164,19.9973723 14.9849578,19.9566576 14.8375287,19.881007 L8.86956526,16.631579 C8.64965001,16.5127732 8.38467502,16.5127732 8.16475977,16.631579 Z" id="Path_33968"></path>
<line x1="4.86956524" y1="7.3226545" x2="12.1647598" y2="7.3226545" id="Line_209"></line>
</g>
</g>
</svg>
</a>
<a href='#' class="menu">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 368 368" style="enable-background:new 0 0 368 368;" xml:space="preserve">
<path d="M184,0C82.536,0,0,82.544,0,184s82.536,184,184,184s184-82.544,184-184S285.464,0,184,0z M184,352
c-92.632,0-168-75.36-168-168S91.368,16,184,16s168,75.36,168,168S276.632,352,184,352z" />
<path d="M296,176H72c-4.424,0-8,3.584-8,8c0,66.168,53.832,120,120,120s120-53.832,120-120C304,179.584,300.424,176,296,176z
M184,288c-54.656,0-99.592-42.376-103.696-96h207.392C283.592,245.624,238.656,288,184,288z" />
<path d="M216,144h48c4.424,0,8-3.584,8-8s-3.576-8-8-8h-33.056l23.712-35.56c2.456-3.672,1.464-8.648-2.216-11.096
c-3.696-2.456-8.656-1.456-11.096,2.216l-32,48c-1.632,2.456-1.792,5.608-0.4,8.208C210.336,142.368,213.048,144,216,144z" />
<path d="M104,144h48c2.952,0,5.664-1.624,7.056-4.224c1.392-2.6,1.232-5.76-0.4-8.208l-32-48
c-2.448-3.672-7.416-4.672-11.096-2.216c-3.68,2.448-4.672,7.416-2.216,11.096L137.056,128H104c-4.424,0-8,3.584-8,8
S99.576,144,104,144z" /> </svg>
</a>
</div>
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap');
body {
oustline: none;
user-select: none;
position: relative;
box-sizing: border-box;
background: #F7FBFF;
margin-top:400px;
font-family: "Quicksand";
}
.search-form {
position: relative;
top: 38%;
left: 0;
right: 0;
width: 50%;
height: 80px;
margin: 0 auto;
border-radius: 35px;
border-radius: 50px;
background: #F7FBFF;
box-shadow: 14px 14px 12px rgba(113, 162, 223, 0.1) ,
-14px -14px 11px #ffffff;
}
.search-input {
position: absolute;
top: 30px;
left: 60px;
font-size: 15px;
background: #F7FBFF;
color: #5a6674;
width: 70%;
height: 20px;
font-family: "quicksand";
border: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
}
.search-input::-webkit-search-cancel-button {
-webkit-appearance: noneappearance: none;
}
.search-button {
position: absolute;
top: 27px;
left: 25px;
height: 20px;
width: 20px;
padding: 0;
margin: 0;
border: none;
background: #F7FBFF;
outline: none !important;
}
.search-button svg {
width: 25px;
height: 25px;
}
.search-option {
position: absolute;
text-align: right;
top: 27px;
right: 25px;
}
.search-option div {
position: relative;
display: inline-block;
margin: 0 1px;
}
.search-option div input {
position: absolute;
top: 0;
left: 0;
opacity: 0.01;
}
.search-option div span {
position: absolute;
display: block;
text-align: center;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
opacity: 0;
background: #929AA3;
color: #fff;
font-size: 9px;
letter-spacing: 1px;
line-height: 1;
text-transform: uppercase;
padding: 3px 20px;
border-radius: 12px;
top: -18px;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.search-option div span::after {
content: '';
position: absolute;
bottom: -3px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
border-top: 4px solid #929AA3;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.search-option div:hover span {
opacity: 1;
top: -30px;
}
.search-option div label {
display: block;
}
.search-option div svg {
}
.search-option div:hover svg {
opacity: 1;
}
.search-option div input:checked + label span {
background: #2D7DFF;
}
.search-option div input:checked + label span::after {
border-top-color: #2D7DFF;
}
* {
cursor: default;
outline: none;
user-select: none;
font-family: 'Quicksand';
}
.md-select {
position: absolute;
top: 8%;
left: 7%;
display: block;
}
.md-select [type=button] {
border-radius: 35px;
background: #F7FBFF;
box-shadow: 7px 7px 8px rgba(113, 162, 223, 0.2),
-7px -7px 8px #ffffff;
border: none;
transition: all 0.2s;
color: #485469;
cursor: default;
display: block;
line-height: 40px;
padding: 2px 0 1px 14px;
position: relative;
text-align: left;
width: 120%;
z-index: 1;
outline: none;
overflow: hidden;
}
.md-select [type=button]:hover {
color: white;
box-shadow: 0px 0px #fff;
transition: all 0.2s;
background: #cf2d48;
}
.md-select [type=button]:after {
content: '\25be';
float: right;
font-size: 24pt;
color: #485469;
margin-left: -5px;
padding-right: 16px;
}
#GOOGLE {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 800px;
height: 530px;
border-radius: 24px;
background: #F7FBFF;
box-shadow: 13px 13px 10px rgba(113, 162, 223, 0.1),
-13px -13px 15px #ffffff;
}
button {
outline: none;
}
.negara {
position: absolute;
left: 5.5%;
bottom: 8%;
display: inline-block;
padding: 15px 30px;
background: transparent;
border: none;
transition: 0.3s;
}
.negara svg {
float: left;
padding-right: 5px;
margin: 0px -20px 0 -20px;
transition: 0.3s;
border-radius: 50%;
}
.negara:hover {
color: #FFA800;
transition: 0.3s;
box-shadow: 0px 0px;
}
.negara svg:hover {
fill: #FFA800;
}
.setting {
position: absolute;
right: 3.5%;
bottom: 8%;
display: inline-block;
padding: 15px 30px;
background: transparent;
border: none;
}
.setting svg {
fill: none;
stroke: black;
}
.setting svg:hover {
fill: #0f9d58;
}
.setting svg:active {
transform: scale(1.3);
transition: 0.2s;
}
.info {
position: absolute;
right: 8.5%;
bottom: 8%;
display: inline-block;
padding: 15px 30px;
transition: 0.2s;
background: transparent;
border: none;
}
.info svg:hover {
fill: #31aa52;
}
.info svg:active {
transform: scale(1.3);
transition: 0.2s;
}
#thrga {
position: absolute;
display: flex;
justify-content: space-evenly;
right: 6.8%;
top: 6.8%;
}
#thrga img {
margin-top: 5px;
height: 50px;
width: 50px;
border-radius: 50%;
box-shadow: 9px 9px 10px rgba(113, 162, 223, 0.2),
-13px -13px 5px #ffffff;
}
#thrga .infoo {
border-radius: 50%;
border-radius: 50px;
background: #F7FBFF;
box-shadow: 7px 7px 10px rgba(113, 162, 223, 0.2),
-7px -7px 10px #ffffff,
inset -5px -5px 10px #ffffff;
margin: 9px;
padding: 12px 15px;
border: none;
}
#thrga .infoo:hover {
background: #eb4132;
box-shadow: 0px 0px;
}
#thrga svg:hover {
fill: white;
}
#thrga svg:active {
transition: 0.3s;
transform: scale(1.3);
}
#empat {
position: absolute;
display: flex;
justify-content: center;
position: relative;
top: 41%;
left: 0;
right: 0;
width: 50%;
margin: 0 auto;
}
#empat .menu {
background: #F7FBFF;
box-shadow: 5px 5px 5px rgba(113, 162, 223, 0.2),
-12px -12px 16px #f9fcff, inset -5px -5px 10px #fcfcfc,
inset 5px 5px 5px #FEFFFF;
padding: 12px 15px;
margin: 15px;
transition: 0.6s;
border-radius: 50%;
}
#empat .menu:hover {
background: #0066FF;
transition: 0.6s;
box-shadow: 5px 5px 15px #5B98FF,
-13px -13px 9px #fff,inset -5px -5px 20px #478FFF,
inset 5px 5px 5px #3076FF;
}
#empat svg {
width: 15px;
height: 15px;
transition: 0.6s;
}
#empat svg:hover {
fill: white;
transition: 0.6s;
stroke: white;
}
#empat svg:active {
transition: 0.2s;
transform: scale(1.3);
}
