Cool Google Translate Button With Custom Design

<style>
.goog-te-banner-frame.skiptranslate {
    display: none !important;
    } 
body {
    top: 0px !important; 
    }
    .select{color:white;background:#0a3f6e;position:fixed;
    bottom:0;right:10%;padding-left:0px!important;
    padding:0px!important;margin:0px!important;text-align:center;list-style:none;
        font-size:small;
        
    }
.select > li > a{background:#0a3f6e;padding:5px 10px;
    
    
}
.select li {
 transition-duration: 0.5s;
}
.select > li > a{color:white!important}
.select  li:hover {
  cursor: pointer;
}

ul.select  li ul li{
background:white;padding:0px 5px;margin-bottom:0px!important;}
ul.select  li ul {
  visibility: hidden;
  opacity: 0;
  list-style:none;
  padding-left:0px;
  transition: all 0.5s ease;
  margin:0px!important;
  display: none;
}
ul.select ul  li:hover,ul.select ul li:hover a.lang-es,ul.select ul li:hover a.lang-es span,ul.select ul li:hover a.lang-es:link{
background:#eee;
}
.select a{color:#333;text-decoration:none}
ul.select  li:hover > ul,
ul.select  li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}
.select a{display:table}
.select a span{display:table-cell;vertical-align: middle;}
.select img{width:30px;height:auto;margin-right:10px}
.select svg{height:16px;width:16px;margin-bottom:-3px;fill:white;margin-right: 10px;}


</style>

<ul class='select'>
    <li>
    <ul class="dropdown">
        
          <li><a href="#googtrans(en|en)" class="lang-en lang-select" data-lang="en"><img src="https://www.hultprivatecapital.com/wp-content/uploads/2019/08/united-kingdom.png" alt="English"><span>English</span></a></li>
		  <li><a href="#googtrans(en|es)" class="lang-en lang-select" data-lang="es"><img src="https://www.hultprivatecapital.com/wp-content/uploads/2019/08/spain.png" alt="Spanish"><span>Spanish</span></a></li>
		  <li><a href="#googtrans(en|fr)" class="lang-en lang-select" data-lang="fr"><img src="https://www.hultprivatecapital.com/wp-content/uploads/2019/08/france.png" alt="French"><span>French</span></a></li>
		  <li><a href="#googtrans(en|de)" class="lang-en lang-select" data-lang="de"><img src="https://www.hultprivatecapital.com/wp-content/uploads/2019/08/germany.png" alt="German"><span>German</span></a></li>
		  <li><a href="#googtrans(en|hi)" class="lang-es lang-select" data-lang="hi"><img src="https://www.hultprivatecapital.com/wp-content/uploads/2019/08/india.png" alt="Hindi"><span>Hindi</span></a></li>
		  <li><a href="#googtrans(en|ar)" class="lang-es lang-select" data-lang="ar"><img src="https://www.hultprivatecapital.com/wp-content/uploads/2019/08/united-arab-emirates.png" alt="Arabic"><span>Arabic</span></a></li>
		  <li><a href="#googtrans(en|zh-CN)" class="lang-es lang-select" data-lang="zh-CN"><img src="https://www.hultprivatecapital.com/wp-content/uploads/2019/08/china.png" alt="Chinese"><span>Chinese</span></a></li>
		  <li><a href="#googtrans(en|ur)" class="lang-es lang-select" data-lang="ur"><img src="https://www.hultprivatecapital.com/wp-content/uploads/2019/08/pakistan.png" alt="Urdu"><span>Urdu</span></a></li>
      </ul><a id='reset'>
    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M25.74 30.15l-5.08-5.02.06-.06c3.48-3.88 5.96-8.34 7.42-13.06H34V8H20V4h-4v4H2v3.98h22.34C22.99 15.84 20.88 19.5 18 22.7c-1.86-2.07-3.4-4.32-4.62-6.7h-4c1.46 3.26 3.46 6.34 5.96 9.12L5.17 35.17 8 38l10-10 6.22 6.22 1.52-4.07zM37 20h-4l-9 24h4l2.25-6h9.5L42 44h4l-9-24zm-5.25 14L35 25.33 38.25 34h-6.5z"/></svg> <span id='reset-text'>Translate</span></a>
      
    </li>
  </ul>

<script type="text/javascript">
    function googleTranslateElementInit() {
      new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT}, 'google_translate_element');
    }

	function triggerHtmlEvent(element, eventName) {
	  var event;
	  if (document.createEvent) {
		event = document.createEvent('HTMLEvents');
		event.initEvent(eventName, true, true);
		element.dispatchEvent(event);
	  } else {
		event = document.createEventObject();
		event.eventType = eventName;
		element.fireEvent('on' + event.eventType, event);
	  }
	}

	jQuery('.lang-select').click(function() {
	  var theLang = jQuery(this).attr('data-lang');
	  jQuery('.goog-te-combo').val(theLang);

	  //alert(jQuery(this).attr('href'));
	  window.location = jQuery(this).attr('href');
	  location.reload();
	});
    if (window.location.href.indexOf("#googtrans") > -1) {
      jQuery('#reset-text').html('Show Original');
      jQuery('.dropdown').empty();
      jQuery( "#reset" ).click(function() {
     ////
     var iframe = document.getElementsByClassName('goog-te-banner-frame')[0];
  if(!iframe) return;

  var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
  var restore_el = innerDoc.getElementsByTagName("button");

  for(var i = 0; i < restore_el.length; i++){
    if(restore_el[i].id.indexOf("restore") >= 0) {
      restore_el[i].click();
      var close_el = innerDoc.getElementsByClassName("goog-close-link");
      close_el[0].click();
      history.pushState("", document.title, window.location.pathname + window.location.search);
      window.location.reload();
      return;
    }
  }
     
    
  //
});
    }
	
  </script>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>