Html 带边框的 CSS 透明按钮

CSS Transparent buttons with borders

提问by Tom TriumphentGames

I am trying to make a button in css like this one

我正在尝试在 css 中制作一个像这样的按钮

but I have no idea how to do it as I am new to css. This is what I tried:

但我不知道该怎么做，因为我是 css 新手。这是我尝试过的：

.gbtnHollow  {
     background:  transparent;
     height:  38px;
     line-height:  40px;
     border:  2px solid white;
     display:  inline-block;
     float:  none;
     text-align:  center;
     width:  120px;
     padding:  0px!important;
     font-size:  14px;
     color:  #fff;
 }

.gbtnHollow:hover  {
     color:  #fff;
     background:  rgba(255, 255, 255, 0.2);
 }

回答by Justinas

It's very simple, set background: none;to button. JSFiddle

很简单，设置background: none;为按钮。JSFiddle

回答by Jozef Dúc

button {
    background-color: Transparent;
    background-repeat:no-repeat;
    cursor:pointer;
    overflow: hidden;
    outline:none;
}

Add this and customize it for you. Example is here on Fiddle

添加它并为您定制它。示例在Fiddle 上

回答by Kanan tuteja

Its simple. add this css to button:

这很简单。将此css添加到按钮：

button {
    background: none;/*this for transparent button*/
    border: 1px solid black;/* this is for button border*/
    position: relative;
    left: 150px;
    top: 80px;
}

回答by Ashish Dev

#button {
     width: 150px;
     height: 50px;
     border:none;
     border:solid 2px black;
     border-radius: 5px;
     background: rgba(255, 255, 255,0);
     font-size: 25px;
}

#button:hover {
     background:black;
     color:white; 
}