Image button as facebook globe icon notification

2 posts, 0 answers
  1. Nareshkumar
    Nareshkumar avatar
    5 posts
    Member since:
    Oct 2013

    Posted 18 Oct 2013 Link to this post

    i want to create a facebook globe icon notification for my application. i planned to use image button. Please help me.... i need some sample code snippet
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 18 Oct 2013 Link to this post

    Hi Nareshkumar,

    Please have a look into the following sample code snippet which shows facebook globe like notification along with RadImageButton.

    ASPX:
    <div id="Container">
        <telerik:RadButton ID="btnBgrImg2" runat="server" ForeColor="Black" CssClass="goButtonClassHov"
            Width="100" Height="95px">
            <Image ImageUrl="../Images/globe.jpg" IsBackgroundImage="true"></Image>
        </telerik:RadButton>
        <div class="bubble">
            2</div>
    </div>

    CSS:
    <style type="text/css">
        #Container
        {
            position: relative; /* This is crucial for the absolutely positioned element */ /* This is just to show you where the container ends */
            width: 16px;
            height: 16px;
        }
        .bubble
        {
            position: absolute; /* This breaks the div from the normal HTML document. */
            top: 10px;
            right: -80px;
            padding: 1px 2px 1px 2px;
            background-color: red; /* you could use a background image if you'd like as well */
            color: white;
            font-weight: bold;
            font-size: 15px; /* The following is CSS3, but isn't crucial for this technique to work. */ /* Keep in mind that if a browser doesn't support CSS3, it's fine! They just won't have rounded borders and won't have a box shadow effect. */ /* You can always use a background image to produce the same effect if you want to, and you can use both together so browsers without CSS3 still have the rounded/shadow look. */
            border-radius: 30px;
        }
    </style>

    Please have a look into this link.
    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top