Making a button via CSS, but instead get two bars on top

StackOverflow https://stackoverflow.com/questions/23384915

  •  12-07-2023
  •  | 
  •  

Вопрос

I am trying to create a button for my link which has the name on the button and allows the user to click on it and go to the link.

Also I'm not sure why but my link "click-able range" seems to be extended.

Here is the Code:

<body>
<div id="container">

<a href="http://www.medium.com/" target="Medium"><div id="link">My Favorite Website</div></a>

    </div>
</body>

Here is the CSS: 

#container {
width:960px;
margin-left: auto;
margin-right: auto;
padding: 30px 0px;
}

a {
padding: 7px 100px;
border-radius: 10px;
background-size: 80px 60px;
background-color: green;
text-decoration: none;
}

#link {
padding: 7px;
font-size: 15px;
font-weight: bold;
font-style: italic;
}

Thanks!

Это было полезно?

Решение

Your link is inline element so you need to make it block or inline-block to add your styles so:

CSS

a {
    display:inline-block;
}

Другие советы

Having a block element within an inline one is causing your problems.

By default, anchors are displayed inline. You need to display it a little differently, as inline-block:

a {
    padding: 7px 100px;
    border-radius: 10px;
    background-size: 80px 60px;
    background-color: green;
    text-decoration: none;
    display:inline-block;
}

JSFiddle

Remove div tag into a tag..

Demo

<div id="container">

<a href="http://www.medium.com/" target="Medium">My Favorite Website</a>

</div>

just add this to #link in css

appearance:button;
-moz-appearance:button; 
-webkit-appearance:button;

is an inline element. To make it behave like a block level element, you need to define its display property in CSS.

a {display:block;} or a {display:inline-block;}

and your link "click-able range" seems to be extended, because you are using a , which is a block level element, inside your tag.

Block level elements take the entire width of its container.

You need to redefine its bevavior.

link{display:inline-block;} or #link{display:inline;}

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top