Subscribe Button Styles - Frontend in 2024 - Html & CSS.

Subscribe Button Styles

Code : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .subscribe{
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background-color: rgb(229, 231, 234);
            padding: 0 6px;
            width: 120px;
            border-radius: 16px;
            margin: 0 30%;
        }
    </style>

</head>
<body>

    <div class="subscribe">
        <img src="./assets/bell.svg" alt="Bell" width="20px" height="20px" srcset="">
        <p>Subrcibed</p>
        <img src="./assets/down arrrow.svg" alt="Down Arrow" width="20px" height="20px" srcset="">
    </div>
   
</body>
</html>

Icons & Images :






Follow us for more Frontend Designs

Comments

Post a Comment

Popular posts from this blog

Finding Second largest number in Array - Java - TCS - Technical Interview

 Finding Second largest Number in Array :           1. First we need two variable called largest and second-largest. As next step, we need to use for-each loop to get the elements one by one.           2. Then as first condition is check whether value from the array is greater than largest.            3. If it is store the largest value into second-largest and value from the array into largest.            4. If not check another condition as value from the array is greater than second-largest and not equal to largest.            5. If this condition is true, store the value from the array into second-largest, is this if the second-largest value is value of last before(that is array.length-2 location).            6. It that condition also false do nothing, continue to next iteration. Co...
Read more

Checking Character only in String - Java 2024 - MNC - Technical Interview

 Checking if the String contains Character only     Get the input from the user using Scanner class. Then create a method to check the following condition. 1. Check if the string is null or empty, if it is directly return false. 2. Iterate the String using for loop inside the for loop, use the if for condition checking. 3. Condition is check the Character only, for this use the Character Wrapper class, in that we have  isAlphabetic() method to check the character. 4. This method will return true or false based on it is character or not. Code: package com.dinatechy.challange; import java.util.Scanner; public class CheckCharacter { public static void main(String[] args ) { //Check the String only contains Character or Not Scanner scan = new Scanner(System. in ); System. out .print( "Enter the String : " ); String data = scan .next(); scan .close(); boolean isChar = checkOnlyCharacter ( data ); System. out .println( isChar ? "Yes...
Read more

Object Class in Java | Article | Solution Maker - Blog

Solution Maker Understanding the Object Class in Java: Methods, Overriding, and Best Practices Introduction      The Object class in Java is the cornerstone of the Java class hierarchy. Every class in Java is directly or indirectly derived from the Object class, making it fundamental to understanding Java programming. In this blog post, we'll explore the key methods provided by the Object class, the implications of overriding these methods, and best practices for ensuring consistent behavior in your Java applications. Key Methods of the Object Class The Object class provides several essential methods that are inherited by all Java objects: toString() : Returns a string representation of the object. By default, it includes the class name and the ...
Read more