Ground Tutorial is a blog that shares tutorials on web design and development. Here you will find designs and tutorials on HTML, CSS, JavaScript, Bootstrap and JQuery.
Glowing Social Media Icons using HTML CSS
Get link
Facebook
Twitter
Pinterest
Email
Other Apps
This tutorial will help you to know how to create Glowing Social Media Icons using HTML and CSS. Earlier I shared tutorials on many more types of CSS Glowing Social Media Buttons.
Here I have used colorful animations. glow buttons CSS makes your simple buttons more attractive. I only used HTML and CSS here.
Social media icons we use in different places. However, if it is animated, it attracts a lot of users' attention. Here I have used different colors and added a hover effect.
Glowing Social Media Icons CSS
Below I have given a demo that will help you to know how it works. Here you will find the required source code.
As you saw above. I have used the four icons at the top of that page. Those icons have been circled around. Color shadow has been added to the border.
When you click or hover over the button, the width of the button will increase and it will change from round to rectangular.
This will change the background color of the button and the color of the icon. It's easy to build if you know basic HTML and CSS. At the end of the article, there is a button to download the source code.
Step 1: Add Social Media Icons with HTML
I have added all the icons using the following HTML codes. Here I have used 4 icons to create four social buttons.
<div class="container">
<div class="btn" role="button">
<i class="fa fa-facebook"></i>
</div>
<div class="btn" role="button">
<i class="fa fa-instagram"></i>
</div>
<div class="btn" role="button">
<i class="fa fa-youtube"></i>
</div>
<div class="btn" role="button">
<i class="fa fa-twitter"></i>
</div>
</div>
Step 2: Design the Glowing Social button
Now the buttons have been designed by CSS. Each button has a different color added to it
/*Basic design of webpage*/
body {
background-color: black;
font-family: "Poppins", sans-serif;
}
.container {
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
height: 97vh;
}
/*The button is designed by the code below*/
.container .btn {
margin: 20px;
width: 90px;
height: 90px;
border-radius: 50%;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
line-height: 2.5;
font-size: 2.2rem;
font-weight: 500;
transition: 0.2s ease-in-out;
}
/*Added hover and after effects of the button*/
.container .btn:hover {
border: none;
width: 190px;
border-radius: 50px;
}
.container .btn:hover:after {
display: block;
content: "Add";
font-size: 1.5rem;
}
/*1st button's background color and hover color*/
.container .btn:nth-child(1) {
border: 1px solid white;
box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 0.5);
Hopefully, you have been able to create these Glowing Social Icons using the above codes. If there is any problem then you can definitely let me know by commenting.
The source code of this Social Media Icons Glowing Effect can be downloaded with the help of the button below.
Day-Night Toggle Button is a common web element that is often found on websites. This Day Night Toggle Switch in the navigation bar helps to choose the dark and light theme of the website. Currently, the Day And Night Toggle Switch can be seen on almost all major websites starting from Facebook and Instagram. Demo Download This article will help you to know step by step how to create Day Night Toggle Button using CSS . This type of CSS Toggle Button is used to create HTML checkboxes . Here's how to easily create a Toggle Switch using the checkboxes. CSS Day Night Toggle Button Although there are many such tutorials on the Internet. But here I will tell you how to make Day Night Toggle Button and how to implement it in your project. A check box was first created using HTML input to create this button. Then that checkbox is shaped like a button by CSS. To make CSS Day Night Toggle Switch you must have some idea about HTML and CSS. This is not the first time I ha
Here you will learn how to create Splash Image Mask using HTML CSS . The CSS mask image is a kind of simple design where there will be a background color on the image. Some parts of that background will be transparent. As a result, we get to see some of the images in the background. You can use this CSS Splash Image Mask in any background image. Here I used HTML in Aklin which added image. Then I designed it with CSS. You can use this CSS mask background image in the background of any project. Below is a preview that will help you to know how this Splash Image Mask CSS was created. See the Pen Splash Image Mask using Html CSS by Shantanu Jana ( @shantanu-jana ) on CodePen . Here HTML and CSS are used to create this CSS mask-image property . For this, you create an HTML and CSS file. Copy all the code given below and add it to your file. Or use the download button at the bottom of the article to download the code for this Splash Image Mask . HTML Code: The following
In this article, you will learn how to create RGB Color Generator using JavaScript. Earlier I shared with you the project of different types of JavaScript color generators . Some projects create background colors, some gradient colors, and some generate random colors. Using this simple RGB Color Generator you can manually generate RGB color . It is much more modern and professional than other color generators. Here you can mix different colors together and create gradients. This JavaScript RGB Color Generator project has various control buttons. With the help of which you can create gradients by adding colors in different ways. JavaScript RGB Color Generator Many times I use different applications or websites to create my gradient color . In that case, such a project will help you. You can get the required code of the color you have created from here. Which you can copy directly and use as CSS code. Below I have given a demo that will help you to know how this project (RGB Color
Comments
Post a Comment
Tell me what you think ??😎