Stylish Google Translate Button with Custom Text

<style>
#google_translate_element{
  padding:0;
  margin-right:5px;
  margin-top:15px
  }
  
.goog-te-banner-frame.skiptranslate,.goog-te-gadget-simple img,img.goog-te-gadget-icon,.goog-te-menu-value span,.goog-text-highlight{display:none!important}
  
.goog-te-menu-frame,.goog-te-balloon-frame{
  box-shadow:none!important
  }
.goog-te-gadget-simple{
  visibility: hidden;
}
.goog-te-gadget-simple:before {
    content: 'Translator';
    visibility: visible;
    border: 2px solid #eee;
    background-color: #fff;
    padding: 5px 10px;
    border-radius: 8px;
    box-shadow:0 2px 10px -7px rgba(0,0,0,0.2);
  
}

body{top:0px!important}

</style>

<div id="google_translate_element"></div>
<p>This is a paragraph.</p>
<script>

function googleTranslateElementInit() {

new google.translate.TranslateElement({

pageLanguage: 'en',

autoDisplay: 'true',
      includedLanguages:'hi,en,bn,id,fr',
      layout: google.translate.TranslateElement.InlineLayout.SIMPLE

}, 'google_translate_element');

}
</script>

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

You may like these posts :

1 Comments

Anonymous 28 May, 2024
2024-05-23T12:28:35+05:30
How to change Google translate select language text in coding

Reply Delete