Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Transparent buttons with borders

Tags:

html

css

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

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

.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);
 }
like image 771
Tom TriumphentGames Avatar asked Aug 25 '14 11:08

Tom TriumphentGames


People also ask

How do you make a button transparent in HTML CSS?

Creating Fully Transparent Buttons Start by creating a simple button in HTML and CSS. Then, change the background color value to transparent. Change the text color on the button so that its still visible under the new background.

How do I make a transparent border color in CSS?

Defines the color of the element's borders. default border-color: transparent; Applies a transparent color to the borders.

How do you make a button border invisible in HTML?

You can make a button without borders in HTML. To remove them, you have to use the border property in CSS and set it to none.

How do I remove the outline button in CSS?

If you want to remove the focus around a button, you can use the CSS outline property. You need to set the “none” value of the outline property.


2 Answers

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

like image 149
Justinas Avatar answered Sep 30 '22 17:09

Justinas


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

like image 20
Jozef Dúc Avatar answered Sep 30 '22 17:09

Jozef Dúc