Reputation: 311

a tag that looks like a button using CSS

I made the following CSS class:

.mine-button { 
    outline: 0;
    background-color:rgb(153,153,153);
    margin: 0 4px 100px 0;
    padding: 0 1em;
    color:rgb(255,255,0);
    height: 2em;
    text-decoration: none !important; 
    cursor: pointer; 
    position: relative;
    text-align: center;
    vertical-align:middle;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    float:right;
}

Then I added the following to the HTML file:

<a class='mine-button'>Read more</a>

but this is what I get:

ScreenShot

There's 2 problems:
1. The "Read me" is not aligned vertically in the middle of the "button"
2. The "button" is over the yellow border of the text although the margin-bottom in the class above is set to 100px !

Upvotes: 0

Answers (7)

Abner Stan.

Reputation: 121

This one looks better.Have a look on this: I think the height and the padding was not stable. this should do.

.mine-button {
  background-color: rgb(153,153,153); /* Green */
  border: none;
  color:yellow;
  border-radius:15px;
  padding:1em 1em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
   cursor: pointer; 
  font-size: 16px;
  float :right;
}

The second problem, you might want to look on to the position tag in CSS and set the left and right manually. That what I will do. Maybe there are another modern ways but I just go traditional. Hope this help, cheers!!!

Upvotes: 0

Veena K. Suresh

Reputation: 1002

Change your a tag to

<a class='mine-button'><span>Read more</span></a>

and Use 'flexbox' to overcome your improper usage of margin, and vertical alignment issue.

.mine-button { 
    outline: 0;
    background-color:rgb(153,153,153);
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly 
                                 works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display:flex;
    align-items:center;
    justify-content :center;
    height:30px;
    width:100px;
    color:rgb(255,255,0);
    text-decoration: none !important; 
    cursor: pointer; 
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;  
}

Upvotes: 1

thunderbird

Reputation: 2733

try adding padding-top:5px; to your css.

Upvotes: 0

Aayushi Jain

Reputation: 2879

You are using height: 2em, I added padding-top: 0.3em and decrease the height to height: 1.7em and it makes the text in centre.

Here is the Fiddle.

Add margin-bottom: 10px to move it in the yellow line.

Upvotes: 1

Simon Arnold

Reputation: 16157

Try adding:

.mine-button {
  position: relative;  
  line-height: 2em;
}

Assigning line-height the same value as your height will make the content vertically align.

The .mine-button position problem might come from the parent (height, max-height, etc.) or from the previous element, I guess a <p>. Can you provide a complete example for a more accurate answer.

Thank you.

Upvotes: 1