我们可以将框阴影和其他HOVER和FOCUS STATES属性设置为asp.net中的链接按钮吗？ [英] Can we set box shadow and other HOVER AND FOCUS STATES properties to a link button in asp.net?

问题描述

我们可以将框阴影和其他HOVER和FOCUS STATES属性设置为asp.net中的链接按钮吗？ 
 
 <   asp：Content     ID   =  Content1    ContentPlaceHolderID   =  ContentPlaceHolder1    Runat   = 服务器 >  
 <   link     rel   = 样式表    type   =  text / css    media   =  screen    href   =  css / linkstyles.css    /  >  
 < ;  表格    runat  < span class =code-keyword> =  server >  
 
 <   asp：LinkBut​​ton     ID   =  LinkBut​​ton3    runat   =  server    BorderStyle   =  Groove    BorderWidth   =  3px   < span class =code-attribute> Font-Bold   =  True   字体下划线  =  False  
   
                                           OnClick   =  LinkBut​​ton3_Click  
   
                                < span class =code-attribute>          样式  =  font-size：small;左：734px;颜色：#ffffff; 
 font-family：Tahoma;位置：绝对;上：150px; background-color：＃3579DC;身高：20px;宽度：107px;  
   
                        < span class =code-attribute>                   OnClientClick     = 返回确认（'您确定要删除管理员吗？'）;   > 删除管理员<   / asp：LinkBut​​ton  >  
 <   / form  >  
 <   / asp：Content  >  
 
 
我的css页面
 
 .Content1 LinkBut​​ton2 {
宽度：100px; / *与高度相同* / 
身高：100px; / *与宽度相同* / 
 background-color：＃ff0000; 
 border：1px solid＃ff0000; / *与背景颜色相同* / 
颜色：#fff; 
 font-size：1.6em; 
 / *将border-radius设置为宽度和高度的一半* / 
 -webkit-border-radius：50px; 
 -moz-border-radius：50px; 
 border-radius：50px; 
 / *给按钮一个小的阴影* / 
 -webkit-box-shadow：0 0 10px rgba（0,0,0，.75）; 
 -moz-box-shadow：0 0 10px rgba（0,0,0，.75）; 
 box-shadow：2px 2px 15px rgba（0,0,0，.75）; 
} 
 / ***现在按下按钮状态*** / 
。内容1 LinkBut​​ton2：悬停{
背景：＃c20b0b; 
 border：1px solid＃c20b0b; 
 / *减小阴影的大小以产生推动效果* / 
 -webkit-box-shadow：0px 0px 5px rgba（0,0,0，.75）; 
 -moz-box-shadow：0px 0px 5px rgba（0,0,0，.75）; 
 box-shadow：0px 0px 5px rgba（0,0,0，.75）; 
} 

解决方案

在css页面

。btn1 
 {
 color：#ffffff; 
 background-color：＃006697; 
 
} 
 .btn1：悬停
 {
 
 border-bottom-style：groove; 
背景：＃3A6629; 
 border：1px solid＃3A6629; 
  / *  减小阴影的大小以产生推动效果* /  
 -webkit-box-shadow：0px 0px 5px rgba（ 0 ， 0 ， 0 ，。 75 ）; 
 -moz-box-shadow：0px 0px 5px rgba（ 0 ， 0 ， 0 ，。 75 ）; 
 box-shadow：0px 0px 5px rgba（ 0 ， 0 ， 0 ，。 75 ）; 
} 

在ASPX页面中

 <   asp：LinkBut​​ton     ID   =  LinkBut​​ton2 < span class =code-attribute>   CssClass   =  btn1    runat   =   server    Font-Bold   = 真    BorderStyle   =  Groove    BorderWidth   =  3px < span class =code-attribute>  字体下划线  =  False  
   
                                         OnClick   =  LinkBut​​ton2_Click1  
   
                                        样式  =  font-size：small;左：449px; 
 font-family：Tahoma;位置：绝对;上：150px;身高：20px;宽度：107px;  
   
                        < span class =code-attribute>                 OnClientClick     = 返回确认（'您确定要广告吗？ d admin？'）;   > 添加管理员<   / asp：LinkBut​​ton  >  

Can we set box shadow and other HOVER AND FOCUS STATES properties to a link button in asp.net?

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<link rel="Stylesheet" type="text/css" media="screen" href="css/linkstyles.css" />
<form runat="server">

<asp:LinkButton ID="LinkButton3" runat="server" BorderStyle="Groove" BorderWidth="3px" Font-Bold="True" Font-Underline="False"

                    OnClick="LinkButton3_Click"

                    Style="font-size: small; left: 734px; color: #ffffff;
                    font-family: Tahoma; position: absolute; top: 150px; background-color: #3579DC; height: 20px; width: 107px;"

                    OnClientClick ="return confirm('Are you sure you want to remove admin?');" >Remove Admin</asp:LinkButton>
</form>
</asp:Content>


my css page

.Content1 LinkButton2{
width:100px; /*same as the height*/
height:100px; /*same as the width*/
background-color:#ff0000;
border:1px solid #ff0000; /*same colour as the background*/
color:#fff;
font-size:1.6em;
/*set the border-radius at half the size of the width and height*/
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
/*give the button a small drop shadow*/
-webkit-box-shadow: 0 0 10px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 10px rgba(0,0,0, .75);
box-shadow: 2px 2px 15px rgba(0,0,0, .75);
}
/***NOW STYLE THE BUTTON'S HOVER STATE***/
.Content1 LinkButton2:hover{
background:#c20b0b;
border:1px solid #c20b0b;
/*reduce the size of the shadow to give a pushed effect*/
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
-moz-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
box-shadow: 0px 0px 5px rgba(0,0,0, .75);
}

解决方案

In css page

.btn1
{
    color: #ffffff;
    background-color: #006697;

}
.btn1:hover
{

    border-bottom-style:groove;
    background:#3A6629;
    border:1px solid #3A6629;
/*reduce the size of the shadow to give a pushed effect*/
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
    box-shadow: 0px 0px 5px rgba(0,0,0, .75);
}

In ASPX page

<asp:LinkButton ID="LinkButton2" CssClass="btn1" runat="server" Font-Bold="True" BorderStyle="Groove" BorderWidth="3px" Font-Underline="False"

                   OnClick="LinkButton2_Click1"

                   Style="font-size: small; left: 449px;
                   font-family: Tahoma; position: absolute; top: 150px; height: 20px; width: 107px;"

                   OnClientClick ="return confirm('Are you sure you want to add admin?');" >Add Admin</asp:LinkButton>

这篇关于我们可以将框阴影和其他HOVER和FOCUS STATES属性设置为asp.net中的链接按钮吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！