MyBtn ServerControl

'Anders Åberg
'LinkButton med ikon & text
'Används:
'<cc1:myBtn ID="addTask" runat="server"  Text="Lägg till uppgift" ImageUrl="Images/add.png" ></cc1:myBtn>

Imports System
Imports System.Collections.Generic
Imports System.ComponentModel
Imports System.Text
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls


<DefaultProperty("Text"), ToolboxData("<{0}:myBtn runat=server></{0}:myBtn>")> _
Public Class myBtn
    Inherits LinkButton


    Private _text As String
    Overrides Property Text As String
        Set(ByVal value As String)
            ViewState("Text") = value
        End Set
        Get
            Return ViewState("Text")
        End Get
    End Property

    Private image As New Image
    Private _imageUrl As String
    Public Property ImageUrl As String
        Get
            Return _imageUrl
        End Get
        Set(ByVal value As String)
            _imageUrl = value
        End Set
    End Property

    Private _innertext As New HtmlControls.HtmlGenericControl("span")
    Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)
        MyBase.CssClass = "Btn"
        MyBase.Render(writer)
    End Sub

    Protected Overrides Sub RenderContents(ByVal output As HtmlTextWriter)
        image.ImageUrl = _imageUrl
        If _imageUrl = "" Then image.Visible = False

        Me.Controls.Add(image)
        _innertext.InnerText = ViewState("Text")
        Me.Controls.Add(_innertext)
        Me.RenderChildren(output)

    End Sub

End Class

Ser ut såhär:

CSS:

.Btn
{
border:none;
background-color: #fff;
color:#333;
-moz-box-shadow: 0px 0px 3px #aaa;
-webkit-box-shadow: 0px 0px 3px #aaa;
padding: 6px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
text-decoration:none;
cursor:pointer;
float:left;

}
.Btn[disabled]
{
opacity:0.6;
}
.Btn[disabled]:hover
{
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
cursor:default;
}

.Btn .icon
{
padding:0 !important;
}
.Btn span, .Btn img
{
float:left;
}
.Btn span
{
padding-top:2px;
margin-left:5px;
text-decoration:none;
}

.Btn:hover
{
-moz-box-shadow: 0px 0px 6px #aaa;
-webkit-box-shadow: 0px 0px 6px #aaa;
}

Efter att knappen används kan det vara bra att återställa "floatsen" med < div style='clear:both'>< /div>