Кнопка закругленного угла ASP.NET - PullRequest
Новая
       22

Кнопка закругленного угла ASP.NET

4 голосов
/ 03 ноября 2010

Я хочу использовать кнопку закругленного угла в своем приложении asp.net.Есть ли в ASP.NET 3.5 что-нибудь, что помогает нам сделать закругленную угловую кнопку?

Ответы [ 4 ]

3 голосов
/ 04 ноября 2010

Вот элемент управления и CSS, которые я использую. Моя кнопка квадратная, но это не тот случай. Вы можете создать округлое изображение самостоятельно.

alt text

alt text

    <asp:LinkButton ID="lbtnSignIn" class="button" runat="server" OnClick="lbtnSignIn_Click"><span>Sign In</span></asp:LinkButton>

.button
{   
    background: transparent url('../../Images/ButtonLeft.gif') no-repeat top left;  
    display: block;
    float: left;
    line-height: 11px; /* 21px (Button Background) = 5px (padding-top) + 11px (font-size) + 5px(padding-bottom) */
    height: 21px; /* Button Background Height */
    padding-left: 9px;  
    text-decoration: none;
    font-weight: bold;
    color: white;
    font-size: 11px;    
}

a:link.button, a:visited.button, a:active.button
{
    color: white;
    text-decoration: none;
    margin-right: 10px;
}

a.button:hover
{ 
    background-position: bottom left;
}

a.button span, a.button span 
{
    background: transparent url('../../Images/ButtonRight.gif') no-repeat top right;    
    display: block;
    padding: 5px 9px 5px 0; /*Set 9px below to match value of 'padding-left' value above*/
}

a.button:hover span
{ 
    background-position: bottom right;
    color: white;
}
3 голосов
/ 04 ноября 2010

Вы можете использовать инструментарий управления ajax, который имеет удлинитель с закругленными углами. Лично я никогда не использовал это в проекте. Я использую css3 border-radius и просто позволяю пользователям IE жить с квадратными границами, пока их браузер не догонит (http://www.cssportal.com/css3-rounded-corner)

Вот ссылка на образец контрольного расширителя. http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/RoundedCorners/RoundedCorners.aspx

1 голос
/ 04 января 2011

Как сказал p.cambell, техника по этой ссылке прекрасно работает: http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

Но вы должны заменить свой «кнопочный» серверный элемент управления серверным серверным элементом HyperLink, потому что css применяется к тегу «a».

Итак, в Visual Studio вместо этого нарисуйте кнопку, нарисуйте HyperLink с CssClass = "button"

Bye!

1 голос
/ 03 ноября 2010

Как насчет применения стиля CSS к вашей кнопке?

Пример кода, демонстрация, учебное пособие для Оскара Александра

Используя код, вы можете убедиться, что все кнопкиполучить стиль именно так, как вы хотите.

...