To create an action button share using JavaScript

Share action button

Along with the development of the design, more and more attractive and unique website appearances become. One of them is advertisement Share the button action. In this display is the key share will have less space but will have a more interesting effect.

Then how do you do Share action button with JavaScript? No longer do you have to wait, just open your computer and follow some of the simple steps below.

Tutorials

1. Prepare some pictures of social media icons that you can download First.

Download Social media symbol

Put the social media icon images in the same folder as index.html and style.css.

2. Open the XAMPP control panel and activate Apache.

3. Open the text editor program installed on your computer, here I use the text editor Notepad ++. Enter the following HTML5 code.

    Action Button Share        
+
  • Share on Facebook
  • Share on Twitter
  • Share on Instagram
  • Share on WhatsApp
  • Share on Linkedin

Save the above HTLM5 code in the xampplite folder – htdocs – create a new folder named ActionButtonShare – save the code above with the name index.html.

4. To see the results of the script code above, you can open your browser and type http: // localhost / ActionButtonShare.

5. Enter the following CSS code.

*{    margin: 0;    padding: 0;    font-family: sans-serif;}body{    min-height: 100vh;    background: linear-gradient(#7d6cfc,#c635ea);}.action{    position: fixed;    bottom: 50px;    left: 50px;    width: 50px;    height: 50px;    background: #fff;    border-radius: 50%;    cursor: pointer;    box-shadow: 0 5px 5px rgba(0,0,0,0.1);}.action span{    position: relative;    width: 100%;    height: 100%;    display: flex;    justify-content: center;    align-items: center;    color: #a13dea;    font-size: 2em;    transition: 0.3em ease-in-out;}.action.active span{    transform: rotate(135deg);}.action ul{    position: absolute;    bottom: 55px;    background: #fff;    min-width: 250px;    padding: 20px;    border-radius: 20px;    opacity: 0;    visibility: hidden;    transition: 0.3s;}.action.active ul{    bottom: 65px;    opacity: 1;    visibility: visible;    transition:0.3s;}.action ul li{    list-style: none;    display: flex;    justify-content: flex-start;    align-items: 10px 0;    padding: 10px 0;    transition: 0.3s;}.active ul li:hover{    font-weight: 600;}.action ul li:not(:last-child){    border-bottom: 1px solid rgba(0,0,0,0.1);}.action ul li img{    margin-right: 10px;    opacity: 0.2;    transform: scale(0.8);}.action ul li:hover img{    opacity:0.8}

Save the CSS code in the xampplite folder – htdocs – create a new folder named ActionButtonShare– Save the CSS code under the name style.css.

6. Reload the URL address: http: // localhost / ActionButtonShare. View from the beginning Share action button. Click on the icon + and choose which social media you want to use. However Share action button does not work yet because if symbol + clicked cannot display social media icons.

7. Agar Share action button may work, open the index.html file and add javascript code before the code .


Also, add JavaScript code to the following HTML code in class = “action”.

Don’t forget Ctrl + S.

8. Reload the URL address: http: // localhost / ActionButtonShare. Icon display + will change too x When opening Share the button action.

When one of the social media icons is selected, the social media icons will be displayed bold (thick line).

9. Done, very interesting, isn’t it?

Hence the explanation of the tutorial ‘How to Make Share action button with JavaScript ‘. Much luck.






Leave a Reply

Your email address will not be published.